Contact Form 7 is toch wel de meest populaire WordPress plugins om contactformulieren mee te bouwen. Na het installeren en activeren van deze plugin, ga je naar jouw Dashboard > Contact > Contactformulieren. Je ziet dat daar al gelijk een standaard formulier voor je klaarstaat.

Contactformulier ontwerpen en configureren

Klik op de titel van het contactformulier om deze te ontwerpen en te configureren. Je komt dan op een pagina, zoals hieronder weergegeven. 

Op het tabje Formulier kan je de formuliervelden toevoegen, aanpassen en verwijderen. Hiervoor wordt HTML code gebruikt. Wanneer dit de eerste keer is dat je hiermee geconfronteerd wordt, komt het misschien wat onduidelijk over. Schrik niet, het is simpelen dan je denkt.

De html code

1. Je ziet dat elk veld begint met een <p> en afsluit met een </p>. Dit betekent dat er een nieuwe alinea wordt geopend. Met <p> open je deze en met </p> sluit je deze af.
2. Verder zie je achter elke eerste regel van de alinea staan <br />. Dit betekent een nieuwe regel en is niets anders dan wanneer je in een tekstverwerker op de Enter-knop drukt.
3. Op de regel daaronder zie je een shortcode staan. Dit is de code die Contact form 7 gebruikt om de formuliervelden te tonen. Het spreekt allemaal aardig voor zich. Zo staat [text* your-name] voor tekstveld – verplicht – gevolgd door de naam van het veld: your-name. Het eerste gedeelte staat dus voor het type veld, het kruisje staat voor al dan niet verplicht veld en het laatste gedeelte betreft de naam van het veld.

De eerste alinea kan je dus als volgt lezen:
Uw naam (verplicht)

Met trots bieden wij vanaf heden een premium cursus aan, genaamd Maak je eigen website met WordPress. Dit eBook is maar liefst 78 pagina's dik en biedt jou een stap-voor-stap instructie om jouw eigen WordPress website met succes op te zetten.
Om dit te vieren ontvang je 14 dagen premium support per e-mail en bieden we een eenmalige korting van 10 euro aan met de kortingscode 'korting-ebook-123'.
Dit betekent dat je deze cursus, boordevol tips en handigheden, voor slechts €9,99 kan bestellen!

Bestel deze premium cursus 2024 hier!

en zo verder.

Formulier verder uitbreiden

Het formulier kan je verder uitbreiden door op de boxjes boven het invoerveld te klikken. Kies eerst het type veld en vul vervolgens de Form-tag Generator verder in. Door wat trial and error kom je een heel eind. Een nadere uitleg per type veld vind je hier.  Voor een correcte weergave van nieuwe velden dien je er wel voor te zorgen dat deze ‘omringt’ worden door dezelfde HTML code als de velden die reeds aanwezig zijn. De opmaak van een nieuw veld zou bijvoorbeeld kunnen zijn

<p>Uw adres (niet verplicht)<br />
 [text uw-adres] </p>

Nieuw veld meesturen in e-mail.

Om dit nieuwe veld mee te sturen in de e-mail, klik je op het tabje E-mail. Hier kan je het te versturen e-mailbericht nader specificeren. Bij berichtinhoud dien je het nieuwe veld op te geven om deze met de e-mail mee te sturen. Dit doe je door de naam van het invoerveld tussen [ en ] te zetten. Zo kan je bijvoorbeeld onderstaande code toevoegen:

Adres: [uw-adres]

Verder…

Verder kan je nog onder het tabje Berichten de meldingen van het formulier aanpassen.

Het formulier plaatsen

Nadat je het formulier hebt opgeslagen vind je onder de titel van het formulier de te gebruiken shortcode.

Deze code vind je tevens via jouw Dashboard > Contact > Contactformulieren. Achter het aangemaakte formulier vind je de te gebruiken shortcode. Het formulier plaats je simpelweg door deze shortcode te kopiëren en te plakken in de inhoud van je bericht, pagina of widget.