WordPress Contactformulier Maken: Complete Handleiding [2025]

Een contactformulier is essentieel voor elke website. Het biedt bezoekers een makkelijke manier om contact op te nemen zonder je emailadres te onthullen. In deze handleiding leer je hoe je een professioneel contactformulier maakt met de populairste WordPress plugins.

Waarom Een Contactformulier?

Voordelen Boven Mailto Links

Privacy: Je emailadres is niet zichtbaar voor spambots.

Gebruiksgemak: Bezoekers hoeven geen email client te openen.

Structuur: Je bepaalt welke informatie je ontvangt.

Automatisering: Bevestigingsmails, integraties, etc.

Analytics: Meet hoeveel mensen het formulier gebruiken.

Wat Kan Je Vragen?

• Naam en email (essentieel)
• Telefoonnummer
• Onderwerp selectie
• Bericht
• Bestandsuploads
• Datum/tijd selectie
• Checkboxes voor voorkeuren
• Dropdown menu's

Optie 1: Contact Form 7 (Gratis)

De meest populaire contactformulier plugin met miljoenen installaties.

Installatie

1. Ga naar Plugins → Nieuwe plugin
2. Zoek "Contact Form 7"
3. Installeren → Activeren

Basis Formulier Maken

1. Ga naar Contact → Contactformulieren
2. Je ziet een standaard formulier "Contactformulier 1"
3. Klik om te bewerken

Standaard Formuliercode

<label>Je naam
    [text* your-name]</label>

<label>Je e-mailadres
    [email* your-email]</label>

<label>Onderwerp
    [text your-subject]</label>

<label>Je bericht
    [textarea your-message]</label>

[submit "Verzenden"]

Velden Toevoegen

Klik op de knoppen boven de editor:

• text: Tekstveld
• email: Email met validatie
• URL: Website URL
• tel: Telefoonnummer
• textarea: Groot tekstveld
• drop-down menu: Dropdown selectie
• checkboxes: Meerkeuze
• radio buttons: Enkele keuze
• file: Bestandsupload
• submit: Verzendknop

Voorbeeld: Uitgebreid Formulier

<label>Je naam (verplicht)
    [text* your-name]</label>

<label>E-mailadres (verplicht)
    [email* your-email]</label>

<label>Telefoonnummer
    [tel your-phone]</label>

<label>Waar gaat je vraag over?
    [select your-subject "Algemene vraag" "Offerte aanvraag" "Support" "Anders"]</label>

<label>Je bericht
    [textarea your-message]</label>

<label>Bijlage (optioneel)
    [file your-file limit:5mb filetypes:pdf|doc|docx|jpg|png]</label>

[acceptance privacy] Ik ga akkoord met het privacybeleid [/acceptance]

[submit "Verstuur bericht"]

Email Instellingen

Tab "E-mail":

Aan: Waar berichten naartoe gaan Van: Afzender (gebruik je domein) Onderwerp: Bijv. "Nieuw bericht van [your-name]" Berichttekst: De email inhoud met veldtags

Van: [your-name] <[your-email]>
Onderwerp: [your-subject]

Bericht:
[your-message]

Telefoon: [your-phone]

Formulier Plaatsen

1. Kopieer de shortcode: [contact-form-7 id="123" title="Contactformulier"]
2. Plak in een pagina of bericht
3. Of gebruik het "Contact Form 7" blok in Gutenberg

Bevestigingsberichten

Tab "Berichten" - pas aan:

• Bericht succesvol verzonden
• Validatiefouten
• Spam gedetecteerd
• Technische fout

Optie 2: WPForms Lite (Gratis)

Meer visueel en gebruiksvriendelijk dan CF7.

Installatie

1. Plugins → Nieuwe plugin
2. Zoek "WPForms"
3. Installeren → Activeren

Formulier Maken

1. Ga naar WPForms → Voeg nieuw toe
2. Kies een template (bijv. "Simple Contact Form")
3. Of start blanco

Drag & Drop Editor

Sleep velden naar je formulier:

• Naam, Email, Telefoon
• Tekst, Paragraph
• Dropdown, Checkboxes, Radio
• Nummer, Slider
• Datum/Tijd
• File Upload (Pro)

Velden Configureren

Klik op een veld voor opties:

• Label: Veldnaam
• Description: Hulptekst
• Required: Verplicht ja/nee
• Placeholder: Voorbeeldtekst
• CSS Classes: Styling

Notificaties

Tab "Instellingen → Notificaties":

• Verzend naar email
• Onderwerpregel
• Van naam en email
• Reply-to
• Bericht body met smart tags

Bevestigingen

Tab "Instellingen → Bevestigingen":

• Bericht: Toon tekst
• Pagina tonen: Redirect naar pagina
• URL: Redirect naar URL

Formulier Plaatsen

1. Gebruik de WPForms blok in Gutenberg
2. Of shortcode: [wpforms id="123"]
3. Of via de widget

Optie 3: Fluent Forms (Gratis)

Moderne, snelle optie met veel gratis features.

Kenmerken

• Conversational forms
• Quiz en surveys
• Conditionele logica (gratis!)
• PDF generatie
• Multi-step forms

Waarom Fluent Forms?

• Meer gratis features dan WPForms
• Sneller dan CF7
• Moderne interface
• Goede Gutenberg integratie

Anti-Spam Maatregelen

Honeypot

Een verborgen veld dat alleen bots invullen:

Contact Form 7: Installeer "Honeypot for Contact Form 7" plugin.

WPForms: Standaard ingebouwd (Instellingen → Spam Protection).

reCAPTCHA

Google's anti-spam systeem:

Contact Form 7:

1. Ga naar Contact → Integratie
2. Stel reCAPTCHA in met je Google API keys
3. Voeg [recaptcha] toe aan je formulier

WPForms:

1. WPForms → Instellingen → reCAPTCHA
2. Voeg API keys in
3. Activeer per formulier

Akismet

Als je Akismet gebruikt voor comments:

• CF7 integreert automatisch
• WPForms heeft Akismet optie

GDPR / AVG Compliance

Toestemming Vragen

Voeg een verplichte checkbox toe:

Contact Form 7:

[acceptance privacy class:gdpr-checkbox] Ik ga akkoord met het <a href="/privacybeleid">privacybeleid</a> [/acceptance]

WPForms:

• Voeg checkbox veld toe
• Maak verplicht
• Link naar privacybeleid

Data Verwerking

Informeer gebruikers:

• Welke data je verzamelt
• Hoe lang je het bewaart
• Met wie je het deelt
• Hoe ze verwijdering kunnen aanvragen

Data Opslag

Overweeg:

• Flamingo plugin (CF7) - slaat submissions lokaal op
• WPForms Lite slaat niet op (goed voor privacy)
• Bepaal bewaarperiode en ruim regelmatig op

Styling en Aanpassen

CSS Toevoegen

Contact Form 7:

De plugin voegt minimale styling toe. Voeg custom CSS toe:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wpcf7 input[type="submit"] {
    background: #0073aa;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background: #005a8c;
}

WPForms: Heeft ingebouwde styling opties in de editor.

Responsive Design

Zorg dat formulieren goed werken op mobiel:

• Test op verschillende schermgroottes
• Velden op 100% breedte
• Voldoende padding voor touch

Email Deliverability

Probleem: Emails Komen Niet Aan

WordPress' standaard mail functie is onbetrouwbaar.

Oplossing: SMTP Plugin

Installeer "WP Mail SMTP":

1. Configureer met je email provider
2. Of gebruik service als SendLayer, Brevo, Mailgun
3. Test met de ingebouwde email test

SMTP Configuratie

Afhankelijk van je provider:

• Gmail: OAuth of app wachtwoord
• Outlook/Microsoft 365: OAuth
• Eigen domein: SMTP server van je host

Formulier Tracking

Google Analytics

Track formulier submissions:

WPForms: Ingebouwde Google Analytics integratie (Pro).

Contact Form 7: Gebruik "Contact Form 7 Tracking" plugin of custom events:

document.addEventListener('wpcf7mailsent', function(event) {
    gtag('event', 'form_submission', {
        'event_category': 'Contact',
        'event_label': 'Contact Form'
    });
}, false);

Veelvoorkomende Problemen

Formulier Verzendt Niet

• Check verplichte velden
• Verifieer email instellingen
• Test met SMTP plugin
• Check server error logs

Spam Overweldigend

• Activeer honeypot
• Implementeer reCAPTCHA
• Gebruik Akismet
• Overweeg vraag/antwoord captcha

Emails In Spam

• Configureer SPF/DKIM records
• Gebruik SMTP
• Verzend van je eigen domein
• Vermijd spam-achtige content

Meer informatie: WordPress.org documentatie

Veelgestelde vragen

Hoe lang duurt het om dit te implementeren?

De implementatietijd varieert per situatie. Voor eenvoudige configuraties is dit binnen een uur geregeld, complexere setups kunnen enkele uren tot een dag duren.

Wat zijn de kosten?

De kosten zijn afhankelijk van je hosting provider en pakket. Veel basisfuncties zijn gratis inbegrepen, voor geavanceerde functies kunnen extra kosten gelden.

Heb ik technische kennis nodig?

Voor de basis heb je weinig technische kennis nodig. De meeste hosting providers bieden uitgebreide documentatie en support om je te helpen.