Contactformulier maken in WordPress

Wil je een contactformulier maken voor op je WordPress website, dan kan ik je vertellen dat dit gelukkig vrij eenvoudig te realiseren is.

Het hebben van een contactpagina met alleen een e-mailadres is niet meer van deze tijd. Daarnaast geef je de bezoekers een overbodige extra stap om daadwerkelijk contact met je op te nemen.

Iedere website heeft dus eigenlijk gewoon een contactformulier nodig, zodat bezoekers makkelijk contact kunnen opnemen voor vragen over bijvoorbeeld je producten en diensten.

WordPress heeft standaard geen ingebouwde contactformulier mogelijkheid, maar met behulp van (gratis) plugins kunnen we een contactformulier maken voor onze website.

In deze WordPress contactformulier handleiding zal ik je stap voor stap uitleggen hoe je een contactformulier kunt maken in WordPress zonder ook maar een regel code te hoeven gebruiken.

Video: Contactformulier maken in WordPress

In onderstaande video laat ik precies zien wat je kunt doen om een contactformulier op je WordPress website te krijgen met de plugin WPForms.

Abonneer je op mijn YouTube kanaal

Wil je liever rustig te werk gaan aan de hand van afbeeldingen en tekstuitleg, dan kun je hieronder verder lezen.

Waarom heb je een contactformulier nodig?

Wanneer je net start met een WordPress website maken, dan denk je wellicht dat een contactformulier overbodig is. Een e-mailadres tonen is makkelijker en dan kunnen mensen toch ook gewoon mailen?

Bedenk echter hoe vaak je zelf een contactformulier invult. Dit is toch veel fijner dan een e-mailadres kopiëren, naar je eigen mailprogramma gaan, het e-mailadres plakken en je e-mail typen en versturen?

Alleen al voor de gebruiksvriendelijkheid is het dus de moeite om een contactformulier te maken en toe te voegen aan je website.

Dit is alleen niet de enige reden waarom het handig is om een contactformulier te hebben op je website. Het volgende is er ook handig aan:

  • Bescherming tegen spam: Wanneer je jouw e-mailadres op je website zet, dan komt een spambot dit tegen. Je kunt hierdoor een hoop spam e-mails ontvangen. Met een contactformulier laat je geen e-mailadres zien en met behulp van recaptcha kun je spam tegengaan.
  • Je krijgt direct de juiste informatie: Bij een contactformulier kun je zelf velden maken die mensen moeten invullen. Op deze manier ben je er zeker van dat je direct de juiste informatie krijgt, waardoor je niet nog een aantal keer heen en weer hoeft te mailen om de informatie compleet te krijgen.

Hoe kun je een contactformulier maken in WordPress?

Om een contactformulier op je website krijgen, kun je een extra WordPress plugin installeren.

Er zijn ondertussen tientallen WordPress plugins waarmee je contactformulieren kunt maken. Zelf kies ik als ik voor een gratis optie ga altijd voor de plugin WPForms.

Mocht je meer functionaliteiten nodig hebben, bekijk dan ook zeker WPForms Pro.

De reden hiervan is simpel. Het is erg gebruiksvriendelijk en je krijgt niet te maken met codes, wat bij de populaire Contact Form 7 helaas wel het geval is.

Contactformulier plugin installeren

WPForms

Het eerste wat je dus kunt doen is de plugin WPForms installeren. Log in op je WordPress website en ga naar Plugins -> Nieuwe plugin.

Nieuwe plugin WordPress

Vul rechtsboven bij Plugins zoeken WPForms in en druk op enter.

WPForms installeren

Je zal nu een overzicht krijgen met verschillende plugins waar WPForms uiteraard bovenaan staat. Ga naar WPForms en klik op de knop “Nu installeren” en vervolgens op activeren om de plugin actief te zetten.

Contactformulier maken met WPForms.

Wanneer je de plugin hebt geïnstalleerd en geactiveerd verschijnt er in de menubalk een extra menu-item die bij de plugin hoort. Het nieuwe menu-item heet “WPForms” en staat onder “Reacties” in het menu.

Wanneer je op WPForms klikt kom je in het menu van WPForms waar je contactformulieren kunt aanmaken en bewerken voor je WordPress website.

Contactformulier aanmaken met WPForms

Om een formulier aan te maken kun je Op een van de vele Nieuwe toevoegen knoppen klikken of op Maak je formulier.

WPForms template selecteren

Je hebt nu bovenaan de optie om een naam voor je formulier in te vullen. Verder heb je de optie om een template uit te kiezen om te gebruiken. Dit scheelt je zelf weer elementen naar de juiste plekken te slepen.

Er zijn aardig wat templates beschikbaar. Zo kun je blanco starten, een contactformulier maken, nieuwsbrief inschrijfformulier, lead magnet downloadformulier, feature request formulier, AVG-proof contactformulier en ga zo maar door.

Voor het gemak kies ik nu voor de Simple Contact Form template. Dit doe je simpelweg door op de knop Gebruik Template te klikken.

WPForms drag and drop buider

Je komt nu in de drag and drop (slepen en loslaten) formulieren bouwer van WPForms. Bij het simpele contactformulier heb je de velden naam, e-mailadres en bericht gekregen.

Om extra velden toe te voegen of velden te verplaatsen kun je het veld slepen met je muis en loslaten op de positie waar je het hebben wilt.

De standaardvelden zijn voor iedereen beschikbaar. Zie je bij de Fancy Fields iets staan wat handig is, dan zal je WPForms Pro nodig hebben.

Het werkt verder vrij eenvoudig. Zo zie je dat alles in de Engelse taal staat, maar dit kunnen we aanpassen naar het Nederlands. Om velden aan te passen kun je klikken op het veld.

Contactformulier velden bewerken

Aan de linkerkant kun je dan het een en ander aanpassen. Bij Algemeen kun je vaak dingen aanpassen zoals of een veld verplicht is of niet en de naam wat boven het veld staat. Bij Geavanceerd heb je ook nog handige opties als de grootte van het veld, placeholders, CSS classes en dat soort dingen.

Vergeet tot slot nooit als je aanpassingen hebt gedaan om rechtsboven op de knop Opslaan te klikken om de wijzigingen op te slaan.

Formulierbevestiging instellen na inzending

Nadat je tevreden bent met je formulier kunnen we gaan kijken naar de bevestiging die mensen die het formulier invullen te zien krijgen. Het is tenslotte wel belangrijk om dat je bezoekers weten dat alles goed is verzonden.

De bevestiging kun je instellen door naar Instellingen -> Bevestigingen te gaan hoeft niet heel ingewikkeld te zijn. Je kunt ervoor kiezen om een kort bedankt berichtje te laten zien of je kunt gebruikers doorsturen naar een nieuwe pagina.

Formulierbevestiging instellen na inzending

Het is zoals je ziet een kwestie van de tekst aanpassen. Mocht je liever een andere pagina van je website willen tonen, dan kun je bij bevestigingstype kiezen voor Toon pagina of Ga naar URL (omleiding). Klik wederom rechtsboven op Opslaan om de wijzigingen op te slaan.

Meldingen na formulierinzending

Een notificatie is de e-mail die je ontvangt nadat iemand het contactformulier van je website heeft ingevuld.

Je kunt deze e-mail aanpassen door naar Instellingen -> Meldingen te gaan.

Meldingen instellen in WPForms

Standaard staat dit al redelijk goed ingesteld. Alle velden zijn namelijk vooraf al voor je ingevuld. Zelf kun je echter nog net iets meer invloed uitoefenen als je zou willen.

Zo worden de notificaties standaard naar het administratie e-mailadres verzonden. Dit is het e-mailadres dat je hebt gebruikt tijdens het installeren van WordPress.

Wanneer je de notificatiemails naar een ander e-mailadres wilt sturen, dan kun je dit aanpassen door het e-mailadres in te vullen die het wel moet ontvangen. Wanneer je de notificaties naar meerdere e-mailadressen wilt versturen, dan kun je de e-mailadressen scheiden met een komma.

Het onderwerp van de notificatiemail is de naam van het contactformulier. Het kan dus een goed idee zijn om een extra veld toe te voegen waarin je mensen zelf een onderwerp laat invullen. Vervolgens kun je dan op Smart tags klikken bij onderwerpregel e-mail en kiezen voor het veld Onderwerp.

Het kan soms verwarrend zijn dat de afzender van de notificatiemail je eigen e-mailadres is. Dit is echter om de kans te verminderen dat de notificatiemails in de spam terechtkomen. Wanneer je reageert gaat deze echter wel altijd naar de afzender.

Contactformulier toevoegen in WordPress

Wanneer je klaar bent met het maken van een contactformulier in WordPress, wil je het natuurlijk ook nog op een pagina van je website plaatsen.

Wellicht heb je al een bestaande pagina of wil je een nieuwe pagina aanmaken waarop je het formulier wilt plaatsen. Je kunt via de Insluiten knop direct naar de desbetreffende pagina gaan of gewoon via de normale manier.

Contactformulier toevoegen via de blok editor

Eenmaal op de pagina waarop je het contactformulier wilt embedden, kun je het blok WPForms toevoegen.

Zodra je dit gedaan hebt krijg je de mogelijkheid om het formulier te selecteren die je op de pagina wilt plaatsen.

Formulier selecteren om te embedden

Zodra je een keuze hebt gemaakt zal WPForms het formulier tonen in de editor. Je kunt nu de pagina bijwerken of publiceren, zodat je het formulier op je website kunt bekijken.

Hieronder zie je hoe het formulier eruit komt te zien op mijn voorbeeld website.

Voorbeeld WordPress contactformulier

Contactformulier toevoegen met een shortcode

Wanneer je niet met de Gutenberg blok editor werkt, maar met een pagebuilder of iets anders, dan kun je het formulier ook altijd toevoegen met behulp van een shortcode.

Je kunt de shortcode altijd eenvoudig vinden door gewoon in het menu op WPForms te klikken en het formulierenoverzicht te bekijken.

WPForms shortcode van contactformulier

Je kunt deze code kopiëren en vervolgens plakken op de positie waar je het formulier wilt hebben.

Ik hoop dat het je gelukt is om ook een contactformulier op je WordPress website te krijgen met behulp van deze handleiding. Is het niet gelukt? Laat gerust hieronder een reactie achter, wellicht kan ik je verder helpen om het probleem op te lossen.

Heeft WPforms een anti-spam functie?

Niemand heeft zin om spammails te krijgen via de website. WPForms heeft daarom van zichzelf al een ingebouwde anti spam functionaliteit om je hiervoor te behoeden.

Je kunt zien of deze functionaliteit voor je formulier aanstaat door het formulier te bewerken en dan naar Instellingen -> Algemeen te gaan.

WPForms antispam mogelijkheid

Vervolgens zal je moeten controleren of Schakel antispam beveiliging in ingeschakeld staat. Hiermee zorgt WPForms dat er een onzichtbare token is waar spambots moeilijk mee om kunnen gaan.

WordPress Contactformulier CAPTCHA instellen

Mocht de standaard optie van WPForms niet alle spam tegenhouden, dan kun je nog een stapje verder gaan. Je kunt dan CAPTCHA instellen voor je formulieren. Het beste kun je hier de Google reCAPTCHA mogelijkheid voor gebruiken.

Je zal je hiervoor wel moeten aanmelden bij Google reCAPTCHa met je website. Wanneer je eenmaal op de website bent kun je bovenaan op V3 Admin Console klikken.

Google ReCAPTCHA V3 admin console

Wanneer je dit gedaan hebt zou het kunnen zijn dat je moet inloggen op je Google account. Wanneer je dit gedaan hebt en nog nooit eerder iets met recaptcha hebt gedaan, dan zal je doorgestuurd worden naar een pagina waar je jouw website kunt registreren voor reCAPTCHA.

Wanneer je al eerder een website hebt toegevoegd, dan zal je eerst op het plusje moeten klikken die je hierboven op de afbeelding ziet staan.

Je zal nu jouw websitenaam in het label veld kunnen invullen. Dit is voor eigen gebruik, zodat je kunt herkennen voor welke website het is.

Vervolgens kun je het reCAPTCHA-type kiezen die je wilt gebruiken. WPForms is compatibel met beide versies. Zelf ben ik altijd fan van v2 en dan de onzichtbare reCAPTCHA-badge.

Bij Domeinen kun je vervolgens jouw domeinnaam invullen. Je hoeft geen https:// voor de domeinnaam te zetten, jewebsitenaam.nl is voldoende.

Ga nu nog even akkoord met de voorwaarden en druk tot slot op de knop Verzenden.

Kopieer je reCAPTCHA keys en toevoegen aan WPForms

Je krijgt nu jouw reCAPTCHA-sleutels te zien. Houdt dit tabblad open, want je zal deze keys moeten kopiëren en plakken in WPForms.

Google reCAPTCHA-sleutels

Ga in een ander tabblad naar je website en dan naar WPForms -> Instellingen.

WPForms reCAPTCHA sleutels toevoegen

Je kunt hier bij Type de soort kiezen die je bij het aanmaken van de reCAPTCHA-sleutels ook hebt gekozen. In mijn geval was dat onzichtbare reCAPTCHA v2.

Vervolgens kun je de Site Sleutel en de Secret Sleutel kopiëren van de Google website en plakken op deze pagina van WPForms.

Verder heb je ook nog de optie Mislukt bericht. Hier kun je eventueel zelf een tekst plaatsen die te zien is wanneer reCAPTCHA ervoor zorgt dat iemand een formulier niet kan inzenden.

Het kan in sommige gevallen zijn dat andere plugins reCAPTCHA code proberen te laden. Wanneer dit het geval is kun je een melding krijgen dat alle velden verplicht zijn, terwijl alles wel is ingevuld. Wanneer dit het geval is zal je reCAPTCHA in andere plugins moeten uitschakelen. Mocht het probleem toch blijven bestaan, dan kun je een vinkje zetten bij No-Conflict Modus om te forceren dat andere reCAPTCHA wordt uitgeschakeld.

Wanneer je alles op deze pagina goed hebt ingevuld kun je op de knop “Save Settings” klikken om alles op te slaan.

Google reCAPTCHA inschakelen bij je contactformulier

Wanneer je de reCAPTCHA-sleutels hebt toegevoegd, kun je reCAPTCHA inschakelen op iedere formulier van je website.

Om dit te doen kun je jouw bestaande formulier bewerken. Zodra je in de editor van je contactformulier zit, kun je bij de velden sectie klikken op het veld reCAPTCHA.

reCAPTCHA inschakelen bij contactformulier in WPForms

Om vervolgens te controleren of het echt ingeschakeld staat, kun je rechtsboven kijken of je de reCATPCHA badge ziet staan met “Ingeschakeld” erin.

Sla je formulier op en test vervolgens op je website of het contactformulier werkt zoals je verwacht.

  1. Hoi Maikel,
    Goed artikel.
    Ik gebruik Google Recaptcha ook vaak. Maar vooral op websites met Elementor formulieren krijg ik toch heel veel spam binnen. Op beide versies van Recaptcha.
    Ook met een extra veld als honeypot, dus wat verborgen is op het formulier. weet jij nog mogelijkheden om dit te verbeteren?

  2. Hallo Maikel, bedankt voor je uitleg.

    Is het ook mogelijk om het contact-form ( evt. als button met code ) op productenpagina’s te plaatsen?

    Ik gebruik geen Woo Commerce maar zou toch een “product enquire” willen aanbieden waarbij het gewenste product automatisch aan het Form wordt toegevoegd.

    Weet jij of dit kan of bestaan daar wellicht betere plugins voor?

    • Automatisch zal het product niet aan het formulier toegevoegd worden. Wellicht dat het op een bepaalde manier wel kan, maar dat zou dan even verder onderzocht moeten worden. Wel kun je het formulier altijd plaatsen waar je wilt.

  3. Hallo Maikel,
    bedankt voor de heldere tutorial.
    is er ook een mogelijkheid om de inzendingen in WordPress te bewaren?
    GiDo

  4. Allereerst de beste wensen voor 2022 Maikel.
    Hartelijk dank weer voor je uitgebreide tutorial. Heel goed bruikbaar. Eindelijk van die codes af.
    Vraagje.
    Weet jij of het mogelijk is om in buddypress het onderstaande ook te wijzigen in een ander emailadres:

    “Zo worden de notificaties standaard naar het administratie e-mailadres verzonden. Dit is het e-mailadres dat je hebt gebruikt tijdens het installeren van WordPress.

    Wanneer je de notificatiemails naar een ander e-mailadres wilt sturen, dan kun je dit aanpassen door het e-mailadres in te vullen die het wel moet ontvangen. Wanneer je de notificaties naar meerdere e-mailadressen wilt versturen, dan kun je de e-mailadressen scheiden met een komma.”

    Op mijn website bluesupport.info (besloten) zou ik graag de ledenaanmeldingen etc naar een aparte ledenbeheerder willen sturen i.p.v. naar de beheerder van wordpress.

    Graag hoor ik van je of dit mogelijk is of dat er een plugin voor is.

    Hartelijk dank dat je de moeite hebt genomen dit te lezen.

    Groeten

    Chris Versteegen

Geef een reactie