Contactformulier toevoegen WordPress: stap voor stap

Contactformulier toevoegen WordPress doe je in tien minuten: installeer een formulierplugin, bouw een formulier met naam, e-mail en bericht, en plaats het met het blok van die plugin op een pagina. De eerste drie stappen zijn het makkelijke deel. Het laatste deel, zorgen dat de mails echt aankomen, is waar de meeste contactformulieren stilletjes misgaan, en daar besteedt dit artikel de meeste aandacht aan.

WordPress heeft zelf geen formulierblok. Een blockthema geeft je een nette pagina, een groep, een kolomlayout en een knop, maar niets dat gegevens verzamelt en verstuurt. De echte vraag is dus welke plugin je kiest en hoe je de verzending regelt.

Heb je een plugin nodig om een contactformulier toe te voegen in WordPress?

Ja, voor elk formulier dat je wilt blijven gebruiken. Je kunt een ruw HTML-formulier schrijven met een PHP-handler in een child theme, en de tutorials die dat laten zien kloppen. Maar dan is de handler jouw verantwoordelijkheid: validatie, spamfilter, nonce-controles, escaping, opslag en foutmeldingen. Dat is een kleine plugin die je zelf moet onderhouden.

Op een klantsite bepaalt die onderhoudslast de keuze. Een handler die je in 2024 schreef, staat in 2028 nog op de site, lang nadat je bent vergeten hoe hij een mislukte verzending afhandelt. Een onderhouden plugin krijgt beveiligingsupdates waar jij niet aan hoeft te denken.

Sla het zelfgebouwde formulier dus over, tenzij het formulier onderdeel van je product is. Dat loont alleen als je een plugin bouwt of een heel ongewone workflow hebt.

Welke formulierplugin voor WordPress kies je?

Vijf plugins dekken bijna elk geval. Kies op basis van wat er na het verzenden gebeurt, niet op basis van de sjablonengalerij.

• Jetpack-formulierblok: een native blok, niets om te leren, geschikt voor een eenvoudige contactpagina. Het is wel gekoppeld aan Jetpack, wat sommige klanten niet willen.

• WPForms Lite: een builder met slepen en neerzetten en een vriendelijke interface. Voorwaardelijke logica en betalingen zitten achter betaalde versies.

• Fluent Forms: ruime gratis versie, snelle builder, handig voor bureaus die formulieren over meerdere sites hergebruiken.

• Contact Form 7: gratis en klein, maar ingesteld via een tekstsjabloon. Er is geen visuele builder, dus het overdragen aan een klant is geen goed idee.

• Gravity Forms: alleen betaald, met de beste add-ons en het sterkste ontwikkelaarsecosysteem. Geschikt voor formulieren in meerdere stappen en integraties.

Voor een standaard contactpagina op een blockthema volstaat Fluent Forms of het Jetpack-blok. Moet het formulier gegevens naar een CRM sturen, kies dan Gravity Forms of WPForms Pro en stop met vergelijken.

De Jetpack-documentatie laat zien hoe het formulierblok in de editor werkt, inclusief plaatsing in de footer en in templates. Dat is nuttig, ook als je een andere plugin kiest.

Hoe bouw je het formulier zelf?

Installeer en activeer je plugin via Plugins > Nieuwe plugin toevoegen, en maak een nieuw formulier aan met de sjabloon "Contact" of "Eenvoudig". Voordat je de builder opent, bepaal je de velden op papier. Elk extra veld verlaagt het aantal mensen dat het formulier afmaakt.

Een contactformulier dat voor de meeste kleine sites werkt, heeft vier velden: naam, e-mail, een berichtvak en eventueel een keuzelijst voor het onderwerp als je inbox gesorteerd moet worden. Een telefoonnummerveld is een conversiekiller, tenzij je mensen daadwerkelijk terugbelt.

Drie instellingen zijn belangrijker dan de lay-out. Ten eerste: maak alleen e-mail en bericht verplicht. Ten tweede: zet echte labels boven de velden, niet alleen placeholdertekst erin. Placeholders verdwijnen tijdens het typen en halen de contrastcontrole vaak niet, wat voor WCAG 2.2 telt. Ten derde: laat de bevestiging een melding op dezelfde pagina tonen, tenzij je een bedankpagina nodig hebt voor tracking.

Werk je met Arabisch of Hebreeuws, test het formulier dan in RTL voordat je oplevert. Labels en de verzendknop spiegelen correct in de meeste plugins als de sitetaal een RTL-locale is. Het e-mailveld volgt dat niet altijd. E-mailadressen lopen van links naar rechts, dus forceer dir="ltr" op dat invoerveld met een kleine CSS-regel of met de optie voor eigen attributen van de plugin. Anders springt de cursor als de bezoeker het apenstaartje typt.

Hoe voeg je het formulier toe aan een pagina in de blokkeneditor?

Maak een pagina met de naam Contact, open de inserter met de plusknop en zoek op de naam van je plugin. Elke serieuze formulierplugin registreert een eigen blok. Kies het, selecteer het formulier dat je hebt gebouwd, en publiceer.

Je kunt het formulier ook op andere plekken plaatsen. Open in de Site Editor Weergave > Editor, kies een template-onderdeel zoals de footer of een paginatemplate, en voeg daar hetzelfde blok in. Zo zet je in het Full Site Editing-model een kort formulier in elke footer, zonder shortcode.

Twee lay-outtips uit klantenwerk. Zet het formulier in een groep met een maximale breedte van ongeveer 640 pixels, want een formulier over een kolom van 1200 pixels leest slecht. En zet een regel gewone tekst erboven met een direct e-mailadres. Sommige bezoekers gebruiken helemaal geen formulier, en een adres geven kost niets.

Waarom komt de e-mail van je contactformulier nooit aan?

Omdat WordPress mail verstuurt via de standaard PHP-mailfunctie van de webserver, en ontvangende mailservers die niet vertrouwen. De functie wp_mail(), beschreven in de WordPress-ontwikkelaarsreferentie, geeft het bericht door aan wat de server aanbiedt. Op shared hosting is dat vaak een niet-geauthenticeerde afzender die de SPF- en DKIM-controles niet haalt. Gmail en Outlook zetten het bericht dan in de spam of weigeren het meteen.

Het vervelende is dat het formulier toch een groene succesmelding toont. De plugin heeft zijn werk gedaan. De server heeft het bericht aangenomen. Het heeft alleen nooit de inbox bereikt.

De oplossing heeft drie onderdelen.

1. Installeer een SMTP-plugin zoals WP Mail SMTP, FluentSMTP of Post SMTP, en koppel die aan een transactionele mailservice.

2. Zet het veld Van op een adres op je eigen domein, bijvoorbeeld hallo@jouwdomein.nl, en nooit op een gratis Gmail-adres.

3. Zet de SPF- en DKIM-records die je mailservice geeft in de DNS van je domein, en publiceer een DMARC-record, ook als dat alleen meeleest.

Welke dienst? Voor een contactformulier dat een paar berichten per dag verstuurt, werkt bijna elke transactionele aanbieder. Postmark is daar speciaal voor gebouwd en houdt transactionele mail gescheiden van marketingmail.

Wil de klant later ook leads bereiken met een nieuwsbrief, dan dekt Brevo zowel transactionele verzending als campagnes met één account, en de gratis versie is ruim genoeg voor een kleine site.

Een stap-voor-stap Mailtrap-tutorial loopt dezelfde SMTP-installatie door met schermafbeeldingen, als je een tweede referentie wilt.

Hoe stop je spam zonder echte bezoekers te irriteren?

Een openbaar formulier trekt binnen enkele dagen bots aan. Het gebruikelijke antwoord is een CAPTCHA, en dat is meestal het verkeerde eerste antwoord, want elke extra uitdaging kost echte verzendingen.

Bouw de verdediging in deze volgorde op en stop zodra de spam ophoudt.

Begin met een honeypot: een verborgen veld dat mensen nooit invullen en bots altijd wel. De meeste formulierplugins hebben die standaard aan staan. Voeg Akismet toe als de plugin dat ondersteunt. Blijft de spam komen, gebruik dan een privacyvriendelijke uitdaging zoals Cloudflare Turnstile voordat je een zichtbare beeldpuzzel inzet. Bewaar een klassiek reCAPTCHA-vinkje voor formulieren die langdurig worden aangevallen.

Beperk waar mogelijk ook het aantal verzendingen per IP-adres op serverniveau. Eén IP-adres dat veertig berichten per minuut verstuurt, is geen bezoeker.

Aan de juridische kant: bedient de site bezoekers in de EU, voeg dan een niet-aangevinkt toestemmingsvakje toe dat naar het privacybeleid linkt, en stel de plugin zo in dat inzendingen niet langer worden bewaard dan nodig. Veel plugins bewaren elke inzending standaard voor altijd in de database. Pas dat aan.

Hoe test je het formulier voordat je het oplevert?

Test het zoals een vreemde zou doen, en test op het live domein, niet op staging. Staging blokkeert vaak uitgaande mail, dus een geslaagde test daar bewijst niets.

Verstuur het formulier vanaf een telefoon via mobiele data met een Gmail-adres, en daarna met een Outlook-adres. Controleer de inbox en de spammap van het ontvangende adres. Open de berichtkoppen en zoek naar spf=pass en dkim=pass. Verstuur één keer met alle velden leeg en één keer met een bewust fout e-mailadres, om te zien of de foutmeldingen duidelijk zijn en door een schermlezer voorgelezen kunnen worden.

Vul daarna het formulier alleen met het toetsenbord in. Kun je de verzendknop niet bereiken met Tab, of zie je niet welk veld focus heeft, dan los je dat op met de focusstijlen van je thema.

Kantlijnnotitie: houd een logboek bij. Gebruik een plugin- of mailservicefunctie die verzonden berichten opslaat, zodat je bij een klant die zegt "ik heb die aanvraag nooit gehad" binnen een minuut antwoord geeft in plaats van een middag te zoeken.

Wanneer is een formulierplugin het verkeerde hulpmiddel?

Soms heeft de bezoeker geen contactformulier nodig. Bij een webshop is een supportwidget die orderdata leest beter dan een leeg berichtvak. Op een landingspagina voor leads hoort het formulier in een grotere flow met tracking.

Moeten inzendingen in een CRM of spreadsheet terechtkomen, stuur ze er dan rechtstreeks heen in plaats van e-mails handmatig over te typen. Een formulierplugin met een Zapier-koppeling zet elke inzending in een paar klikken in Sheets, Slack of je projecttracker.

Is het formulier de voordeur van een verkooppijplijn, dan haalt een CRM met eigen insluitbare formulieren een plugin uit je stack en houdt het de contactgeschiedenis op één plek. De gratis formulieren van HubSpot zijn het bekendste voorbeeld.

Het patroon is overal hetzelfde. Het formulier is de makkelijke tien minuten. De aflevering, de spamregels en de opvolging zijn het werk. Open vanavond het contactformulier van je eigen site, stuur jezelf een bericht vanaf een ander account, en kijk hoe lang het duurt voordat het aankomt.