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!

21 reacties op Contact form 7 handleiding – contactformulier voor je WordPress site

  1. Astrid Voet schreef:

    Hoe kan je in contact form 7 de velden naast elkaar krijgen op een formulier.

    Bijvoorbeeld voornaam en achternaam naast elkaar?

  2. Bob de webbouwer schreef:

    Hoi Astrid,

    Dat is helaas niet zomaar mogelijk, dan moet je echt HTML en CSS code gaan toevoegen. Je moet namelijk aan het veld voornaam en het veld achternaam een class toekennen en vervolgens in de CSS aangeven dat die class een breedte van 50% heeft ipv de normale 100% breedte. Dan komen ze dus naast elkaar in plaats van onder elkaar.

    Groeten van Bob

  3. DJ de Jong schreef:

    Hoi Bob,

    Goede uitleg. Kun je ook ergens de ingevulde contactformulieren terugvinden? Worden deze ergens opgeslagen?

    Alvast bedankt.

  4. Bob de webbouwer schreef:

    Dank je DJ 🙂

    Standaard worden de contactformulieren alleen per e-mail verzonden en dus niet opgeslagen in de database, maar de maker van Contact Form 7 heeft ook deze plugin ontwikkeld die dat wel mogelijk maakt.

    Groeten van Bob

  5. Annemien schreef:

    Hallo,
    Bij mijn formulier werkt alles maar…..
    Ik vind dat de er verticaal teveel tussen ruimte is. Kan ik dat ergens veranderen??
    Zie contact op de website.
    Vriendelijke groeten Annemien.
    B.V.D.

  6. Bob de webbouwer schreef:

    Hoi Annemien,

    Zo te zien heb je tussen ieder veld een witregel toegevoegd. Als je die weghaalt gaat het waarschijnlijk wel goed.

    Groeten van Bob

  7. Sanne schreef:

    Hoii, ik heb de plugin geinstalleerd, maar helaas blijft de tekst vh formulier wit… Ik heb een witte achtergrond, dus dat gaat m niet worden..
    Kan ik dit veranderen?
    Groetjes

  8. Bob de webbouwer schreef:

    Hoi Sanne,

    Normaal gebruikt CF7 gewoon de styling van het thema, dus als de rest van je tekst wit is zal dat in het formulier ook zo zijn. Als de rest van je tekst echter zwart is hoort dat in het formulier ook zo te zijn… Weet je zeker dat je bij stap 3 ook de tekst in het lichtblauwe kader (3) hebt ingevuld? Probeer dan eens onderstaande code in je custom CSS toe te voegen:

    .wpcf7 {color: #000 !important;}

    Dat zou ervoor moeten zorgen dat de tekst zwart wordt.

    Groeten van Bob

  9. Sanne schreef:

    Yoehoe Bob, met die CCS code werkt het!! Onwijs bedankt!

  10. Bob de webbouwer schreef:

    Haha wat een leuke reactie Sanne, fijn dat het gelukt is 🙂 !

  11. hans schreef:

    Hi, ik zou graag de datumopties willen beperken bij mijn formulier. Hoe stel ik in dat alleen data in de toekomst mogelijk zijn?

  12. Bob de webbouwer schreef:

    Hoi Hans,

    Dat kan volgens dit artikel door bij “bereik” de min (= minimale datum) op 0 te zetten.

    Groeten van Bob

  13. Natasja schreef:

    Hoihoi, ik zou graag een bedankt-pagina zien nadat er op de knop ‘verzenden’ is gedrukt. Ik lees op verschillende pagina’s dat dit mogelijk is maar ik krijg het niet voor elkaar 🙁

  14. Bob de webbouwer schreef:

    Hoi Natasja,

    De makkelijkste manier is met deze plugin.

    Groeten van Bob

  15. Harry schreef:

    Hoe kan ik de standaard weergegeven contactgegevens in contact formulier 7 wijzigen in mijn eigen contactgegevens?

  16. Bob de webbouwer schreef:

    Hoi Harry,

    Welke standaard contactgegevens bedoel je? In het e-mail tabblad kun je de afzender e.d. instellen.

    Groeten van Bob

  17. Harry schreef:

    Hoi Bob, Onderaan het contactformulier staat nu onder ‘vind ons’ een adres die ik graag wil aanpassen.

  18. Bob de webbouwer schreef:

    Ah ok… dat is geen instelling van het contactformulier maar een widget. Die vind je bij weergave –> widgets.
    Zie ook hoofdstuk 7.3 van mijn WordPress handleiding.

    Groeten van Bob

  19. Harry schreef:

    Super bedankt!!!

  20. Johan schreef:

    Hallo Bob,

    In CF7 hebben we een reserveringsformulier voor een dierenpension waarbij je meerdere dieren kan opgeven:Dierenpensionydermade.nl

    Invulveld :[radio Geslachteerstedier “mannelijk” “vrouwelijk”] is ineens een verplicht veld geworden , wat tot nu nooit zo was…..
    Aangezien we dit veld voor meerdere dieren gebruiken wordt het invullen van een formulier ineens heel lastig.

    Heb jij enig idee hoe dit te herstellen?

  21. Bob de webbouwer schreef:

    Hoi Johan,

    Dan staat er in de formulier template (stap 3 hierboven) waarschijnlijk een sterretje achter radio. Als je dat weghaalt is het niet meer verplicht.

    Groeten van Bob

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

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