Formulieren

Hoofdstuk 6 van 13

Een website zonder formulier is een folder: mooi om naar te kijken, maar de bezoeker kan niets terugzeggen. Met een formulier kan een klant een vraag stellen, een taart bestellen of zich inschrijven. In dit hoofdstuk leer je werken met de twee formulierbouwers die op je site staan: het Formulier-widget van Elementor Pro en de plugin Gravity Forms.

Je leert velden toevoegen en instellen, bepalen wat er gebeurt na het verzenden (een mail, een bedankbericht, een doorverwijzing), inzendingen terugvinden en exporteren, en je formulier beschermen tegen spam. Op het einde weet je ook wanneer je welke van de twee kiest.

---

Deel A – Het formulier van Elementor Pro

Elementor Pro heeft een eigen widget Formulier (in het Engels “Form”). Je sleept het op je pagina zoals elke andere widget en stelt alles in via het paneel links. Op de demosite staat zo’n formulier op de pagina Contact. We bekijken het samen van boven tot onder.

A1. Het formulier openen in Elementor

1. Ga naar Pagina’s → Alle pagina’s, ga met je muis over Contact en klik op Bewerk met Elementor.
2. Klik in het canvas (rechts) op het formulier. Het krijgt een kader en links verschijnt het paneel Form bewerken.
3. Bovenaan het paneel staan de drie vaste tabbladen: Inhoud (wat er in het formulier staat en wat het doet), Stijl (hoe het eruitziet) en Geavanceerd (marges, animaties, zichtbaarheid).
4. Onder Form Fields zie je de lijst met velden (1): Naam, E-mail, Telefoon, Onderwerp, Bericht en Privacy. Elk veld is een balkje dat je kan openklikken.

Helemaal bovenaan staat ook Form Name (“Contact”). Die naam ziet de bezoeker niet, maar je vindt hem terug bij de inzendingen. Geef elk formulier dus een duidelijke naam, zeker als je er meerdere hebt (bijvoorbeeld “Contact” en “Inschrijving workshop”).

A2. Een veld instellen

Klik op een veld in de lijst, bijvoorbeeld Naam. Het klapt open en je ziet de instellingen van dat ene veld:

1. Type (1): wat voor veld het is. De belangrijkste: Text (één regel tekst), Email (controleert of er een geldig e-mailadres staat), Textarea (een groot tekstvak voor een bericht), Tel (telefoonnummer), Select (keuzelijst), Radio (één keuze uit een paar rondjes), Checkbox (vinkjes, meerdere keuzes), Acceptance (één vinkje om akkoord te gaan), Number (getal), Date en Time (datum en uur) en File Upload (bestand opladen).
2. Label (2): de titel boven het veld, bv. “Naam”.
3. Placeholder (3): het grijze voorbeeldtekstje ín het veld, bv. “Je naam”. Het verdwijnt zodra de bezoeker begint te typen.
4. Required (4): verplicht veld. Staat dit op Ja, dan kan de bezoeker het formulier niet versturen zonder dit veld in te vullen.
5. Column Width (5): hoe breed het veld is. Met 50% passen er twee velden naast elkaar (zoals Naam en E-mail op de demosite), met 100% neemt het veld de hele breedte.

Klik je op de keuzelijst bij Type, dan zie je alle mogelijke veldsoorten. Naast de types hierboven vind je er ook Password, HTML (een stukje tekst of uitleg tussen de velden), Hidden (een verborgen veld), reCAPTCHA, reCAPTCHA V3 en Honeypot (twee soorten spambeveiliging, zie deel D) en Step (om een lang formulier in stappen te verdelen).

In het veld zie je ook twee kleine tabbladen: Content (wat je hierboven zag) en Advanced. Onder Advanced kan je een standaardwaarde invullen en het ID van het veld zien. Dat ID heb je enkel nodig als je de mail zelf wil opmaken (zie A7).

A3. Een keuzelijst en een privacyvinkje

Sommige types hebben extra instellingen. Klik op het veld Onderwerp:

1. Het type is Select (1): een keuzelijst.
2. Bij Options (2) typ je de keuzes, elk op een aparte regel: Bestelling, Taart op maat, Andere vraag. De eerste regel is de keuze die standaard geselecteerd staat.
3. Met Multiple Selection laat je de bezoeker meer dan één keuze maken. Voor een onderwerp is dat niet zinvol, dus dat blijft uit.

Het laatste veld, Privacy, is van het type Acceptance (1): één vinkje. Bij Acceptance Text (2) staat de zin naast het vinkje (“Ik ga akkoord met de privacyverklaring”). Omdat Required (3) op Ja staat, kan niemand het formulier versturen zonder het vinkje aan te klikken. Laat Checked by Default uit: een vinkje dat al aangevinkt staat, telt volgens de privacywet niet als echte toestemming.

A4. Velden toevoegen, kopiëren, verwijderen en ordenen

1. Met het kopieer-icoontje (1) naast een veld maak je er een kopie van, met dezelfde instellingen. Handig: wil je een tweede tekstveld met dezelfde breedte, kopieer dan een bestaand veld en pas enkel het label aan.
2. Met het kruisje (2) verwijder je een veld.
3. Met + Item toevoegen (3) zet je onderaan een nieuw, leeg veld. Klik het open en kies het type, het label enzovoort.
4. De volgorde pas je aan door een veld met de muis op te nemen en naar boven of beneden te slepen.
5. Onder de velden staan instellingen voor het hele formulier: Input Size (hoe groot alle velden zijn), Label (4) (labels tonen of verbergen) en Required Mark (5) (een sterretje * achter verplichte velden).

A5. De knop

Klik op het kopje Buttons om de instellingen van de verzendknop te openen:

1. Bij Submit (1) staat de tekst op de knop: “Verstuur”.
2. Column Width (2) bepaalt hoe breed de knop is (hier 100%: over de hele breedte).
3. Size (3) bepaalt hoe groot de knop is.

De kopjes Step Buttons (Next, Previous) gebruik je enkel bij een formulier in meerdere stappen. Dat laten we hier buiten beschouwing.

A6. Acties na verzenden: wat gebeurt er met de inzending?

Dit is het belangrijkste onderdeel van het formulier, en het onderdeel dat studenten het vaakst vergeten. Een formulier doet niets met wat een bezoeker invult, tenzij jij zegt wat ermee moet gebeuren. Dat doe je bij Actions After Submit.

1. Klik op het kopje Actions After Submit.
2. Bij Add Action (1) zie je de acties die nu aan staan. Op de demosite zijn dat Collect Submissions (de inzending bewaren in WordPress) en Email (een mail sturen).

3. Klik in het vak (of op het +) om een actie toe te voegen. Je krijgt een lijst: Collect Submissions, Email, Email 2 (een tweede mail, bijvoorbeeld een ontvangstbevestiging naar de bezoeker), Redirect (doorverwijzen naar een andere pagina), en koppelingen met mailingprogramma’s zoals ActiveCampaign, ConvertKit, Mailchimp ….
4. Een actie verwijderen doe je met het kruisje × vóór de naam.
5. Voor elke actie die aan staat, verschijnt verderop in het paneel een eigen kopje met instellingen (Email, Collect Submissions, Redirect …).

A7. De e-mail instellen

Klik op het kopje Email. (Bovenaan staat misschien een reclameblokje voor “Email Deliverability”: dat mag je met het kruisje wegklikken.)

1. To (1): naar wie de mail gaat. Dat is het adres van de eigenaar van de site, bv. de bakkerij. Meerdere adressen scheid je met een komma.
2. Subject (2): het onderwerp van de mail. Maak het herkenbaar, bv. “Nieuw bericht via de website”, zodat de ontvanger meteen weet waar het over gaat.
3. Message (3): de inhoud. Standaard staat er [all-fields]: dat is een code die bij het versturen vervangen wordt door alle ingevulde velden. Meestal laat je dat gewoon staan.

Scrol verder naar beneden:

4. From Email (4): het van-adres, het adres waarvan de mail lijkt te komen. Gebruik hier een adres op het domein van je eigen site (bv. website@jouwdomein.be), nooit het adres van de bezoeker en ook geen Gmail-adres. Anders belandt de mail bijna zeker in de spam.
5. From Name (5): de naam die de ontvanger als afzender ziet, bv. “Bakkerij De Korenaar”.
6. Reply-To (6): naar wie een antwoord gaat als je in je mailprogramma op “Beantwoorden” klikt. Kies hier het veld E-mail van je formulier. Dan antwoord je met één klik rechtstreeks aan de bezoeker.
7. Daaronder vind je nog Cc en Bcc (een kopie naar een extra adres), Meta Data (extra info onderaan de mail, zoals datum en de pagina waarop het formulier stond) en Send As (HTML of platte tekst).

A8. Inzendingen verzamelen

Klik op het kopje Collect Submissions. Hier is weinig in te stellen: de melding (1) zegt dat de inzendingen bewaard worden onder Elementor > Submissions. Bij Metadata kies je of ook het IP-adres en de browser (User Agent) van de bezoeker bewaard worden.

A9. Doorverwijzen naar een bedankpagina

Standaard blijft de bezoeker na het verzenden op dezelfde pagina en verschijnt er een bedankbericht onder het formulier. Wil je de bezoeker liever naar een aparte bedankpagina sturen, voeg dan bij Actions After Submit de actie Redirect toe.

1. Maak eerst een gewone pagina, bv. “Bedankt”, met een vriendelijke tekst en eventueel een knop terug naar de homepagina.
2. Voeg in het formulier de actie Redirect toe (zie A6).
3. Er verschijnt een nieuw kopje Redirect. Vul bij Redirect To (1) het adres van je bedankpagina in, bv. https://s01.ucll.somesites.be/bedankt/.

A10. Het bedankbericht (Aanvullende opties)

1. Klik op het kopje Additional Options.
2. Zet Custom Messages (1) op Ja. Pas dan verschijnen de velden voor je eigen meldingen.
3. Bij Success Message (2) typ je het bericht dat de bezoeker ziet na een geslaagde verzending, bv. “Bedankt! We antwoorden binnen één werkdag.”
4. Daaronder vertaal je ook de foutmeldingen (Form Error, Server Error, …). Die staan standaard in het Engels (“Your submission failed because of an error”). Typ er een Nederlandse zin in, bv. “Er liep iets mis. Probeer het opnieuw of bel ons op 016 12 34 56.”

Bij Form Validation kies je wie de foutmeldingen bij verplichte velden toont: de browser (Browser Default) of Elementor (Custom). Laat dat gerust op Browser Default.

A11. De stijl van het formulier

Klik bovenaan het paneel op het tabblad Stijl. Je ziet vier belangrijke kopjes:

1. Form (1): de ruimte tussen de kolommen (Columns Gap) en tussen de rijen (Rows Gap), en de kleur en het lettertype van de labels.
2. Field (2): de velden zelf (tekstkleur, achtergrond, rand, afgeronde hoeken).
3. Buttons (3): de verzendknop.
4. Messages (4): de kleur van het bedankbericht en de foutmeldingen.

Open Field: hier stel je Text Color, Typografie, Background Color, Border Color, Border Width en Border Radius (afgeronde hoeken) van alle velden tegelijk in.

Open Buttons: positie, uitlijning, typografie, en per toestand (Normal en Hover, als de muis erover gaat) de achtergrond- en tekstkleur, de rand en de binnenmarge (Text Padding).

Klaar met aanpassen? Klik rechtsboven op Publiceren. Zolang je dat niet doet, ziet een bezoeker de oude versie.

A12. Testen en de inzendingen terugvinden

Een formulier is pas klaar als je het zelf getest hebt. Doe dat in een privévenster (of uitgelogd), zodat je de site ziet zoals een bezoeker.

1. Open de pagina met je formulier, vul alle velden in met testgegevens en vink het privacyvakje aan.
2. Klik op de knop. Onder het formulier verschijnt een melding (1).
3. Controleer of de mail toekomt op het adres dat je bij To invulde (kijk ook in de spamfolder), en of de inzending bewaard is (zie hieronder).

De bewaarde inzendingen vind je in het linkermenu onder Elementor → Submissions. Je ziet per inzending het e-mailadres, het formulier, de pagina en de datum. Een groen vinkje bij Actions Status betekent dat alle acties (zoals de mail) gelukt zijn, een rood driehoekje dat er iets misliep. Rechts staat een knop Export All to CSV om alles naar een rekenblad (Excel) te halen. Met de keuzelijsten bovenaan filter je op pagina, formulier of periode.

Klik op een inzending om ze te openen. Links zie je alle ingevulde velden, rechts bij Additional Info het formulier, de pagina en de datum. Onderaan staat het Actions Log: daar lees je per actie of ze gelukt is. Hier meldt de actie Email “Action completed successfully.”: de mail is vertrokken.

---

Deel B – Gravity Forms

Gravity Forms is een aparte plugin die enkel formulieren maakt, en dat heel grondig. Je bouwt het formulier niet in Elementor, maar in een eigen scherm in het WordPress-dashboard (menu Forms). Daarna zet je het op een pagina. We maken samen het formulier “Taart op maat bestellen” voor de bakkerij, met de velden naam, e-mail, telefoon, afhaaldatum, aantal personen, smaak, opmerkingen en een toestemmingsvakje.

B1. De eerste keer: de welkomstwizard

De eerste keer dat je op Forms klikt, start Gravity Forms een korte wizard: Let’s get you set up! De licentiesleutel (stap 1) is al ingevuld, dat zie je aan het vinkje.

1. Kies bij Select a Currency de munt Euro (standaard staat er U.S. Dollar). Dat is pas belangrijk als je later met betalingen werkt, maar zet het meteen goed.
2. Klik telkens op Next tot de wizard klaar is. De vragen over jezelf en je gebruik mag je overslaan.

B2. Een nieuw formulier maken

1. Ga naar Forms → Forms. Je ziet de lijst van je formulieren (2), met per formulier het aantal inzendingen (Entries), het aantal keer dat het bekeken werd (Views) en de Conversion (hoeveel procent van de kijkers het ook verstuurde).
2. Klik op Add New (1).

3. Je krijgt Explore Form Templates: kant-en-klare sjablonen (Simple Contact Form, Advanced Contact Form, Donation Form, …). Een sjabloon is handig om ideeën op te doen, maar om het te leren kies je Blank Form: een leeg formulier.
4. Geef je formulier een duidelijke titel, bijvoorbeeld Taart op maat bestellen, en bevestig. Je komt in de formuliereditor.

B3. De formuliereditor en de velden

De editor bestaat uit twee delen: links het formulier zelf (1), rechts het paneel met velden (2). Bovenaan staan de knoppen Embed, Preview en Save Form (3).

1. In het tabblad Add Fields staan de veldsoorten. Onder Standard Fields: Single Line Text (één regel tekst), Paragraph Text (groot tekstvak), Drop Down (keuzelijst), Number, Checkboxes, Radio Buttons, Hidden, HTML, Section (een tussentitel), Page (een nieuwe stap), Multiple Choice en Image Choice.
2. Sleep een veld naar de plaats in het formulier waar je het wil, of klik erop om het onderaan toe te voegen.
3. Scrol in het paneel naar Advanced Fields. Daar vind je slimmere velden: Name (voornaam + familienaam), Date, Time, Phone, Address, Website, Email, File Upload, CAPTCHA, List, Multi Select, Repeater en Consent (toestemming).

Voor ons taartformulier gebruiken we deze velden:

• Naam: Single Line Text (wil je voor- en familienaam apart, kies dan Name)
• E-mailadres: Email
• Telefoon: Phone
• Afhaaldatum: Date
• Aantal personen: Number
• Smaak: Drop Down
• Opmerkingen: Paragraph Text
• Toestemming: Consent

B4. Een veld instellen

Klik in het formulier op een veld. Rechts springt het paneel naar Field Settings, met bovenaan het soort veld en zijn ID. De instellingen zijn verdeeld in drie inklapbare blokken: General, Appearance en Advanced.

De keuzelijst “Smaak”. Klik op het veld Smaak (een Drop Down). Onder General vul je het Field Label (“Smaak”) en eventueel een Description (uitleg onder het veld) in. Bij Choices klik je op Edit Choices: er schuift een venster open waarin je de keuzes typt (Chocolade, Aardbei, Mokka, Citroen, Vers fruit). Met + en − voeg je een keuze toe of verwijder je er een, met de streepjes links versleep je ze. Onder Rules vink je Required aan om het veld verplicht te maken.

Het getal “Aantal personen”. Bij een Number-veld stel je het Number Format in (kies 9.999,99, de Belgische schrijfwijze met een komma) en een Range: een minimum (Min 4) en maximum (Max 60). Een bezoeker kan dan geen taart voor 2 of voor 500 personen bestellen.

De datum “Afhaaldatum”. Bij een Date-veld kies je bij Date Input Type voor Date Picker (de bezoeker klikt een datum aan in een kalendertje) en bij Date Format voor dd/mm/yyyy, zoals we in België schrijven. In de Description staat een nuttige tip voor de klant: “Bestel minstens twee dagen op voorhand.”

De toestemming. Onderaan staat het Consent-veld Toestemming: een vakje met een tekst ernaast (“Ik ga akkoord dat Bakkerij De Korenaar mijn gegevens gebruikt om deze bestelling te behandelen.”) en een kader met extra uitleg erboven (“Lees meer in onze privacyverklaring.”). Het is verplicht: zonder vinkje kan je niet bestellen. Daaronder zie je de knop Bestelling versturen. Klik op de knop om de tekst ervan te veranderen.

Breedte. In Gravity Forms kan je twee velden naast elkaar zetten door een veld naast een ander te slepen (zoals Aantal personen en Smaak). Zo blijven korte velden compact.

B5. Formulierinstellingen

Klik bovenaan op Settings. Links zie je vier onderdelen: Form Settings, Confirmations, Notifications en Personal Data. In Form Settings, blok Form Basics, staan de titel en de beschrijving van het formulier. In Form Layout kies je onder meer waar de labels staan (Label Placement: boven de velden, of links ervan).

Iets lager staat Required Field Indicator (1): hoe verplichte velden aangeduid worden. Standaard is dat de Engelse tekst “(Required)”. Op de demosite kozen we Asterisk: *, een sterretje. Gravity Forms waarschuwt in het gele kader dat een sterretje niet voor iedereen duidelijk is; kies je toch het sterretje, dan zet Gravity Forms bovenaan het formulier een zin die uitlegt wat het sterretje betekent. Met Custom kan je ook een eigen tekst typen, bv. “(verplicht)”.

Nog lager vind je Restrictions: met Limit number of entries sluit het formulier na een aantal inzendingen (handig voor een workshop met twaalf plaatsen), met Schedule Form is het formulier enkel open tussen twee data, en met Require user to be logged in kunnen enkel ingelogde gebruikers het invullen.

Het blok Spam Detection bespreken we in deel D. Klik onderaan op Save Settings.

B6. Meldingen (Notifications): wie krijgt een mail?

Een Notification is een e-mail die Gravity Forms verstuurt als iemand het formulier invult. Je kan er zoveel maken als je wil. Klik links op Notifications. Ons formulier heeft er twee: een Melding aan de bakkerij en een Bevestiging aan de klant. Met Add New maak je een nieuwe, met een klik op de naam bewerk je er een.

Open Melding aan de bakkerij:

• Name: een naam voor jezelf, de klant ziet die niet.
• Event: wanneer de mail vertrekt. Form is submitted = bij het verzenden.
• Send To: naar wie. Met Enter Email typ je zelf een adres. Hier staat {admin_email}: een samenvoegcode (merge tag) die vervangen wordt door het beheerdersadres van de site (Instellingen → Algemeen). Je mag er ook gewoon een adres typen.
• From Name en From Email: de afzender. Ook hier: een adres op het domein van je eigen site, niet dat van de bezoeker.
• Reply To: {E-mailadres:2} = het e-mailadres dat de klant invulde (veld 2). Zo antwoord je met één klik aan de klant.
• Verder naar onder staan het Subject (hier “Nieuwe taartbestelling van {Naam:1}”) en de Message met {all_fields}, de code die alle ingevulde velden in de mail zet.

Open nu Bevestiging aan de klant. Het verschil zit bij Send To: hier staat Select a Field aan, met bij Send To Field het veld E-mailadres. De mail gaat dus naar het adres dat de klant zelf invulde. In het bericht staat “Dag {Naam:1}, bedankt voor je bestelling! …”, gevolgd door een overzicht van wat de klant doorgaf.

B7. Bevestiging (Confirmation): wat ziet de bezoeker?

De Confirmation is wat de bezoeker op het scherm ziet na het verzenden. Klik links op Confirmations en open Standaardbevestiging.

• Bij Confirmation Type kies je: Text (een bericht op dezelfde plaats als het formulier), Page (doorsturen naar een pagina van je site, bv. een bedankpagina) of Redirect (doorsturen naar een ander webadres).
• Bij Message typ je het bericht. Ook hier werken samenvoegcodes: “Bedankt, {Naam:1}!” wordt “Bedankt, Lotte Peeters!”.
• Klik op Save Confirmation.

B8. Het formulier op een pagina zetten

Een Gravity Forms-formulier staat nog nergens op je site. Je moet het op een pagina zetten. Ga terug naar de editor van het formulier en klik bovenaan op Embed. Je ziet drie mogelijkheden: het toevoegen aan een bestaande pagina (Add to Existing Content), een nieuwe pagina maken (Create New), of, voor wie niet met de blokeditor werkt, Copy Shortcode. Wij bouwen pagina’s met Elementor, dus we gebruiken die laatste.

1. Klik op Copy Shortcode.
2. Maak een nieuwe pagina (Pagina’s → Pagina toevoegen), noem ze “Taart op maat” en klik op Bewerk met Elementor.
3. Zet er een titel en een korte inleiding op (widgets Kop en Teksteditor).
4. Open het widgetpaneel en typ in het zoekveld (1) shortcode. Sleep de widget Shortcode (2) onder je inleiding.

5. Plak de shortcode in het vak Voer je shortcode in (1) en klik op Toepassen. Het formulier verschijnt in het canvas.
6. Klik op het pijltje naast Publiceren om de pagina als concept te bewaren, of publiceer ze als ze klaar is.

In de editor toont Elementor het formulier zonder de opmaak van Gravity Forms. Kijk dus altijd op de voorkant (via het oog-icoon Voorbeeld wijzigingen of na het publiceren) hoe het er echt uitziet.

B9. Testen op de voorkant

Zo ziet het formulier eruit op de voorkant: de beschrijving, een zin die uitlegt wat het sterretje betekent, de velden met hun uitleg en een rode knop in de huisstijl van de bakkerij.

Vul het in en verstuur het. In de plaats van het formulier verschijnt de bevestiging uit B7, met de naam die je invulde.

B10. Inzendingen bekijken (Entries)

Ga naar Forms → Entries (of klik in de editor bovenaan op Entries). Je ziet een tabel met de inzendingen van het formulier, met bovenaan filters: All, Unread (nog niet gelezen), Starred (met een ster gemarkeerd), Spam en Trash. Met het zoekvak zoek je in de velden. Met het tandwieltje rechts kies je welke kolommen je ziet.

Klik op een naam om de inzending te openen. Je ziet alle antwoorden onder elkaar. Rechts staat het blok Entry (wanneer en vanaf welke pagina het formulier verstuurd werd), met de links Move to Trash, Mark as Spam en de knop Edit. In het blok Notifications kan je een melding opnieuw versturen (Resend), handig als een klant zegt dat hij zijn bevestiging niet kreeg. Met Print entry druk je de bestelling af, bv. voor in het bakatelier.

Scrol je in een inzending naar beneden, dan vind je het blok Notes. Gravity Forms noteert daar per melding of ze verstuurd is: “WordPress successfully passed the notification email to the sending server” (1) betekent dat de mail vertrokken is, hier zowel de melding aan de bakkerij als de bevestiging aan de klant. Lukt het versturen niet, dan staat hier een rode foutmelding. Je kan in dit blok ook zelf een notitie toevoegen (Add Note), bv. “klant gebeld, taart bevestigd”.

B11. Inzendingen exporteren

1. Ga naar Forms → Import/Export. Je komt op Export Entries.
2. Kies bij Select a Form je formulier.
3. Vink bij Select Fields de velden aan die je wil (Select All voor alles). Je kan ook extra gegevens meenemen, zoals Entry Date (de datum van de inzending).
4. Kies eventueel een periode en klik onderaan op de downloadknop. Je krijgt een CSV-bestand dat je in Excel, Numbers of Google Sheets opent.

Links zie je ook Export Forms en Import Forms. Daarmee exporteer je het formulier zelf (de velden en instellingen, niet de inzendingen) en importeer je het op een andere site. Zo hoef je een goed formulier nooit twee keer te bouwen.

---

Deel C – Elementor-formulier of Gravity Forms: wanneer kies je wat?

Beide doen hun werk goed. De vuistregel: eenvoudig en in de stijl van je pagina → Elementor. Uitgebreid, slim of veel inzendingen → Gravity Forms.

Kies het Elementor-formulier als …

• je een eenvoudig contact- of inschrijfformulier wil (naam, e-mail, bericht);
• je het formulier visueel wil ontwerpen, rechtstreeks op je pagina, met je globale kleuren en lettertypes;
• het formulier in een popup moet (bv. “Schrijf je in voor de nieuwsbrief”);
• één mail naar de eigenaar en eventueel één bevestiging (Email 2) volstaan.

Kies Gravity Forms als …

• je formulier lang of ingewikkeld is: bestellingen, inschrijvingen met veel keuzes, een formulier in meerdere stappen;
• je slimme velden nodig hebt: een datum met kalendertje, een getal met een minimum en maximum, een adres, een lijst die de bezoeker zelf aanvult;
• je voorwaardelijke logica wil: een veld of melding dat enkel verschijnt bij een bepaald antwoord;
• je meerdere meldingen wil, met routing naar verschillende mensen;
• je inzendingen grondig wil beheren: zoeken, markeren, afdrukken, meldingen opnieuw versturen, exporteren;
• je een maximum aantal inschrijvingen of een openingsperiode nodig hebt;
• je hetzelfde formulier op meerdere pagina’s of sites wil gebruiken (één formulier, overal dezelfde inzendingen; export/import naar een andere site).

---

Deel D – Spam en privacy

Zodra je formulier online staat, komen er robots langs die het automatisch invullen met reclame of erger. Zonder bescherming krijg je al snel tientallen spamberichten per dag. Er zijn twee soorten bescherming:

• Een honeypot (“honingpot”): een onzichtbaar veld dat een mens niet ziet en dus leeg laat, maar dat een robot wel invult. Is het ingevuld, dan is het spam. Werkt volledig onzichtbaar, zonder hinder voor de bezoeker en zonder cookies. Zet dit altijd aan.
• reCAPTCHA van Google: een controle “Ik ben geen robot”. Versie 2 toont een vinkje (soms met een puzzel met foto’s), versie 3 werkt onzichtbaar en geeft elke bezoeker een score. Sterker dan een honeypot, maar je hebt sleutels van Google nodig (aan te vragen op google.com/recaptcha), en Google plaatst cookies: dat moet in je cookiebanner vermeld worden.

D1. Spam weren in het Elementor-formulier

Voeg in je Elementor-formulier een veld toe (+ Item toevoegen) en kies als Type (1) Honeypot. Meer hoef je niet in te stellen: op de voorkant is het veld onzichtbaar. Het contactformulier van de demosite heeft zo’n veld.

Wil je reCAPTCHA gebruiken, vul dan eerst je sleutels van Google in onder Elementor → Instellingen, tabblad Integraties, bij reCAPTCHA of reCAPTCHA V3 (Site Key en Secret Key). Daarna voeg je in het formulier een veld van het type reCAPTCHA of reCAPTCHA V3 toe.

D2. Spam weren in Gravity Forms

Ga naar Settings → Form Settings van je formulier, blok Spam Detection:

1. Zet Detect spam using the Advanced Honeypot (1) aan. Daaronder kies je wat er gebeurt met een verdachte inzending; laat Create an entry and mark it as spam staan, dan kan je ze nog nakijken in de map Spam.
2. Met Submission Speed Check (2) wordt een formulier dat sneller verstuurd wordt dan een mens kan typen, als spam gemarkeerd. Een extra laag, die je kan aanzetten als er toch spam doorkomt.
3. Klik op Save Settings.

Voor reCAPTCHA in Gravity Forms ga je naar Forms → Settings → reCAPTCHA. Gravity Forms meldt daar dat de ingebouwde reCAPTCHA verdwijnt en dat je de aparte reCAPTCHA Add-On moet installeren (knop Install and activate the Gravity Forms reCAPTCHA Add-On). Daarna voeg je in je formulier het veld CAPTCHA toe (Advanced Fields). Voor de meeste kleine sites volstaat de honeypot.

D3. Privacy: de toestemmingscheckbox

Een formulier verzamelt persoonsgegevens. Volgens de privacywet (GDPR of AVG) moet de bezoeker weten wat je met zijn gegevens doet. Daarom:

• Zet onder elk formulier een toestemmingsvakje: in Elementor het type Acceptance, in Gravity Forms het veld Consent. Maak het verplicht en laat het niet vooraf aangevinkt.
• Zeg in de tekst waarvoor je de gegevens gebruikt (“om je vraag te beantwoorden”, “om je bestelling te behandelen”) en link naar je privacyverklaring.
• De privacyverklaring zelf (en de cookieverklaring) maak je met Complianz, zie het hoofdstuk over Complianz. Gebruik je reCAPTCHA, dan hoort Google daar ook in vermeld te staan.
• Vraag niet meer dan nodig, en bewaar niet langer dan nodig. In Gravity Forms vind je onder Settings → Personal Data van je formulier instellingen om bv. geen IP-adressen op te slaan en oude inzendingen automatisch te laten verwijderen.

---

Veelgestelde vragen

Ik krijg geen mail als iemand mijn formulier invult. Wat nu?

Kijk eerst of de inzending bewaard is (Elementor → Submissions, of Forms → Entries). Is ze er, dan werkt het formulier en ligt het aan de mail. Controleer het adres bij To / Send To op typfouten en kijk in je spamfolder. Bij Elementor zie je in het Actions Log van de inzending of de mail verstuurd werd, bij Gravity Forms in het blok Notes onderaan de inzending. Lukt het nog niet, meld het dan aan je lesgever.

Mijn bedankbericht staat in het Engels, hoewel ik een Nederlandse tekst typte.

In Elementor moet Custom Messages (Additional Options) aan staan, anders worden je eigen teksten genegeerd (A10).

Ik zie mijn Gravity Forms-formulier niet op de site.

Een Gravity Forms-formulier staat pas op je site als je het met de shortcode op een pagina zet (B8), en die pagina gepubliceerd is. Controleer ook het ID in de shortcode: is het het juiste formulier?

Er staan nog Engelse woorden in mijn Gravity Forms-formulier (“indicates required fields”, “Please enter a number from …”).

Gravity Forms is op de cursussites niet volledig vertaald. Zinnen die je zelf typt (labels, beschrijvingen, knoppen, bevestigingen) kan je altijd in het Nederlands zetten. Voor het sterretje kan je bij Required Field Indicator ook Custom kiezen met een eigen tekst, zoals “(verplicht)”.

Samengevat

• Kies voor elk veld het juiste type, maak enkel noodzakelijke velden verplicht en houd je formulier kort.
• Een formulier doet niets zonder acties (Elementor) of meldingen (Gravity Forms). Zet altijd een mail én het bewaren van inzendingen aan.
• Van-adres = je eigen domein, antwoorden-aan = het e-mailadres van de bezoeker.
• Zorg voor een duidelijk Nederlands bedankbericht (Elementor: Custom Messages aan; Gravity Forms: Confirmation).
• Een Gravity Forms-formulier zet je met de widget Shortcode op een Elementor-pagina.
• Eenvoudig en visueel: Elementor. Uitgebreid, slim, veel inzendingen: Gravity Forms.
• Altijd een honeypot tegen spam, altijd een verplicht (niet vooraf aangevinkt) toestemmingsvakje met een link naar je privacyverklaring.
• Test elk formulier zelf, als bezoeker, voor je het de wereld in stuurt.

Alle hoofdstukken