Home » Tutorial » Wordpress » Contact form 7 handleiding – contactformulier voor je WordPress site

Contact form 7 handleiding – contactformulier voor je WordPress site

Een contactformulier is één van de belangrijkste contactmogelijkheden op je website. De gratis plugin Contact Form 7 is één van de populairste contactformulier plugins voor WordPress en biedt enorm veel mogelijkheden, maar het is helaas niet de meest gebruiksvriendelijke plugin. Deze Contact form 7 handleiding is dan ook geen overbodige luxe 😉

In dit artikel lees je:

Stap 1 : Installeer de Contact Form 7 plugin

Voordat er iets in te stellen valt moet je de plugin natuurlijk eerst installeren. Ga dus naar plugins en klik links bovenin op “nieuwe plugin”. Typ vervolgens “contact form 7” in het zoekvak rechtsboven en druk op enter. Klik vervolgens bij de “contact form 7” plugin op “nu installeren” en vervolgens op “plugin activeren”.

Stap 2 : Open het standaard contactformulier

contact form 7 handleidingJe hebt nu een nieuw menu item in het WordPress admin menu, “contact” (1). Als je daarop klikt zie je dat de plugin alvast 1 contactformulier voor je heeft aangemaakt. Klik op de naam van dat contactformulier (2) om dit te bewerken. Naast de naam zie je ook een shortcode (3) staan, daarmee voeg je straks je contactformulier toe aan een pagina, bericht of widget.

Je kunt natuurlijk ook met een blanco contactformulier beginnen (4) maar een bestaand contactformulier aanpassen is makkelijker.

Stap 3 : Het contactformulier aanpassen

contactformulier contact form 7Het standaard contactformulier bevat velden voor de naam, het e-mail adres, een onderwerp en een bericht. Maar laten we eerst even kijken naar de overige onderdelen op deze pagina.

Als eerste kun je een naam invoeren voor het contactformulier (1). Dit is puur voor jezelf, zodat je het formulier makkelijk kunt herkennen. Deze wordt verder niet gebruikt.

Vervolgens zie je een zogenaamde shortcode (2). Als het formulier straks af is gebruiken we deze code om het formulier in een pagina, bericht of widget in te voegen.

Daaronder zie je enkele tabbladen (5). Hier kom ik zo op terug.

Velden toevoegen in Contact Form 7

Onder de tabbladen zie je buttons voor alle soorten velden die je kunt gebruiken (3). Hiermee kun je bijvoorbeeld een gewoon tekstveld invoegen, maar je kunt ook speciale velden gebruiken waarin de gebruiker bijvoorbeeld alleen een e-mailadres of telefoonnummer kan invoeren. Als er in het e-mailveld bijvoorbeeld een @ teken ontbreekt zal er een foutmelding gegeven worden, evenals wanneer een telefoonveld letters bevat. Je kunt ook selectievakjes of keuzerondjes gebruiken.

Contact Form 7 handleiding veld invoegenAls je op zo’n button klikt om een veld in te voegen verschijnt een venster waar je een aantal opties hebt. Welke opties verschilt per soort veld, maar je kunt er in elk geval voor kiezen om een veld verplicht te maken en een naam invullen. Dat laatste is niet verplicht en is verder niet zichtbaar voor de bezoeker, maar wel aan te raden zodat je het veld makkelijker herkent bij de volgende stap.

Meestal kun je ook een standaard waarde invullen. Bij mijn contactformulier heb ik bijvoorbeeld een tekstgebied met als standaard waarde “Vermeld hier relevante informatie enz…” en aangezien ik het vakje “Deze tekst gebruiken als tijdelijke aanduiding van het veld” heb aangevinkt is de standaard waarde een zogenaamde placeholder, tekst die automatisch verdwijnt wanneer de gebruiker iets in het vak typt.

De rest van de opties zoals ID en class kun je negeren, dat is bedoeld voor meer geavanceerde gebruikers.

Omschrijving bij het veld invoeren

Contact Form 7 handleiding velden admin vs websiteAls je klaar bent klik je op “tag invoegen”. Dit voegt het veld toe waar de gebruiker de gegevens kan invullen (4), maar de omschrijving (2) moet je zelf handmatig toevoegen.

Ten eerste zie je dat ieder onderdeel (1) begint met <label> en wordt afgesloten met </label> (of met <p> en </p>). Dat zorgt ervoor dat er een stukje witruimte na ieder onderdeel wordt ingevoegd.

Na de <label> (of <p>) typ je de tekst die getoond moet worden boven het invulveld (3), bijvoorbeeld “je naam” en “je e-mail”.

Na het invulveld typ je </label> (of </p>) om het onderdeel af te sluiten.

Het formulier wordt altijd afgesloten met <p>[submit “Verzenden”]</p> (5). [submit] zorgt ervoor dat er een button verschijnt waarmee het formulier verzonden kan worden, en de tekst die je tussen de aanhalingstekens plaatst is de tekst die op de button wordt weergegeven. Dat is in dit geval dus “Verzenden”, maar daar kun je ook een andere tekst typen.

Stap 4 : De e-mail template aanpassen

Nu we ons formulier helemaal af hebben is het tijd om de e-mail template aan te passen. Dit is 1 van de onderdelen die ervoor zorgen dat Contact Form 7 wat minder gebruiksvriendelijk is: we moeten namelijk alle velden die we in stap 3 hebben aangemaakt ook handmatig in de e-mail template verwerken. Als we dat niet doen zullen de ingevulde gegevens namelijk niet verzonden worden. Veel andere contactformulier plugins doen dit automatisch.

Contact Form 7 handleiding email templateOm bij de e-mail template te komen klik je eerst op het tabblad e-mail (1). Je ziet dan bovenaan alle velden staan die we in stap 3 hebben aangemaakt (2). De velden die nog niet in de e-mail template staan zijn dik gedrukt.

Nu moeten we dus zorgen dat alle velden terugkomen bij “bericht inhoud”. De standaard velden [your-name] (de naam van de klant), [your-email] (het e-mailadres van de klant), [your-subject] (het onderwerp dat de klant invult) en [your-message] (het tekstgebied onder “je bericht”) zijn al in de e-mail template verwerkt, dus we hoeven alleen de velden die we in stap 3 extra hebben aangemaakt toe te voegen.

Dat zijn in dit geval dus “jouw eigen tekstveld” en “jouw eigen checkbox”. Je kunt daar ook een andere tekst gebruiken, zolang de code tussen [ ] maar hetzelfde is als die in het formulier. Die kun je dus het beste gewoon copy/pasten van bovenaan de pagina (2).

De overige gegevens (aan, van, onderwerp en aanvullende kopteksten) kun je meestal gewoon op de standaard waarden laten staan, al kun je bijvoorbeeld bij onderwerp ook zelf een vast onderwerp invullen zoals “aanvraag via website” of zo.

Wat is E-mail (2)?

Dat is een tweede e-mail template. Die heb je niet perse nodig, maar veel mensen gebruiken deze template als autoresponder.

Berichten en aanvullende instellingen

Als je op het tabblad “berichten” klikt zie je welke meldingen bezoekers te zien krijgen als bevestiging of wanneer er iets fout gaat. Deze kun je in principe gewoon laten staan, al gebruik ik meestal iets vriendelijkere teksten. Het tabblad aanvullende instellingen is voor geavanceerde gebruikers.

Stap 5 : Shortcode toevoegen op een pagina

Contact Form 7 plaatsen op paginaDe laatste stap is het toevoegen van de shortcode op een pagina of in een bericht. Weet je het nog? Deze vind je in de blauwe balk bovenaan de pagina (nummer 2 bij stap 3) of als je op “contact” klikt (nummer 3 bij stap 2). Kopieer deze, ga vervolgens naar de pagina waar je het contactformulier wilt toevoegen en plak de shortcode op de plek waar het contactformulier moet komen.

Andere artikelen over dit onderwerp op Bobs blog

Over Bob de webbouwer

Bob de webbouwer inhuren

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een workshop over dit onderwerp te verzorgen.

Hulp nodig? Vraag direct een vrijblijvende offerte aan!

Vragen, opmerkingen of aanvullingen? Laat gerust een reactie achter!

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *