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 😉
Persoonlijk heb ik ervoor gekozen alle contactformulieren om te zetten naar Fluent Forms, een andere gratis contactformulier plugin die ook veel gebruiksvriendelijker is.
In dit artikel lees je:
- Dat je Contact Form 7 een plugin is die je eerst moet installeren
- Dat de plugin standaard al een eenvoudig contactformulier aanmaakt
- Hoe je het standaard contactformulier kunt aanpassen aan jouw wensen (o.a. velden toevoegen)
- Dat je deze aanpassingen ook moet verwerken in de e-mail template en hoe je dat doet
- Dat E-mail (2) een extra e-mail template is die je als autoresponder kunt gebruiken
- Dat je bij “berichten” en “aanvullende instellingen” niet perse iets hoeft aan te passen
- Dat je het contactformulier met een shortcode toevoegt op een pagina of in een bericht
- Hoe je reCAPTCHA anti spam toevoegt, en hoe je het reCAPTCHA logo verbergt op je site
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
Je 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
Het 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.
Als 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
Als 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></p> (5). 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.
Om 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 (de naam van de klant), (het e-mailadres van de klant), (het onderwerp dat de klant invult) en (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).
Als je het formulier hebt opgeslagen zouden er bovenaan bij (2) geen dikgedrukte velden meer moeten staan. Als dat wel het geval is zijn die velden nog niet in de e-mail template verwerkt.
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
De 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.
reCAPTCHA anti spam toevoegen
Vroeg of laat zul je helaas regelmatig spam via je contactformulier ontvangen. Gelukkig zijn er verschillende manieren om dit tegen te gaan.
De bekendste anti spam maatregel is Google’s reCAPTCHA. De meest recente versie daarvan is ook nog eens zeer gebruiksvriendelijk, aangezien die onzichtbaar zijn werk doet.
Het implementeren daarvan is wel wat lastiger, maar ook geen rocket science 😉
- Klik in het WordPress admin menu op “Contact” en vervolgens op “Integratie”.
- Klik vervolgens onder “reCAPTCHA” op “Setup Integration”.
- Je ziet nu 2 vakken, “site-sleutel” en “geheime sleutel”.
- Deze sleutels moet je eerst aanmaken. Ga daarvoor naar www.google.com/recaptcha/.
- Klik rechtsbovenaan op “admin console” en log in met een Google account (gmail of youtube).
- Klik, indien nodig, op het plus teken in het lichtblauwe vak bovenin.
- Vul bij “label” de naam van je website in.
- Kies bij “ReCAPTCHA type” voor “reCAPTCHA V3”.
- Voeg bij domeinen de website(s) toe waarop je deze sleutel wilt gaan gebruiken, zonder https://www.
Dus ik zou daar alleen bobdewebbouwer.com invullen, in plaats van https://www.bobdewebbouwer.com. - Accepteer de voorwaarden en klik op “verzenden”.
- Je krijgt nu de sleutels te zien. Kopieer deze en plak die bij de vakken uit stap 3. Klik nu op “save changes”.
reCAPTCHA logo verwijderen
Als alles goed gegaan is zie je nu rechts onderaan op je website een reCAPTCHA logo. Hartstikke fijn als bevestiging dat het allemaal werkt natuurlijk, maar dat wil je natuurlijk liever niet op je site hebben. Gelukkig kun je die reCAPTCHA badge met 1 regeltje CSS code verbergen. Ga in de WordPress admin naar weergave –> customizer en klik vervolgens op “extra CSS”. Plak daar de onderstaande regel code:
.grecaptcha-badge {
display: none;
}Klik nu op publiceren, dan is het reCAPTCHA logo als het goed is niet meer zichtbaar.
Geef een reactie