In 2021 is het belangrijker dan ooit om in contact te blijven met je doelgroep. Een e-maillijst, of mailinglist, is hierbij een cruciaal hulpmiddel. Door een e-maillijst op te stellen met een dienst als MailChimp kan je je content namelijk direct aan je abonnees aanbieden.

Nieuwsbrieven zijn natuurlijk goed, maar wat als een lezer of potentiële klant rechtstreeks met je in contact wil komen? Dan heb je een contactformulier nodig! In dit artikel zullen we het hebben over het configureren van de populaire Contact Form 7 plugin voor je WordPress website.

Zo installeer je Contact Form 7

Contact Form 7 bestaat al sinds 2009 en heeft inmiddels alweer zo’n 5 miljoen downloads in het afgelopen decennium weten te verzamelen. Contact Form 7 kan je direct vanuit de WordPress pluginbibliotheek installeren. Als je zoekt op “Contact Form 7”, krijg je meteen de plugin te zien, naast enkele bijbehorende add-ons.

Installeer de Contact Form 7 plugin direct vanuit de WordPress plugin repository.

Installeer de Contact Form 7 plugin direct vanuit de WordPress plugin repository.

Nadat de plugin is geïnstalleerd, zul je een menu-item “Contact” zien in de zijbalk van je WordPress dashboard. Hier kan je alle instellingen van Contact Form 7 inzien en eventueel wijzigen.

Instellingen van Contact Form 7 aanpassen.

Instellingen van Contact Form 7 aanpassen.

De voordelen en nadelen van een contactformulier

Voordat we gaan kijken hoe je Contact Form 7 op de juiste manier instelt op jouw WordPress website, moeten we eerst weten wat de voor- en nadelen van een contactformulier op je website kunnen zijn.

Voordelen van een contactformulier

  1. Een contactformulier maakt het mogelijk dat lezers, klanten en fans direct contact met je opnemen. Afhankelijk van het doel van je WordPress website is het erg belangrijk dat je bezoekers rechtstreeks met jou kunnen communiceren. Zo zou het ontbreken van een contactformulier op bijvoorbeeld een webshop je bedrijf geld kunnen kosten omdat geïnteresseerde bezoekers geen contact met je kunnen leggen voor vragen over je product.
  2. Een contactformulier maakt je WordPress website en je bedrijf betrouwbaarder. Veel mensen zien de aanwezigheid van een contactformulier als een indicatie van betrouwbaarheid. Het idee dat ze contact met jou, de sitebeheerder, kunnen opnemen, maakt je content geloofwaardiger.

Nadelen van een contactformulier

  1. Spam kan zeker een probleem vormen bij openbare formulieren, zoals formulieren voor reacties en contactformulieren. Gelukkig kun je bij Contact Form 7 veel spam wegfilteren met reCAPTCHA. Je kan zelfs een Cloudflare paginaregel aanmaken om je nog verder te beschermen. We zullen het instellen van een spamfilter in Contact Form 7 later in dit artikel verder bespreken.
  2. Na het toevoegen van een contactformulier aan je website, zul je waarschijnlijk tijd kwijt zijn aan het reageren op binnenkomende berichten. Of dat goed of slecht is, hangt af van hoe je hier tegenaan kijkt. Sommige mensen vinden het beantwoorden van mails verschrikkelijk en tijdverspilling, terwijl anderen ervan genieten. In onze ervaring wegen de voordelen van relaties die voortkomen uit een contactformulier meestal ruim op tegen de nadelen van het modereren ervan, dus wij raden je zeker aan om een contactformulier op te nemen in je site.

Een overzicht van de instellingen van Contact Form 7

Het maken van een contactformulier via Contact Form 7 is gelukkig supersimpel. Om te beginnen klik je op Contact > Contact Forms binnen je WordPress zijbalk. Op deze pagina kan je al je contactformulieren zien, samen met de bijbehorende metadata.

Contactformulier in Contact Form 7

Contactformulier in Contact Form 7

Wanneer Contact Form 7 voor het eerst wordt geïnstalleerd, maakt het een voorbeeldformulier aan. Voordat we bekijken hoe je een eigen contactformulier maakt, kijken we eerst naar dit voorbeeldformulier zodat we een idee krijgen van hoe Contact Form 7 werkt. Klik op Contact Form 1 om de instellingen van het formulier te bekijken.

Configureer je WordPress contactformulier.

Configureer je WordPress contactformulier.

De pagina “Edit Contact Form” is onderverdeeld in 4 delen.

  1. Form – Pas hier de HTML template voor het contactformulier aan met allerlei mogelijke velden zoals “text”, “email”, “checkboxes”, etc. Je kan ook je eigen HTML invoeren in de customization box.
  2. Mail – Verander hier de e-mailtemplate en de instellingen voor e-mailnotificaties.
  3. Messages – Verander hier de berichten die na bepaalde acties worden getoond. Zo kan je bijvoorbeeld je eigen bericht laten zien nadat iemand een contactformulier opstuurt.
  4. Additional Settings – Voeg hier code toe om extra features in te schakelen, zullen een subscribers-only modus, demo-modus, en e-mailskipping.

Laten we nu elk deel beter bekijken en ons eigen contactformulier maken.

Zoals het bekende spreekwoord zegt: beter een goede klant dan een verre vriend... of zoiets 😉
Blijf verbonden met je bezoekers dankzij deze populaire plugin 👇
Click to Tweet

Zo maak je een WordPress contactformulier

Om een nieuw contactformulier te maken, klik je op Add New, naast “Contact Forms”.

Het maken van een nieuw contactformulier met Contact Form 7.

Het maken van een nieuw contactformulier met Contact Form 7.

Geef het nieuwe contactformulier een logische naam, en klik op “Save”.

Opslaan van je nieuwe WordPress contactformulier.

Opslaan van je nieuwe WordPress contactformulier.

In het deel “Form”, kan je eventueel HTML toevoegen voor je contactformulier. Je kan diverse voorgeprogrammeerde knoppen gebruiken om snel shortcodes te maken voor veelgebruikte form tags. Om het nog makkelijker te maken kan je de omschrijvingen voor alle tags in Contact Form 7 hieronder bekijken.

Nu is het tijd om een contactformulier aan te gaan passen. Voor de volledigheid zullen we een contactformulier maken dat alle voorgeprogrammeerde form tags in Contact Form 7 gebruikt.

De “text” form tag

Wanneer je op een ingebouwde form tag in Contact Form 7 klikt, zul je een pop-up menu zien, zoals hieronder. In dit menu kan je de instellingen van de form tag aanpassen. Onderaan zie je een shortcode die je in de template van je contactformulier kan invoegen.

Een “text” form tag in Contact Form 7.

Een “text” form tag in Contact Form 7.

Voor de “text” form tag gebruiken we de instellingen hieronder om een inputveld voor een naam te maken.

Deze instellingen genereren de shortcode hieronder.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Voor dit voorbeeld kan je gewoon op de Insert Tag knop klikken om de form tag toe te voegen aan het contactformulier. We zullen later meer HTML tags toe voegen om het formulier beter te organiseren.

De “email” form tag

Vervolgens zullen we een e-mail form tag maken waarmee ons contactformulier e-mailadressen kan verzamelen.

Een “email” form tag in Contact Form 7.

Een “email” form tag in Contact Form 7.

Voor de “email” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[email* email-632 id:email class:email placeholder "Your Email"]

De “URL” form tag

In sommige gevallen wil je een veld op je contactformulier hebben waarmee je websites kan opvragen. Alhoewel je technisch gezien een normale “text” form tag zou kunnen gebruiken binnen Contact Form 7, raden we je aan om de “URL” form tag te gebruiken. De “URL” form tag creëert namelijk een inputveld dat URL’s controleert, zodat ze het juiste format hebben.

Een “URL” form tag in Contact Form 7.

Een “URL” form tag in Contact Form 7.

Voor de “url” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

De “tel” form tag

Net als bij URL’s, kan je een gewone “text” form tag gebruiken voor telefoonnummers. Maar als je de “tel” form tag gebruikt worden ze meteen gecontroleerd, wel zo handig.

Een “tel” form tag in Contact Form 7.

Een “tel” form tag in Contact Form 7.

Voor de “tel” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

De “date” form tag

De “date” form tag van Contact Form 7 maakt het mogelijk een datumkiezer te maken. Dit “date” veld is vooral handig voor het maken van afspraken via een contactformulier.

Een “date” form tag in Contact Form 7.

Een “date” form tag in Contact Form 7.

Voor de “date” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

De “textarea” form tag

De “textarea” form tag maakt het mogelijk een tekstveld van meerdere regels te maken, waarmee gebruikers langere berichten kunnen sturen. Dit gebruik je meestal voor het daadwerkelijke bericht binnen een contactformulier.

Een “textarea” form tag in Contact Form 7.

Een “textarea” form tag in Contact Form 7.

Voor de “textarea” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

De “drop-down menu” form tag

De “drop-down menu” form tag van Contact Form 7 maakt een dropdown-menu aan met meerdere keuzes. Dropdowns zijn handig wanneer je wil dat een bezoeker een specifieke optie kiest binnen je formulier. Als je bijvoorbeeld een bedrijf voor WordPress onderhoud hebt, kan je een dropdown-menu maken om een bezoeker te laten kiezen tussen de diensten die je aanbiedt.

Een “drop-down menu” form tag in Contact Form 7.

Een “drop-down menu” form tag in Contact Form 7.

Voor de “drop-down menu” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

De “checkbox” form tag

De “checkbox” form tag maakt het mogelijk om HTML selectievakjes aan te maken. Net als bij dropdown-menu’s kunnen selectievakjes gebruikt worden om keuzes te maken binnen vooraf gedefinieerde mogelijkheden. Afhankelijk van het soort contactformulier kunnen selectievakjes handiger zijn dan dropdown-menu’s. Als je bijvoorbeeld maar een klein aantal mogelijkheden hebt om uit te kiezen, zorgt het ervoor dat de gebruiker minder hoeft te klikken. Heeft je contactformulier juist veel opties, dan neemt een drop-down menu weer minder verticale ruimte in.

Een “checkbox” form tag in Contact Form 7.

Een “checkbox” form tag in Contact Form 7.

Voor de “checkbox” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

De “radio buttons” form tag

De “radio buttons” form tag maakt het mogelijk om keuzerondjes te maken. Anders dan bij selectievakjes en dropdown-menu’s staan keuzerondjes maar één keuze toe.

Een “radio buttons” form tag in Contact Form 7.

Een “radio buttons” form tag in Contact Form 7.

Voor de “radio buttons” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

De “acceptance” form tag

De “acceptance” form tag in Contact Form 7 kan gebruikt worden voor het maken van een enkel selectievakje, voor het akkoord gaan met de algemene voorwaarden. Met de instellingen van de “acceptance” form tag kan je een bericht weer laten geven.

Een “acceptance” form tag in Contact Form 7.

Een “acceptance” form tag in Contact Form 7.

Voor de “acceptance” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

De “quiz” form tag

De “quiz” form tag kan gebruikt worden om eenvoudige quizzen te maken binnen je contactformulier. Om een quizvraag te maak gebruik je het volgende format om de vraag en het antwoord te scheiden – Vraag|Antwoord. In het screenshot hieronder is onze vraag “What year was WordPress released?”, en het antwoord (gescheiden via een “| ” teken) is 2003.

Een “quiz” form tag in Contact Form 7.

Een “quiz” form tag in Contact Form 7.

Voor de “quiz” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

De “file” form tag

De “file” form tag maakt het mogelijk om bestanden te uploaden binnen een contactformulier. Dit is bijvoorbeeld handig wanneer een bezoeker een afbeelding of PDF bestand mee moet kunnen sturen met het formulier. Als je bijvoorbeeld een fotografieblog hebt met gastblogs, dan kan je bestanden laten uploaden voor de afbeeldingen van gasten.

Binnen de instellingen van deze form tag kan je een aantal mogelijkheden gebruiken voor het beveiligen van je formulier. We raden je aan om altijd een maximale bestandsgrootte in te stellen, zodat kwaadwillenden nooit enorme bestanden kunnen uploaden. Op dezelfde manier helpt het specificeren van “acceptable file types” om alleen betrouwbare bestandstypen te accepteren. Met het fotografieblog in het achterhoofd, zou je bijvoorbeeld de grootte op 1MB (1024 KB) kunnen zetten en alleen afbeeldingstypen te accepteren, zoals JPG en PNG.

Een “file” form tag in Contact Form 7.

Een “file” form tag in Contact Form 7.

Voor de “file” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

De “submit” form tag

Als laatste is er de “submit” form tag in Contact Form 7. Zoals je misschien al had geraden, kun je hiermee een verzendknop toevoegen aan je contactformulier.

Een “submit” form tag in Contact Form 7.

Een “submit” form tag in Contact Form 7.

Voor de “submit” form tag hebben we onderstaande instellingen gekozen.

Deze instellingen genereren de shortcode hieronder.

[submit id:cf7-submit class:cf7-submit "Submit"]

Zo organiseer je een contactformulier met form tags

Nu we alle form tags hebben aangemaakt, kunnen we het contactformulier aanmaken. De instellingen van je contactformulier zouden er nu uit moeten zien als op onderstaande screenshot. Let vooral op alle form tags die we hierboven hebben gemaakt. Met de form tags kan je de [contact-form-7] shortcode gebruiken om het formulier in te voegen in een WordPress artikel of pagina.

Toevoegen van een contactformulier met de contact-form-7 shortcode.

Toevoegen van een contactformulier met de contact-form-7 shortcode.

In de WordPress editor voeg je de shortcode toe aan een leeg block.

Voeg de Contact Form 7 shortcode toe aan een artikel of pagina.

Voeg de Contact Form 7 shortcode toe aan een artikel of pagina.

Gebruik je de WordPress Classic Editor, dan kan je de shortcode overal in de contenteditor plakken.

Gebruik Contact Form 7 met de WordPress Classic Editor.

Gebruik Contact Form 7 met de WordPress Classic Editor.

Je zou nu je contactformulier moeten kunnen zien op de pagina waar je de Contact Form 7 shortcode hebt toegevoegd. Zo ziet ons contactformulier met bovenstaande instellingen eruit. Zoals je kan zien zet Contact Form 7 automatisch de form tags om naar geldige HTML die vervolgens wordt weergegeven volgens de standaard CSS style van je WordPress thema.

Een contactformulier gemaakt met Contact Form 7.

Een contactformulier gemaakt met Contact Form 7.

Ons contactformulier is een goed beginpunt, maar er ontbreekt nog een belangrijke functie. Form tags zoals “text”, “email” en “URL” ondersteunen placeholders, maar elementen zoals “checkboxes” en “radio buttons” doen dat niet. Zonder goede labels zullen de selectievakjes en keuzerondjes dus niet erg nuttig zijn voor de gebruiker, omdat ze er geen context bij krijgen. Gelukkig is het toevoegen van labels in Contact Form 7 erg simpel.

Zo voeg je form tag labels toe in Contact Form 7

Er zijn twee manieren om labels toe te voegen in Contact Form 7 form tags. Voor onderstaande form tags, kan je de form tag simpelweg in een tag plaatsen.

Laten we eens naar de “text” form tag hieronder kijken.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Om een label toe te voegen aan deze form tag, vervangen we de form tag met het stukje code hieronder. Merk hierbij op dat er een extra “Your name” is toegevoegd, direct na de openingstag <label>.

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

Zo ziet het contactformulier er nu uit. In dit geval dient het nieuwe label dezelfde functie als de oude placeholder. Maar als we de placeholder niet zouden willen specificeren binnen de form tag, dan helpt een label bij het identificeren van het doel van een bepaald veld.

Moe van langzame hosting? Kinsta is gebouwd met snelheid en performance in het achterhoofd. Bekijk onze plannen

Toevoegen van een label aan een form tag in Contact Form 7.

Toevoegen van een label aan een form tag in Contact Form 7.

Voor form tags die meerdere items weergeven, zoals selectievakjes, keuzerondjes en dropdown menu’s, resulteer het plaatsen van de form tag binnen een </label> tag in een foutmelding. Dit komt doordat de <label> tag alleen te gebruiken is met een enkel form item. Maar selectievakjes, keuzerondjes en dropdown-menu’s bieden per definitie meerdere items, dus werken ze niet met deze standaard labels.

Voor selectievakjes, keuzerondjes en dropdown menu’s kun je een use_label_element parameter toevoegen binnen de shortcode. Kijk maar eens naar het voorbeeld van een checkbox form tag hieronder met de use_label_element vetgedrukt.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Nadat de use_label_element parameter is toegevoegd, kan je een label direct boven de form tag toevoegen binnen de contactformulier editor.

Toevoegen van een label aan selectievakjes, keuzerondjes en dropdown-menu's in Contact Form 7.

Toevoegen van een label aan selectievakjes, keuzerondjes en dropdown-menu’s in Contact Form 7.

Voor de volledigheid hebben we labels toegevoegd aan al onze form tags binnen dit contactformulier. Meestal zul je dit bij een normale use case niet doen omdat veel form tags al placeholders hebben. Desalniettemin wilden we laten zien hoe de labels werken.

Zo ziet ons uiteindelijke contactformulier eruit:

Een contactformulier met labels.

Een contactformulier met labels.

Configureren van de e-mailinstellingen in Contact Form 7

Nu we ons contactformulier hebben georganiseerd, kunnen we kijken naar de instellingen voor e-mail binnen Contact Form 7. Alhoewel de standaardinstellingen voor het bezorgen van mail prima werken voor de meeste sites, is het belangrijk om de diverse instellingen te begrijpen, voor het geval jouw site speciale instellingen nodig heeft.

Om de instellingen voor e-mail te openen, ga je naar de contactformuliereditor en open je het tabblad “Mail”.

Instellingen voor bezorging van mail in Contact Form 7.

Instellingen voor bezorging van mail in Contact Form 7.

De e-mail instellingen bij Contact Form 7 maken het mogelijk om templates en parameters aan te passen die gebruikt worden bij het maken en versturen van meldingen naar jou, wanneer iemand een formulier opstuurt. Als je de verkeerde instellingen gebruikt, is het mogelijk dat je geen melding krijgt van ingestuurde formulieren. Het is daarom belangrijk om de bezorging te controleren nadat je een contactformulier hebt gemaakt of instellingen hebt gewijzigd.

Contact Form 7 maakt het mogelijk instellingen voor mailbezorging aan te passen.

Laten we nu elke instelling nader bekijken om beter te begrijpen wat voor effect te hebben op de meldingen van Contact Form 7.

Het “To” veld

Zorg ervoor dat je een echt e-mailadres opneemt in “To”, Standaard zal Contact Form 7 het e-mail adres toewijzen dat bij je WordPress gebruikersprofiel hoort. Is je WordPress e-mailadres niet geldig, zorg dan dat je het verandert in je profiel en verander ook het mailadres in Contact Form 7.

Het “From” veld

De instelling “From” moet het volgende format volgen – Your Name. Voor ons contactformulier gebruiken we kinstalife <[email protected]>.

Standaard zal Contact Form 7 dit veld vullen met [email protected]. Let erop dat dit e-mailadres ook geldig is, aangezien sommige WordPress hosts uitgaande mail naar ongeldige adressen blokkeren. Er zijn verschillende manier om dit mailadres geldig te maken. Je kan een speciaal account aanmaken voor [email protected] of je kan een catch-all functie van je e-maildienst inschakelen. Kan je dit mailadres niet juist instellen, dan raden we je aan om het naar een ander geld e-mailadres te veranderen om problemen met de bezorging te voorkomen.

Het “Subject” veld

De instelling “Subject” kan gebruikt worden om een speciaal onderwerp mee te geven aan de notificatiemails. Standaard stelt Contact Form 7 het onderwerp in als Site Name "[your-subject]" – het onderwerp in het standaardformulier van Contact Form 7.

Heb je geen form tag met “[your-subject]” in je formulier, verander het dan naar iets anders. Als je bijvoorbeeld alleen een form tag hebt om de naam van je bezoeker vast te leggen (bijv [ your-name] ) dan kan je het onderwerp veranderen naar You’ve Received a Message from [your-name].

Het veld “Additional headers”

Onder “Additional headers” kan je e-mailheaders meegeven, zoals reply-to, CC, en BCC. Standaard voegt Contact Form 7 de volgende header toe – Reply-To: [your-email]. Deze header maakt het mogelijk om te antwoorden naar het e-mailadres dat opgegeven is in een verstuurd contactformulier.

De standaard reply-to header is prima als je de standaard email form tag van Contact Form 7 gebruikt. Zo niet, verander het dan zodat het overeenkomt met de naam van je email form tag. Bij ons contactformulier heet de email form tag “email-632”, dus de reply-to form tag moet veranderd worden naar Reply-To: [email-632].

De “Message body”

Vervolgens komt de “Message body”, die de daadwerkelijke content van de meldingsmail bepaalt. Het standaardformat van Contact Form 7 gebruikt [your-name], [your-email], [your-subject], en [your-message] form tags, en ziet er zo uit:

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)

Zorg ervoor dat je deze form tags verandert als je ze niet in je template gebruikt. Aangezien het contactformulier dat we gemaakt hebben een hoop informatie verzamelt, kunnen we zo de hoofdtekst van het bericht instellen met extra form tags:

Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Het aanpassen van de meldingen van Contact Form 7.

Het aanpassen van de meldingen van Contact Form 7.

Contact Form 7 e-mail instellingen – bijlagen

Als er een bestand kan worden toegevoegd in je contactformulier, dan kan je dit bestand opnemen in de melding. Bij ons contactformulier hebben we een bestandsupload form tag met de naam “[file-658]”. Daardoor kunnen we deze form tag toevoegen onder “File attachments” zodat het bestand wordt toegevoegd bij de melding.

Neem bestandsbijlagen op in de meldingen van Contact Form 7.

Neem bestandsbijlagen op in de meldingen van Contact Form 7.

Problemen met de bezorging van mails van Contact Form 7

Wanneer Contact Form 7 geen e-mails verstuurt, zijn er een paar dingen die je kan controleren voordat je contact zoekt met een WordPress developer voor hulp.

  1. Controleer of de server wel andere mails verstuurt. Om dit te testen kan je een andere mail triggeren, door een testreactie op een blogartikel te schrijven of een verzoek voor een wachtwoordreset te sturen vanaf je WordPress inlogpagina. Als je dan wel een e-mail krijgt, dan ligt het probleem waarschijnlijk aan de instellingen van Contact Form 7. Krijg je helemaal geen mails, neem dan contact op met de ondersteuning van je host en laat ze weten dat je een probleem hebt met de bezorging van mails.
  2. Zorg ervoor dat de velden “To” en “From” in de instellingen van je contactformulier goed ingesteld zijn. Om Contact Form 7 goed te laten werken moeten deze velden allebei geldige mailadressen bevatten.

Contact Form 7 bevestigingen

Contact Form 7 maakt het mogelijk om de bevestiging van de verzending van een formulier aan te passen. Deze bevestigingen worden getoond wanneer aan een bepaalde voorwaarde wordt voldaan. Als een bezoeker bijvoorbeeld vergeet om een vereist veld in te vullen zal Contact Form 7 een melding “The field is required” weergeven. In de meeste gevallen zijn de standaardmeldingen prima. Maar als je deze berichten toch wil aanpassen kan je dat doen via het tabblad “Messages” in de contactformulier editor.

Customize de meldingen van Contact Form 7.

Customize de meldingen van Contact Form 7.

Zo beveilig je je contactformulier

Naarmate bots steeds slimmer worden en meer voorkomen, is spam een steeds groter probleem geworden bij contactformulieren. Doordat contactformulieren meestal openlijk toegankelijk zijn op het openbare internet, is het vrij eenvoudig voor webscrapers om deze te detecteren en vervolgens vrolijk spamberichten naar je mailbox te versturen. Gelukkig zijn er een aantal manieren om spammers te weren en je contactformulier te beschermen.

Beveilig je Contact Form 7 via reCAPTCHA

Als je wel eens een online formulier hebt ingevuld, heb je reCAPTCHA vast wel eens gezien. Het is een technologie die ontwikkeld is door Google voor het detecteren van geautomatiseerde bots. Oudere versies van reCAPTCHA (V2) vereisen dat gebruikers een puzzel of uitdaging oplossen.

De laatste versie van reCAPTCHA (V3) vereist geen interactie met de gebruiker. In plaats daarvan monitort de technologie het gedrag van gebruikers op de achtergrond, om te bepalen of het om een menselijke of geautomatiseerde bezoeker gaat. Aangezien Contact Form 7 reCAPTCHA V3 ondersteunt, raden we je aan om deze laatste versie te gebruiken aangezien het een betere gebruikservaring biedt voor bezoekers.

Om reCAPTCHA in te stellen moet je eerst een API key aanmaken. Dit doe je door in te loggen op je Google account en naar de instellingenpagina van reCAPTCHA te gaan.

Een nieuwe site registreren voor reCAPTCHA integratie.

Een nieuwe site registreren voor reCAPTCHA integratie.

Doorloop het registratieformulier om je reCAPTCHA aan te maken.

Nadat je alles hebt ingevuld, klik je op Submit. Je zult vervolgens de site-specifieke “site key” en “secret key” zien. Sla deze keys ergens veilig op, want je moet ze later toevoegen aan Contact Form 7.

Google reCAPTCHA site en secret keys.

Google reCAPTCHA site en secret keys.

Klik vervolgens op “Contact” in de zijbalk van je WordPress dashboard en klik op Integration. Selecteer reCAPTCHA, en plak je site key en secret key in de bijbehorende velden. Klik vervolgens op Save Changes om de reCAPTCHA integratie af te ronden.

Configureren van reCAPTCHA in Contact Form 7.

Configureren van reCAPTCHA in Contact Form 7.

Na het configureren van reCAPTCHA in Contact Form 7 zul je het reCAPTCHA logo rechtsonder zien op de pagina van je contactformulier. Dit betekent dat reCAPTCHA actief is en je contactformulier beschermt tegen spammers.

WordPress contactformulier beschermd door reCAPTCHA V3.

WordPress contactformulier beschermd door reCAPTCHA V3.

Beveilig je contactformulier met Cloudflare (optioneel)

Als je Cloudflare gebruikt om je website te beschermen, kan je ook een speciale paginaregel aanmaken om je contactformulier te beschermen tegen spaminzendingen.

Beschermen van je contactformulier met Cloudflare.

Beschermen van je contactformulier met Cloudflare.

Om een regel toe te voegen klik je op het tabblad “Page Rules” en gebruik je de volgende instellingen om je contactpagina te beschermen.

Cloudflare’s “Browser Integrity Check” feature analyseert HTTP headers. Als er een HTTP header gedetecteerd wordt die vaak gebruikt wordt door bots en spammers, wordt het verzoek aan je site afgewezen. Door het “Security Level” op hoog te zetten krijgen alle bezoekers die de afgelopen twee week verdacht gedrag hebben laten zien een uitdaging om op te lossen.

Door deze instellingen alleen voor de URL van je contactpagina te gebruiken, worden de andere pagina’s van je website niet beïnvloed. We raden deze configuratie aan omdat normale “read-only” pagina’s op je website meestal geen extra beveiliging nodig hebben.

Laat je bezoekers niet alleen lezen. 👀 Kom in direct contact met je lezers en potentiële klanten via de Contact Form 7 plugin ⬇️Click to Tweet

Samenvatting

Contact Form 7 is de meest populaire plugin voor contactformulieren, en met goede reden. Je kan de plugin gebruiken om van alles te maken, van eenvoudige contactformulieren tot quizzen met vragen en antwoorden, tot complexe formulieren met bijlagen en dropdown-menu’s.

Het mooiste is dat het ook reCAPTCHA biedt om je contactformulier te beschermen tegen spammers.

Gebruik jij al Contact Form 7 op je WordPress website? Zo niet, wat is dan jouw favoriet onder de contactformulieren? Laat het ons weten in de reacties hieronder door gebruik te maken van het… jawel, formulier!


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten