Contact Form 7 is één van de meest gebruikte WordPress-plugins voor het maken van contactformulieren. De plugin is gratis en er zijn door andere WordPress ontwikkelaars uitbreidingsmogelijkheden ontwikkeld voor Contact Form 7. Ik laat je zien hoe je met Contact Form 7 een contactformulier maakt en welke opties er allemaal zijn. Een alternatief voor Contact Form7 is Forminator, deze plugin is minder technisch en werkt meer met invullen en slepen.

De plugin installeren

Je kunt Contact Form 7 gratis downloaden van WordPress.org. Ook kun je in je WordPress dashboard naar Plugins > Nieuwe plugin gaan en zoeken naar “Contact Form 7”. Klik vervolgens op “nu installeren” en dan “activeren”. Je vind de plugin nu terug onder Contact in het linker menu.

1. Nieuw contactformulier maken

Om een nieuw contactformulier aan te maken, kun je ervoor kiezen om het automatisch aangemaakte formulier (“Contactformulier 1”) te bewerken. Je kunt ook op “Nieuwe toevoegen” klikken om een nieuw contactformulier te maken. Je krijgt dan het volgende scherm te zien:

Dit is het standaard contactformulier waarin je bezoeker wordt gevraagd zijn naam, e-mailadres, onderwerp en een bericht in te vullen. Vervolgens wordt er een “Verzend”-knop getoond. Velden waar een sterretje staat zijn verplichte velden. Het contactformulier kan alleen verstuurd worden als je bezoeker deze verplichte velden heeft ingevuld. Bijvoorbeeld: [text* your-name].
Dit is een verplicht “text”-veld, met als id “your-name“.

In het scherm dat je hierboven ziet, kun je ook velden toevoegen aan je formulier. Met de knoppen boven het tekst-veld kan je de volgde soorten velden invoegen:

  • Tekst: Een tekstveld.
  • E-mail: Een tekstveld waar een e-mailadres moet worden ingevuld (dit veld herkent ook automatisch of er een geldig e-mailadres is ingevuld).
  • URL: Hier dient de bezoeker een URL (webadres) in te vullen.
  • Tel: Een veld dat bedoeld is voor het invullen van een telefoonnummer.
  • Getal: Een veld waar alleen nummers kunnen worden ingevuld.
  • Datum: Een veld waar de bezoeker een datum moet kiezen.
  • Tekstgebied: Een (groot) tekstveld waar je bezoeker een langere tekst kan invoeren. Meestal gebruikt voor het “bericht”.
  • Drop-down menu: Een drop-down menu waar je bezoeker kan kiezen uit meerdere opties.
  • Selectievakjes: Checkboxes waar je bezoeker één of meerdere opties kan selecteren.
  • Keuzerondjes: Soort checkboxes waar slechts één optie gekozen kan worden.
  • Acceptatie: Een checkbox om je bezoeker akkoord te laten gaan met (bijvoorbeeld) je algemene voorwaarden en privacy-beleid. Heel handig nu de GDPR (AVG) van kracht is. Zonder akkoord wordt het formulier niet verstuurd.
  • Quiz: Geeft de mogelijkheid om een “quiz” aan je contactformulier toe te voegen.
  • reCAPTCHA: CAPTCHA is een manier om SPAM te bestrijden. Meestal wordt je bezoeker gevraagd om een tekst over te typen. Om dit te kunnen gebruiken dien je eerst een koppeling te maken met Google’s CAPTCHA. Later in dit artikel vertellen we je hier meer over.
  • Bestand: Je kunt je bezoekers bestanden laten uploaden in je formulier. Je hebt de mogelijkheid om alléén bepaalde bestandstypen te accepteren én om een maximum in te stellen voor de grootte van het bestand.
  • Verzenden: Met deze optie kun je een verzend-knop aan je formulier toevoegen.

Hoe voeg je een veld toe aan jouw formulier?

Als voorbeeld nemen we een tekstveld. Om een tekstveld aan je formulier toe te voegen volg je deze stappen:

Ga in de formulier-editor met de cursus op de plek staan waar je het veld wilt invoegen.
Klik op de TEKST knop bovenaan.
Nu moet je wat details voor dit veld baan invullen
De afbeelding rechts laat zien hoe dit veld in elkaar zit. Je kunt bijvoorbeeld bepalen of dit tekst-veld een verplicht veld is.
Daarnaast kun je het veld een voor jou logischere “naam” geven. Deze naam zien je bezoekers niet, maar wordt gebruikt in de e-mail die jij ontvangt als iemand een formulier verstuurt. Het is daarom handig om hier een naam in te vullen die je zult onthouden.
Je kunt een “standaard waarde” invullen. Dit kan handig zijn als voorbeeld voor je bezoeker, om het duidelijker te maken welke input je van de bezoeker verwacht.
Onderaan zie je hoe de [shortcode] opgebouwd wordt.
Klik op TAG toevoegen om de code in het formulier op te nemen.

Deze manier van werken pas je ook toe op de andere velden.

Keuzerondjes of Selectievakjes?

Met de optie “Selectievakjes” kun je je bezoeker een keuze laten maken uit één of meerdere opties. Bijvoorbeeld:

Wil je vakjes hebben maar je bezoeker beperken tot één keuze? Dan kun je beter gebruik maken van “Keuzerondjes”. Een bezoeker kan met dit veld maar één keuze maken, terwijl bij “selectievakjes” meerdere opties mogelijk zijn.

Verzenden

Wanneer je in Contact Form 7 een nieuw formulier aanmaakt zal de Verzend-knop automatisch getoond worden. Heb je deze verwijderd en wil je deze opnieuw toevoegen? Gebruik dan de optie “verzenden”.
Je kunt de tekst op de knop ook zelf aanpassen bijvoorbeeld “Verstuur het formulier”.

Hoe haal je en veld weg uit je contactformulier?

Wil je een veld weghalen uit jouw formulier, verwijder dan de tekst met de informatie. Dit begint met <label> t/m </label>

2. Formulieren ontvangen

Zodra iemand het formulier invult, wil je natuurlijk dat het per email bij jou binnenkomt. Ga hiervoor naar het tweede tabje “MAIL“.
Hier kun je bepalen hoe de e-mail er uit ziet die bij jou binnenkomt én naar welk adres deze mail verstuurd wordt.
Standaard zal een e-mail er als volgt uit zien:

Je kunt bijvoorbeeld bovenaan aanvullende tekst typen, die je straks in de email te zien krijgt.
Voorbeeld: “Dit is een vraag via het contectformulier van de website:”
Maar als jij meer velden hebt toegevoegd aan je formulier, dan wil je natuurlijk dat die informatie ook wordt meegestuurd.
Dit doe je als volgt..

Velden toevoegen aan de e-mailtekst

Zodra je de tab MAIL opent zie je de [short-codes] die je in het formulier hebt gebruikt. Deze kan je overnemen in de emailtekst.

Deze codes zorgen ervoor dat de informatie die iemand in het formulier heeft ingevuld (bijvoorbeeld het emailadres dat iemand invult via het veld ’emailadres’, in de email die jij ontvangt getoond wordt als het emailadres en niet meer de [ your -email] code.
Het beste type je nog wat tekst ervoor, zodat er staat: Het emailadres van de afzender is: [your-email]

Automatische antwoord-emails

Onderaan het editor deel van de tab MAIL zie je een aanvink optie: Mail 2
Via deze optie kan je een tweede email (met eventueel een andere inhoud) versturen.
Een veelgebruikte toepassing is de automatische “Bedank email” die je stuurt aan iemand die het formulier heeft ingevuld.

4. Het formulier op jouw website plaatsen

Zodra je de velden hebt gedefinieerd (daarmee bepal je hoe je formulier eruit gaat zien) en de e-mailgegevens hebt ingevuld (waar het formulier naartoe wordt gestuurd) kan je het formulier opslaan.
Kijk nu wat er bovenaan het formulier staat:

De code in de blauwe balk is de shortcode. Volg de instructie op: Kopieer deze code en plak hem in een bericht, pagina of widget.
Je plakt deze code in een pagina (contactpagina?) of in een tekst-widget om daarna de widget in een zijbalk of footer te plaatsen.
Op die plek krijg je daarna het formulier te zien!