QWAIN Portfolio - Webdesign

Honden & Katten Trimsalon Snuit

De eerste website van Trimsalon Snuit was zelf ontwikkeld en opgebouwd uit verouderde website elementen en voldeed daarmee niet meer. Mede door de groeiende concurrentie ontstond de behoefte om een betere online aanwezigheid te creëren.

Een betere SEO (vindbaarheid in Google), geoptimaliseerd voor het gebruik op tablets en mobieltjes; een duidelijk contactformulier, waren slechts een paar wensen.

We hebben aan deze wensen ruimschoots kunnen voldoen en zijn zelfs een stapje verder gegaan: de website is niet alleen informatief maar ook een online tool geworden voor de salon. De website beschikt over een compleet klantenbeheer-systeem en een interactief contactformulier. Dus, overal en altijd alle klant-informatie snel en eenvoudig beschikbaar.

Nadien hebben we ook een gepersonaliseerde Webshop mogen toevoegen.

Onze taken & aandeel:

Website Ontwikkeling
WebShop Implementatie
Extra Speciale Functionaliteit
Website Design
Website Content
Zoekmachine Optimalisatie
Onderhoud & Aanpassingen

Trimsalon Snuit - Impressie

Bekijk de volledige website hier: Trimsalon Snuit


Extra Functionaliteit

(u kunt alle hierna getoonde afbeeldingen aanklikken om een vergrootte versie te bekijken)

Online Klantenbestand

Trimsalon Snuit heeft een grote trouwe klantenkring en sprak de behoefte uit om al de gegevens van haar klanten (lees: huisdieren) bij te kunnen houden en direct opvraagbaar te hebben.

Hiervoor hebben we een klantenbestand-module op maat voor Trimsalon Snuit in de website ingebouwd.

Eenmaal ingelogd komen “verdwijnt” de website, wordt de module actief en is het klantenbestand te gebruiken.

Het is dan mogelijk direct de klantgegevens en de bijbehorende huisdieren op te vragen. Gezocht kan worden op zowel de klantnaam (de huisdier-eigenaar) of de roepnaam van het huisdier.

Overal en altijd de gegevens bij de hand om klanten optimaal van dienst te kunnen zijn.


Trimsalon Snuit Online Klantenbestand Module
Trimsalon Snuit Online Klantenbestand Module

Trimsalon Klantenkaart

Via de klantenkaart is het mogelijk om alle gegevens op te vragen en te beheren van de klant en de huisdieren die bij die klant horen (om privacy-redenen zijn de klantgegevens uitgewist in de afbeelding).

Per klant is het mogelijk om meerdere huisdieren toe te voegen en zo dan de gegevens weer in te zien bij het bezoek van die klant aan de Trimsalon.

De gegevens zijn alleen beschikbaar nadat er is ingelogd op de website. Reguliere bezoekers van de website kunnen deze gegevens dus niet zien. Tevens zijn ze volledig afgeschermd voor de zoekmachines (als bijv. Google) en wordt er gelijk aan de privacy wetgeving voldaan.

De gegevens zijn op te vragen via een zgn. klantenlijst of dierenlijst. Via de één zoekt u via de klantnaam en de andere via de naam van het huisdier.


Trimsalon Klantenkaart
Trimsalon Klantenkaart

Klanten Invoeren

Nieuwe klanten invoeren gebeurd tevens geheel online op de website (en ook alleen mogelijk wanneer er is ingelogd is op de klantenmodule).

Alle gegevens van de klant worden via dit scherm toegevoegd. Na het “Opslaan” van de klantgegevens is het gelijk mogelijk om één of meerdere huisdieren toe te voegen.

Een soortgelijk scherm is dan beschikbaar om alle gegevens van de klant en de bijbehorende huisdieren aan te passen.


Trimsalon Nieuwe Klant Invoeren
Klant Invoeren

Huisdieren Invoeren

Na het toevoegen van klantgegevens is het gelijk mogelijk om de huisdier-gegevens in te voeren. Het is tevens mogelijk om later extra huisdieren aan diezelfde klant toe te voegen.

Na de selectie van het “soort” huisdier is er een ras-selectie aanwezig met standaard de meest voorkomende rassen. Hiermee wordt de invoer makkelijker en consequent over alle klantkaarten hetzelfde. Extra Rassen zijn eenvoudig toe te voegen via de “Admin-Module”.

De geboortedatum van het huisdier wordt tevens gebruikt om automatisch de leeftijd van het huisdier uit te rekenen en bij te houden.

Het veld “Gedrag & Vacht -Notities” is bedoeld om per huisdier specifieke notities bij te houden hoe het huisdier zich gedraagt tijdens de trimbehandeling en hoe de algemene conditie van de vacht is.

Direct daaronder is het mogelijk  om de eerste trimbehandeling van het huisdier in te voeren, waarbij “DTB” staat voor “Duur Trimbehandeling” en “KTB” voor “Kosten Trimbehandeling”. Hiermee kun je direct terug zien, bij een vervolgafspraak wat er de voorgaande trimbehandeling is gedaan en wat ervoor gerekend is.


Trimsalon Huisdier Invoeren
Huisdier Toevoegen

Trimsalon Huisdier Rassen
Eenvoudige Ras Selectie
Trimsalon Huisdier Gedrag
Gedrag & Vacht - Notities
Trimsalon Trimbehandeling Toevoegen
Trimbehandeling Toevoegen

Huisdieren Opzoeken

Huisdieren zijn nu snel en eenvoudig terug te vinden, via de optie “Huisdier Zoeken” in het hoofdmenu.

Er kan gezocht worden op de naam van het huisdier, op soort, op ras en eventueel op leeftijd. Standaard wordt er gezocht op “Exacte” overeenkomsten. Daarmee is het direct mogelijk om te zien of een bepaalde naam wel of niet in het klantenbestand voorkomt.

Kiezen we bijvoorbeeld voor “Soort”, dan “Hond” en dan het ras “Berner Sennenhond” dan zal er een volledige lijst getoond worden met alle honden van het ras “Berner Sennenhond”.

Via het zoeken op leeftijd is het mogelijk om bijvoorbeeld alle honden of katten van 15 jaar en ouder op te zoeken.


Trimsalon Huisdier Opzoeken
Huisdier Zoeken

Trimsalon Huisdier Zoeken Op Naam
Huisdier Zoeken op Naam
Trimsalon Huisdierenlijst op Ras
Zoeken op Ras
Trimsalon Huisdierenlijst op Leeftijd
Zoeken op Leeftijd

Klanten Opzoeken

Naast het zoeken op huisdier-naam is het ook mogelijk om te zoeken op de naam van het baasje. Dat kan eenvoudig via het intypen van de achternaam van de klant. Alle ingevoerde klanten met die achternaam, of een gedeelte daarvan worden direct zichtbaar.

Het is tevens mogelijk om te zoeken op adres, plaatsnaam of telefoonnummer. Een willekeurige combinatie van één van de zoekmogelijkheden is ook mogelijk (dus bijv. klantnaam en woonplaats).


Trimsalon Klant Zoeken
Klant opzoeken

Huisdier Gegevens & Trimbehandelingen

Via de klantenkaart en de daarbij behorende huisdieren-kaart is het mogelijk om de algemene gegevens van het huisdier aan te passen. Heeft de klant meerdere huisdieren dan zijn die zichtbaar in de bijbehorende tabbladen links boven de dierenkaart.

Van links naar rechts heb je dan de mogelijkheid om de gegevens van het huisdier aan te passen, een extra huisdier bij de klant toe te voegen of het huisdier te verwijderen.

Direct onder de dierenkaart is een overzicht van de laatste drie trimbehandelingen met wat er gedaan is en wat de kosten daarvoor waren.

Iedere trimbehandeling is te wijzigen en te verwijderen. Een handige optie hier is dat een trimbehandeling direct gekopieerd kan worden na de datum van vandaag, zodat niet iedere keer eenzelfde soort behandeling opnieuw ingetypt hoeft te worden.


Trimsalon Huisdier Gegevens Bewerken
Huisdier Gegevens & Trimbehandeling(en) Bewerken

Trimbehandeling Toevoegen
Nieuwe Trimbehandeling Toevoegen
Trimbehandeling Kopiëren
Trimbehandeling Kopiëren
Overzicht Alle Trimbehandelingen
Overzicht Alle Trimbehandelingen

Statistieken

Via de statistieken-module is het mogelijk om snel een overzicht te krijgen van de belangrijkste gegevens als:

  • hoeveel klanten er in het bestand ingevoerd zijn;
  • hoeveel huisdieren;
  • overzicht per ras per hond of kat;
  • overzicht per woonplaats;
  • en meer.

De statistieken geven inzicht in het klantbezoek aan de salon. Het overzicht kan behulpzaam zijn om gericht verkoop-acties in te zetten op bijvoorbeeld het hondenras of advertentie inzet per gemeente en/of doelgericht e-mail mailings (nieuwsbrieven) opzetten.

Scherm-Voorbeelden (de cijfers zijn fictief en dienen puur als voorbeeld):

Statistieken - Totaal Overzicht
1 - Klant Verdeling Overzicht
Overzicht per Hondenras
2 - Hondenras Overzicht
Overzicht Klant per gemeente
3 - Klantoverzicht per stad

Interactief Contactformulier

Trimsalon Snuit krijgt ook nog veel aanvragen van met name nieuwe klanten via het contactformulier op de website. Het standaard contactformulier bevatte alleen velden voor de belangrijkste gegevens van de klant als naam, adres, telefoon en e-mail. Extra contact met de klant was dan nodig om te uit te vinden om wat voor huisdier het gaat.

Om de duur van het telefonisch contact met de klant te beperken hebben we het contactformulier aangepast zodat er extra velden toonbaar worden, als er wordt gekozen heeft voor de optie “Ik wil een afspraak maken”.

Is de naam van het huisdier dan ingevuld en wordt er bijvoorbeeld gekozen voor “Hond”, dan worden er nog een extra velden getoond om informatie te verkrijgen over de hond als Ras, Leeftijd en geslacht. Alle Rassen zijn voor de bezoeker eenvoudig te kiezen uit een lijst.

Het voordeel van niet direct alle velden toonbaar te maken is dat de bezoeker niet “schrikt” van de hoeveelheid informatie die gevraagd wordt en die informatie daadwerkelijk wordt opgegeven.

Wil de bezoeker welke het contactformulier invult een afspraak maken voor meerdere huisdieren is dat eenvoudig mogelijk door op de knop “Huisdier toevoegen” te klikken.

Zo heeft de Trimsalon, voordat er echt telefonisch contact is met de klant, de basis-gegevens van het huisdier al beschikbaar en kan er direct een juist tijdblok in de agenda ingepland worden.

De ingevulde gegevens kunnen dan ook direct gebruikt worden voor juiste toevoeging aan de hiervoor beschreven klantenmodule.

Trimsalon Contactformulier
Trimsalon Contactformulier Algemene Informatie
Overige Informatie
Trimsalon Contactformulier Afspraak Maken
Afspraak Maken
Trimsalon Contactformulier Afspraak maken voor een hond
Soort & Ras Keuze

Contactformulier Inzendingen

Alle inzendingen via het contactformulier komen zowel in de mail (inbox) op de computer en telefoon binnen en zijn direct te beantwoorden.

Tevens worden alle inzendingen via het administratieve-gedeelte van de website bewaard en kunnen die eenvoudig worden ingekeken en ook eventueel door op het e-mailadres van de inzending te klikken, worden beantwoord.

Het voordeel: de ingezonden mails behoeven niet bewaard te worden op de telefoon en ook bij het “per ongeluk” verwijderen op de telefoon of via de inbox van uw mail-programma; zijn ze altijd terug te vinden op de website.

(in de afbeelding hiernaast zijn de inzendingen om privacy-redenen niet zichtbaar)


Trimsalon Contactformulier Inzendingen
Overzicht Contactformulier Inzendingen


Webshop Module

WooCommerce Webshop

Trimsalon Snuit verkoopt in de salon dierenvoeding producten en hiervoor is een webshop module ontwikkeld, gebaseerd op het populaire e-commerce systeem “WooCommerce”.

Om de webshop zo eenvoudig mogelijk te maken voor de bezoekers zijn alle modules gepersonaliseerd. Zo is het product-overzicht in plaats van het standaard blokken-overzicht in een tabel-vorm omgezet. Hiermee is het voor de bezoeker eenvoudig en snel een product uit te kiezen en aan de winkelmand toe te voegen.

Na het toevoegen wordt de winkelmand gelijk zichtbaar en is het mogelijk om direct af te rekenen of verder te winkelen.


Trimsalon Webshop Module
Webshop Producten Overzicht

Webshop Winkelmandje

Na het toevoegen van een product wordt de winkelmand direct getoond en zijn de toegevoegde producten, inclusief het totaal te zien.

Hier is het mogelijk voor de klant om een product te verwijderen, naar de afreken-pagina te gaan of om verder te winkelen.

Het winkelmandje-icoon blijft altijd zichtbaar bij het bekijken van alle pagina’s van de website. Snel en eenvoudig en klantvriendelijk.


Trimsalon Webshop Winkelmand
Trimsalon Webshop Winkelmandje

Webshop Order Overzicht

Is er een order via de webshop ontvangen, dan krijgt de Trimsalon daar direct een e-mail bevestiging van.

De orders zijn dan direct via de website te bekijken en eventueel aan te passen. Via de module die dan beschikbaar komt is het mogelijk om de order te bevestigen en de klant te informeren dat de order is afgehandeld en eventueel is verzonden.

Ook deze pagina’s zijn volledig afgeschermd en alleen zichtbaar en toegankelijk via een beveiligd wachtwoord systeem.


Trimsalon Webshop Order Overzicht
Webshop Order Overzicht

Foto Pagina

Op de Foto-pagina hebben we een filter geplaatst waarmee de bezoeker kan kiezen uit “Alle”, “Honden”, “Katten” of “Salon” -foto’s.

De foto’s worden “Masonry” getoond, wat inhoud dat ze volledig automatisch en onafhankelijk van de grootte van de foto zo dicht mogelijk op elkaar getoond worden zonder dat er horizontale witte vlakken te zien zijn.

Ook hier geldt weer dat we aandacht hebben besteed aan de gebruikersvriendelijkheid van het onderhoud van de pagina. Trimster Snuit kan zelf eenvoudig foto’s toevoegen of verwijderen.

Het toevoegen van een nieuwe categorie foto’s (filter) gaat net zo eenvoudig als het toevoegen van een foto; ook dat kan dus zelf gedaan worden.

Trimsalon Foto Pagina Impressie
Foto Pagina Impressie

Voor/Na Foto Slider

Het is ook mogelijk om een foto van “voor” en “na” de trimbehandeling te vertonen in een zgn. “Voor/Na Foto Slider”. Twee foto’s worden dan in één blok geplaatst en de bezoeker kan van links → rechts (en omgekeerd) het resultaat zien:

WPBakery Voor Na Foto Slider Trimbehandeling WPBakery Voor Na Foto Slider Trimbehandeling Na

Van een Informatieve naar een Functionele Website...

Door toevoeging van de klantenbeheer-module, het interactieve contactformulier en de webshop volledig te integreren aan de voorkant van de website is de website van Trimsalon Snuit meer geworden dan alleen maar een informatief kostenplaatje.

De website is een functioneel onderdeel geworden van de dagelijkse werkzaamheden in de salon: de administratieve zaken als het bijhouden van de klantgegevens en binnenkomende bestellingen via de webshop zijn met de aangebrachte aanpassingen zeer eenvoudig en veel minder tijdrovend geworden.


Website laten maken ?

Ook voor uw Trimsalon een website die toegevoegde waarde biedt ?

We ontwikkelen graag een website voor u. Benieuwd hoe we te werk gaan, bekijk dan deze pagina: “Website Design“, of wilt u liever zelf uw website maken ? Een website zelf maken kan ook, maak dan gebruik van “DIT Pakket“.
Een investering die zijn geld dubbel en dwars opbrengt. Komt het niet uit, u kunt ook per maand betalen.
Vraag naar de voorwaarden.

QWAIN - Quality Without Any Interesting Name
Uw partner voor professioneel, snel en betrouwbaar website design, ontwikkeling en trainingen.

WordPress Nieuwsbrief
GEEN ARTIKEL MISSEN ?
Volg dan de duizenden die onze Online WordPress Artikelen maandelijks lezen:
WordPress Nieuwsbrief Popup
WordPress Nieuwsbrief
GEEN ARTIKEL MISSEN ?
Volg dan de duizenden die onze Online WordPress Artikelen maandelijks lezen:
WordPress Nieuwsbrief Popup
Formulierberichten: Foutmelding

Bij vrijwel ieder veld zijn één of meerdere meldingen in te stellen. De foutmelding is er daar één van.

Kolom Indeling

Er verschijnt een foutmelding als het veld “verplicht” is en niet ingevuld of geselecteerd is. Er kan ook een foutmelding getoond worden als de ingevulde waarde niet correct is. Ten behoeve van de gebruikersvriendelijk is het raadzaam om bij ieder veld de foutmelding aan te passen aan het type veld en wat er verwacht wordt dat de gebruiker in moet vullen.

Bij de “Globale Instellingen” vindt je een aantal standaard meldingen welke daar ook aangepast kunnen worden.

Formulierlayout: Kolommen

De velden op het formulier zijn eenvoudig in kolommen weer te geven. Via de CSS-Layout-Klassen optie kies je dan de kolom-breedte:

Kolom Indeling

Ook te opties van de Meerkeuze en de Radioknop zijn in kolommen in te delen.

Formulierveld: Dynamisch

Dit veld wordt gebruikt om dynamisch waarden op te halen uit andere formulieren:

formulieren dynamisch waarden ophalen

In dit voorbeeld hebben we een tweede formulier waarin we de product info, prijs en afbeelding hebben opgeslagen. Het selectieveld is van het type dynamisch en haalt dan de bijkomende informatie op uit het product-formulier.

Formulierveld: Adres

Met dit veld is het mogelijk om in één keer een volledig aantal velden te tonen om adres-informatie in te laten vullen.

Adres Velden

Via de instellingen is de landselectie eventueel uit te schakelen. Er is ook nog een mogelijkheid om een provincie-veld te laten tonen. De extra regel voor de straatnaam is niet uit te zetten. Zouden we dat willen dienen we dat via “Extra CSS” te bewerkstelligen.

Formulierveld: Schakelaar

Met dit veld kunnen we de bezoeker laten kiezen tussen twee waardes als een soort van aan/uit schakelaar.

formulieren schakelaar keuze veld
De keuzes (in dit voorbeeld “Ja” en “Nee”) als ook het label zijn in te stellen.

Via de stylen is het mogelijk om de schakelaar een eigen kleur te geven en de getoonde lettergrootte in te stellen. De gekozen waardes worden echter niet opgeslagen.

Het veld kan bijvoorbeeld gebruikt worden om secties wel of niet te tonen.

Formulierveld: Schuifknop

Via de schuifknop kunnen we de gebruiker een nummer laten selecteren.

formulieren nummer schuifknop

Het laagste en het hoogste getal is instelbaar, zo ook het aantal decimalen en stappen waarmee het getal verhoogd of verlaagd zal worden.

Via de stylen is het mogelijk om de knop en de lijn een eigen kleur te geven en de getoonde lettergrootte in te stellen. Via “Eigen CSS” is het mogelijk om bijvoorbeeld een “€” teken voor het getal te laten tonen.

Formulierveld: Schaal (Scale)

Met dit veld kan eenvoudig een beoordelingsveld worden aangemaakt welke getoond wordt als een set van Radioknoppen:

Schaalbeoordeling

De nummering is instelbaar van 0 – 20.

Het is verder een vrij eenvoudig veld. Aan de nummers is geen scheidingswaarde toe te kennen om hier een eigen rekenwaarde mee te creëren. Wil je een eigen rekenfactor toevoegen dan dien je de Radio Button te gebruiken.

Formulierveld: Verborgen Veld

Dit veld wordt niet getoond aan de bezoeker en wordt gebruikt om gegevens in op te slaan die we zelf verder willen gebruiken.

Verborgen veld

Toepassingen van dit veld zijn bijvoorbeeld: berekeningen of het samenvoegen van gegevens als aanhef, voor- en achternaam om een brief- of e-mail aanhef te creëren.

Het is raadzaam om het label van het veld een voor jezelf duidelijk herkenbare naam te geven en ook de veldsleutel te benoemen. Daarmee wordt het gebruik van het veld bij andere velden met dynamische waarden of het maken van formulier-acties en weergaven eenvoudiger. Het veld is dan namelijk herkenbaar.

Formulierveld: Sterbeoordeling

De sterbeoordeling kan gebruikt worden om de gebruiker eenvoudig een score te late geven.

Sterbeoordeling

Het aantal te tonen sterren is in te stellen.

De stijl van de sterren is niet instelbaar via de standaard stijlen en dient dan via “Eigen CSS” te worden opgemaakt.

Veldlabel

Via het veldlabel geven we het veld een ‘zichtbare’ naam voor de gebruiker. Veelal geeft het veldlabel al aan wat er in het veld ingevuld dient te worden:

Veldlabel

Het label dient bij voorkeur kort en duidelijk te zijn. Willen we meer uitleg kwijt kunnen we eventueel de veldbeschrijving gebruiken en/of een placeholder plaatsen.

De positie van het label is instelbaar (boven, onder, voor het veld….) en de opmaak van het veldlabel is in te stellen via de Stijlen en is per formulier of zelfs per veld apart op te maken.

Veldomschrijving

De veldomschrijving is een korte tekst welke onder het veld getoond wordt om een korte uitleg te geven wat er verwacht wordt dat er in het veld ingevuld wordt:

Veldomschrijving

De opmaak als lettertype grootte, kleur en de uitlijning is in te stellen via de formulier-stijlen en eventueel per formulier of per veld aan te passen.

Formulierveld: RTF (Rich Text)

Het RTF (Rich Text Field) is eenzelfde veld als de Paragraaf, maar dan met de TinyMCE Tekstbewerker functies:

Rich Text Field

Het is mogelijk om een pagina te maken met een formulier welke gebruikt kan worden om bijvoorbeeld de gebruiker een WordPress-bericht aan te laten maken. Dan wordt dit veld ingezet om het bericht in op te maken.

Formulier Instellingen: Ajax & JavaScript

Via de instellingen van het formulier kunnen we aangeven of er gebruik gemaakt dient te worden van Ajax & JavaScript:

Ajax & JavaScript Instellingen

Bij grotere formulieren is het aanvinken van de eerste optie een aanrader. De formulieren-editor laadt sneller bij het opslaan.

Willen we dat als de gebruiker de verzendknop klikt de pagina niet ververst wordt dan dienen we de tweede optie aan te vinken.

Als de laatste optie is aangevinkt zullen alle velden welke een vaste invoer verlangen (e-mail, datum, tijd, etc.) of verplichte velden direct gecontroleerd worden in plaats van bij het aanklikken van de verzendknop.

CSS Layout Klassen

De “CSS Layout Klassen” worden voornamelijk gebruikt om meerdere velden op één rij (dus naast elkaar) te plaatsen.

Velden op één rij

Velden op één rij

Via de CSS Layout Klassen is het ook mogelijk om bij de meerkeuze-opties de opties in meerdere kolommen te tonen en rekenvelden op te maken.

Lookup Waarde/Veld

Via een lookup kunnen we data uit andere formulieren intergreren in het formulier om bijvoorbeeld een uitklapveld te vullen:

Lookup

In dit voorbeeld hebben we een formulier waarmee alle hondenrassen zijn opgeslagen. Op een ander formulier gebruiken we die opgeslagen rassen dan als uitklapbaar-keuze-veld om de gebruiker zo zijn/haar ras te laten kiezen. Wijzigen we een ras in het rassen-formulier is die wijziging dan ook direct beschikbaar op het formulier waar we de lookup gebruiken.

Placeholder

Een “placeholder” is een vooraf ingevulde waarde in het veld wat we gebruiken:

Placeholder

Placeholders worden meestal gebruikt bij formulieren waar het veldlabel en de veldomschrijving is uitgeschakeld en zo dan aan te geven wat er verwacht wordt dat er in het veld wordt ingevuld.

Dynamische Waarde

Een veld kan gevuld worden met data uit andere velden van het formulier of zelfs uit data van een ander formulier.

Dynamische Waarde

Zo kunnen gegevens uit verschillende velden gekoppeld worden en ingevuld worden in één veld. Hebben we bijvoorbeeld velden waar voornaam en achternaam ingevuld zijn, kunnen we die twee velden samen vormen tot één waarde (voornaam + achternaam) welke dan als briefhoofd of e-mail -aanhef gebruikt kan worden.

Formidable Add-On’s

“Add-On’s” zijn extra toevoegingen of uitbreidingen aan de Formidable-plugin:

Formidable Add-Ons Overzicht

Add-Ons Overzicht

Zo is er een Add-On om gegevens te koppelen aan MailChimp, een Add-On om een login-scherm te maken en ga zo maar verder. De Add-On’s worden als extra plugin(s) geïnstalleerd.

Exporteren

De export-functie kan gebruikt worden om een backup te maken of om een gemaakt formulier te kopiëren naar een andere website:

Exporteren

Hier is het mogelijk om een enkel formulier of meerdere formulieren tegelijk te exporteren. Ook kan de opgeslagen data, aangemaakte weergaven en stijlen van het gekozen formulier mee geëxporteerd worden.

Inzendingen kunnen ook als CSV-bestand geëxporteerd worden om ze dan in Excel te kunnen gebruiken.

Importeren

Hebben we een Formidable XML bestand aangemaakt via de “Exporteer” functie dan kunnen we die weer importeren:

Importeren

Zo kunnen we eenvoudige een eerder gemaakt formulier van de ene website naar de andere kopiëren. Stijlen, inzendingen en overige opties welke via de exporteer-functie meegenomen zijn zullen ook weer ingelezen worden bij het importeren.

Ook is het mogelijk om een CSV-bestand, bijvoorbeeld uit Excel te importeren in een formulier.

Weergaven

“Weergaven” zijn speciale formulieren om ingevulde en opgeslagen gegevens van formulieren te tonen op een pagina of in een bericht.

Contactformulier Weergaven

De data welke ingezonden is via formulieren is dan in een tabel weergave op een pagina te plaatsen. De “Weergaven” zijn geheel naar eigen stijl en wens op te maken en te bouwen.

Stijlen

Alle velden, knoppen, teksten, etc. welke op een formulier getoond worden kunnen visueel aangepast worden via de “Stijlen”:

Formidable Stijlen

Stijlen

Via de stijlen van Formidable is het eenvoudig om de formulier-stijl naar wens aan te passen en zo de kleuren en overige opmaak te kiezen welke aansluit bij het gebruikte thema. Hebben we meerdere formulieren dan is het ook mogelijk om per formulier een stijl-blad aan te maken en die aan het formulier te koppelen.

Globale Instellingen

Via de “Globale Instellingen” kunnen we o.a. de algemene foutmeldingen en een aantal overige berichten instellen, de Pro versie activeren, gebruikersrechten instellen, etc.:

Formidable Globale Instellingen

Instellingen

Hier vindt je ook de optie om de Formidable-plugin te verwijderen en daarmee ook alle opgeslagen formulieren, inzendingen en alles wat de plugin heeft opgeslagen in de WordPress Database.

Inzendingen

De formulier inzendingen worden standaard in de database van WordPress opgeslagen en kunnen worden bekeken via het hoofdmenu van Formidable en dan te kiezen voor “Inzendingen”. De inzendingen van alle formulieren wordt dan getoond:

Formidable Inzendingen Overzicht

Inzendingen Overzicht

Het is hier ook mogelijk om de ingezonden data van ieder gemaakt formulier apart te bekijken. De inzendingen kunnen ook via een zgn. “Weergave” op een in WordPress gemaakte pagina of bericht geplaatst worden en zo aan de bezoeker (gebruiker) getoond worden.

Ook kunnen bepaalde ingevulde velden geplaatst worden in E-mailacties.

Formulierveld: HTML

Het HTML-veld is bedoeld om een stukje met HTML opgemaakte tekst op te nemen in het formulier.

Voorbeeld - Algemene Voorwaarden

HTML Voorbeeld – Algemene Voorwaarden

In het HTML-veld kunnen ook Formidable Shortcodes of Shortcodes van andere geactiveerde plugins opgenomen worden.

Formulierveld: Website

Het website-veld ziet er ook uit als een tekstveld. De invoer wordt gecontroleerd aan de hand van de URL-standaard.

Website-veld

Buiten de zichtbare breedte van het veld en/of het een verplicht veld is kent dit veld verder geen bijzondere instellingen.

Formulierveld: ReCaptcha

reCaptcha wordt ingezet om inzendingen van spam-robots tegen te gaan.

reCaptcha

reCaptcha is een technologie van Google. Om reCaptcha te gebruiken is dan een API-Key van Google nodig welke gratis te verkrijgen is.

Formulierveld: Tijd

Via dit veld is een tijd in te voeren. De tijd (klok) is instelbaar als 12 of 24 uurs als ook het aantal minuten (tijdslot) wat te kiezen is.

Tijden-keuze

Het is ook mogelijk om een enkel tijdsverloop als keuze te laten zien om de keuze voor de gebruiker te vereenvoudigen.

Formulierveld: Datum

Zoals de benaming van het veld al aangeeft is het hier alleen mogelijk om een datum in te voeren. In te stellen is of er een kalender-popup gebruikt kan worden:

Datumveld met kalender-popup

Naast de kalender-optie is het nog mogelijk om een regio (land) te kiezen voor de datum-standaard en vanzelfsprekend of dit een verplicht veld is of niet.

Formulierveld: Telefoon

Het telefoonveld ziet er uit als een normaal tekstveld, met als verschil dat er alleen een voorgedefinieerd nummer in combinatie met karakters als ( ) – + ingevoerd mag worden.

Telefoonveld

Door de vele verschillen in de opmaak van telefoonnummers in Europa wordt dit veld niet vaak toegepast bij openbaar beschikbare formulieren. Hebben we een formulier welke we enkel intern gebruiken en willen we een eenduidige invoer van de telefoonnummers dan is dit veld daarvoor te gebruiken.

Formulierveld: Uitklapbaar (keuzeveld)

Het “Uitklapbaar” keuzeveld is te vergelijken met de “Meerkeuze” en/of “Radio Button”, met als verschil dat de keuzeopties als een uitklap-menu beschikbaar komen:

formulieren uitklapbaar keuze veld

Het aantal opties is in principe onbeperkt aan te maken en zo in te stellen dat meerdere opties te kiezen zijn of alleen één. Een “autocomplete” functie is beschikbaar om het kiezen d.m.v. intypen van de keuze versneld kan worden.

Net als bij de Meerkeuze en de Radio Button zijn er ook “verborgen” waardes aan de keuze-opties mee te geven waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook weer te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Dit veld wordt gebruikt als er veel opties beschikbaar zijn om uit te kiezen.

Formulierveld: Radio Button (keuze)

De Radio Button is een “of of” keuzeveld. De bezoeker kan dus maar één keuze selecteren:

Radio Button

Net als bij de “Meerkeuze” heeft het veld ook de optie “Anders”. Kies de bezoeker daarvoor dan verschijnt er een tekstveld waarin de bezoeker een korte vrij tekst kan invoeren.

De uitlijning van de opties kan zowel op één regel als onder elkaar of in kolommen. Ook kunnen er “verborgen” waardes aan de keuze-opties meegegeven worden waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Het veld is ideaal om de bezoeker een snelle keuze te laten maken.

Formulierveld: Meerkeuze

Het meerkeuze-veld wordt gebruikt om een aantal vaste keuzes te laten zien aan de bezoeker. In tegenstelling tot de “Radio Button” kan de bezoeker kan dan één of meerdere keuzes selecteren:

Meerkeuze

Het veld heeft ook de optie “Anders”. Kies de bezoeker daarvoor dan verschijnt er een tekstveld waarin de bezoeker een korte vrij tekst kan invoeren.

De uitlijning van de opties kan zowel op één regel als onder elkaar of in kolommen. Ook kunnen er “verborgen” waardes aan de keuze-opties meegegeven worden waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Formulierveld: Nummer

Via een nummer-veld kunnen we de bezoeker een getal laten invoeren.

Nummerveld

Het getal kan vrij ingevoerd worden of via een ‘selector’ worden gekozen. Zowel de minimum als de maximum waarde is in te stellen als ook de stap-grootte. Valt het nummer niet binnen de range welke ingesteld is zal een foutmelding getoond worden en wordt de invoer niet goedgekeurd.

De ingevoerde waarde kan eventueel ook gebruikt worden bij andere velden als rekenwaarde om zo, bijvoorbeeld, een offerte of enquête -formulier te maken.

Formulierveld: Tekst

Het tekstveld is het meest gebruikte veld bij formulieren en wordt gebruikt om de bezoeker een vrije tekst op één regel te laten invoeren.

Tekstveld

Het veld heeft standaard geen beperkingen qua invoer en kan wel of niet verplicht gesteld worden. De gegevens welke de bezoeker mag invoeren is wel in te perken via speciale opmaak-codes. Zo is ook de breedte van het veld aan te passen.

Dit veld wordt meestal gebruikt bij contactformulieren voor velden als Voornaam, Achternaam, Woonplaats, Onderwerp, etc.

Formulierveld: E-mailadres

Door middel van het E-mailadres -veld beperken we de invoer tot een geldig e-mailadres:

E-mailadres -veld

Er wordt automatisch gecontroleerd of de invoer een geldig e-mailadres formaat heeft. Is dat niet zo, zal er een foutmelding verschijnen.

Formulierveld: Paragraaf

Het paragraaf-veld is een soort van tekst-veld waarbij de bezoeker de mogelijkheid krijgt om “onbeperkt” aantal tekstregels in te vullen:

Paragraafveld

Het aantal zichtbare regels en de breedte van het veld zijn vrij in te stellen. Ook is het veld verplicht te maken.

Dit veld wordt meestal gebruikt bij contactformulieren om de reden van het inzenden van het formulier te laten beschrijven.

Formuliervelden

Er zijn vele type velden beschikbaar. Het meest gebruikte veld is het tekstveld. Hiermee kan de bezoeker vrije tekst invoeren als bijvoorbeeld voornaam, achternaam, etc.

Ook zijn er speciale velden waarbij de invoer beperkt is. Dat zijn o.a. de velden: datum, tijd, e-mailadres, website, telefoon, etc. Bij ieder veld is kunnen we instellen of het veld “verplicht” is. Wordt een verplicht veld niet ingevuld, kan de bezoeker het formulier niet inzenden of verder gaan met het invullen van overige velden.

Willen we vaste informatie van de bezoeker dan kunnen we die instellen met behulp van de “Meerkeuze”, “Radio Button” of het “Uitklapbaar” -veld.

Het is belangrijk om bij het maken van een formulier van te voren goed na te denken over de hoeveelheid en welke -informatie we van de bezoeker verlangen.

Lange formulieren (een formulier met veel velden) kan de bezoeker afschrikken en dan het formulier niet invullen.

Willen we meer informatie van de bezoeker dan is het raadzaam om gebruik te maken van zgn. conditionele secties om velden pas zichtbaar te maken zodra er al een aantal velden zijn ingevuld, eventueel door middel van de Meerkeuze en/of Radio-Button.

Formulierveld: Bestandsupload

Via dit veld geven we de bezoeker de mogelijkheid om één of meerdere bestanden toe te voegen aan het formulier:

formulier bestandsupload

Bestandsupload-veld

Het aantal bestanden, het bestandstype en de maximale grootte welke geupload mag worden is in te stellen.

Heb je bijvoorbeeld een sollicitatieformulier, dan zou de bezoeker een cv en pasfoto kunnen uploaden.