Zo configureer je Contact Form 7 voor je WordPress website

In 2024 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.

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.

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.

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.

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.

Zo maak je een WordPress contactformulier

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

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

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.

• Text – Maak een form tag voor één regel tekst. Tekstvelden zijn handig voor voornamen, achternamen en andere stukjes tekst die niet meerdere regels nodig hebben.
• Email – Maak een form tag voor een e-mailadres.
• URL – Maak een form tag voor een URL.
• Tel – Maak een form tag voor een telefoonnummer.
• Number – Maak een form tag voor een ander getal. Anders dan de velden “text” of “text area”, staan “number” velden alleen maar cijfers toe.
• Date – Maak een form tag voor een datum.
• Text Area – Maak een form tag voor een tekstveld. Anders dan het veld “text”, kan de gebruiker meerder regels tekst in het veld “text area” invoeren. Ideaal dus voor het daadwerkelijke bericht dat ze willen sturen.
• Drop-down Menu – Maak een form tag voor een dropdown menu.
• Checkboxes – Maak een form tag voor selectievakjes.
• Radio Buttons – Maak een form tag voor keuzevakjes.
• Acceptance – Maak een form tag voor een acceptatie-vakje.
• Quiz – Maak een form tag voor een antwoord-vraag koppel.
• File – Maak een form tag voor een bestandsupload.
• Submit – Maak een form tag voor een verzendknop.

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.

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

• Field Type – vereist veld
• Name – text-711 (automatisch gemaakt)
• Default Value – Je naam (gebruikt als standaard placeholder)
• Akismet – Niet aangevinkt
• ID Attribute (CSS) – cf7-your-name
• Class Attribute (CSS) – cf7-your-name

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.

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

• Field Type – vereist veld
• Name – email-632 (automatisch gemaakt)
• Default Value – Your Email
• Akismet – Niet aangevinkt
• ID Attribute (CSS) – your-email
• Class Attribute (CSS) – your-email

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.

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

• Name – url-601 (automatisch gemaakt)
• Default Value – Your Website
• Akismet – Niet aangevinkt
• ID Attribute (CSS) – cf7-your-website
• Class Attribute (CSS) – cf7-your-website

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.

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

• Name – tel-842 (automatisch gemaakt)
• Default Value – Your Phone Number
• ID Attribute (CSS) – cf7-your-phone-number
• Class Attribute (CSS) – cf7-your-phone-number

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.

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

• Name – date-389 (automatisch gemaakt)
• Default Value – Your Appointment Date
• Range – Onze eigen gekozen data.
• ID Attribute (CSS) – cf7-appointment-date
• Class Attribute (CSS) – cf7-appointment-date

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.

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

• Name – textarea-795 (automatisch gemaakt)
• Default Value – Your Message
• ID Attribute (CSS) – cf7-your-message
• Class Attribute (CSS) – cf7-your-message

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.

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

• Name – menu-24 (automatisch gemaakt)
• Options – Option 1, Option 2, Option 3, Option 4
• Allow Multiple Selections – Aangevinkt
• Insert a Blank Item as the First Option – Aangevinkt
• ID Attribute – cf7-drop-down-menu
• Class Attribute – cf7-drop-down-menu

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.

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

• Name – checkbox-948 (automatisch gemaakt)
• Options – Option 1, Option 2, Option 3
• Wrap Each Item with Label Element – Aangevinkt
• ID Attribute – cf7-checkbox
• Class Attribute – cf7-checkbox

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.

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

• Name – radio-708 (automatisch gemaakt)
• Options – Option 1, Option 2, Option 3
• Wrap Each Item with Label Element – Aangevinkt
• ID Attribute – cf7-radio
• Class Attribute – cf7-radio

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.

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

• Name – acceptance-545 (automatisch gemaakt)
• Condition – Check this box to accept the terms.
• ID Attribute – cf7-acceptance
• Class Attribute – cf7-acceptance

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.

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

• Name – quiz-461 (automatisch gemaakt)
• Questions and answers – What year was WordPress released?|2003
• ID Attribute – cf7-quiz
• Class Attribute – cf7-quiz

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.

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

• Name – file-658 (automatisch gemaakt)
• File Size Limit – 1024kb
• Acceptable File Types – jpg|png|gif
• ID Attribute – cf7-file
• Class Attribute – cf7-file

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.

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

• Label – Submit
• ID Attribute – cf7-submit
• Class Attribute – cf7-submit

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.

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

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

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.

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.

• Text
• Email
• URL
• Tel
• Number
• Date
• Text Area
• Acceptance
• Quiz
• File

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.

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.

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:

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”.

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.

• To – het e-mailadres waar de melding heengaat.
• From – het e-mailadres dat de melding verstuurt.
• Subject – het onderwerp van de melding.
• Additional headers – specificeer extra email headers zoals “reply-to”.
• Message body – de hoofdtekst van de melding.
• File attachments – eventuele bijlagen bij de melding.

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

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.

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.

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.

Doorloop het registratieformulier om je reCAPTCHA aan te maken.

• Label – Kies een label.
• reCAPTCHA type – Contact Form 7 ondersteunt reCAPTCHA v3, dus kies die versie.
• Domains – Als je website een root domein gebruikt, voeg dan zowel de www als niet-www versie van je domein toe. Gebruikt je website alleen een subdomein, voeg dan dat toe.
• Owners – Het e-mailadres van je Google account zal standaard als de eigenaar worden toegevoegd. Voeg meer e-mailadressen toe als je dat wil.

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.

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.

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.

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.

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

• If the URL Matches – *your-domain.com/your-contact-page/*
• Browser Integrity Check – On
• Security Level – High

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.

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!