Een contactformulier maken in WordPress met Contact Form 7

Wanneer je een website hebt gebouwd met behulp van WordPress-software wil je misschien vroeg of laat ook een contactformulier op een pagina plaatsen. Een contactformulier ziet er namelijk een stuk professioneler uit dan enkel tekst, waarin wordt doorverwezen naar een e-mailadres. Een contactformulier nodigt lezers tevens sneller uit om een vraag te stellen of om een order te plaatsen. Maak dus een contactformulier aan en maak het hiermee voor de bezoekers van je website makkelijker om met jou in contact te komen. Een zeer goed werkend en gratis contactformulier is Contact Form 7.

Contact Form 7, een gratis plugin voor WordPress

Een geweldige gratis plugin voor WordPress is Contact Form 7. Om deze plugin te gebruiken moet je tijdens installatie wel even goed naar alle instellingen kijken, maar het meeste werk is al door de maker van deze plugin voor jou gedaan. De Japanse maker heet Takayuki Miyoshi en hij heeft deze plugin in 2007 ontwikkeld. In 2012 was de plugin al 6 miljoen keer gedownload, er kan dus gerust worden gesteld dat Contact Form 7 dé standaard is onder de gratis WordPress plugins. Ter volledigheid: het gaat hier dus om een plugin bestemd voor de geïnstalleerde versie van WordPress, dus niet voor de gratis 'cloud'-versie van WordPress*.

* Ook de gratis cloud-versie van WordPress beschikt over de mogelijkheid om een contactformulier aan te maken, dit valt echter buiten het bestek van deze tutorial

Installeren van Contact Form 7

Er vanuit gaande dat je al wat kennis hebt van WordPress moet je het volgende doen om Contact Form 7 te installeren. Download Contact Form 7 op de officiële website van WordPress. De download betreft een ZIP-bestand, pak deze op je harde schijf uit en plaats dan de complete map met de naam 'contact-form-7' en onderliggende mappen in de map met WordPress plugins op de server van jouw website. Deze map heet meestal 'wp-content' en daaronder is de map 'plugins' te vinden.

Als dat gedaan is ga dan in WordPress naar het Dashboard en klik vervolgens op Plugins. De nieuwe plugin Contact Form 7 is inmiddels zichtbaar maar moet nog wel worden geactiveerd. Activering kan door op 'activate' te klikken. Na activering verschijnt op het Dashboard links in het menu het woord Contact (met een envelopje ervoor), hier moet je zijn om alle instellingen van Contact Form 7 aan te passen en het contactformulier aan te maken. Aanpassen doe je door op 'edit' te klikken, te zien onder 'Contact Form 7'. Je kan hier ook komen door vanuit Plugins onder 'contact form 7' op 'settings' te klikken, en dan vervolgens op 'edit'.

Contactformulier aanmaken

Wanneer op 'edit' is geklikt verschijnt een veld met verschillende mogelijkheden. Je ziet dat jouw contactformulier waarschijnlijk zo heet: [contact-form-7 id="70" title="Contact form 1"]
met als titel of naam Contact form 1. Dit kun je desgewenst aanpassen door in dit veld een andere naam te typen, bijvoorbeeld:
[contact-form-7 id="70" title="Mijn verkopen"]

Het veld Form

We gaan nu alle velden bekijken die vaak aangepast moeten of kunnen worden. Het eerste veld heet 'Form', hier kun je eigenlijk alles wel laten staan zoals het is, tenzij je de namen van de invulvelden van het contactformulier wilt aanpassen. Bijvoorbeeld 'Your Name (required)' kun je aanpassen in het Nederlands: 'Uw naam (verplicht)'. 'Your message' kun je veranderen in 'Opmerkingen' of in 'Jouw bericht'. 'Your email' in 'Jouw e-mail', en 'Your subject' in 'Jouw onderwerp'. Teksten tussen de vierkante haakjes moet je ongewijzigd laten.

Het veld Mail

Het tweede veld, en wat ingewikkelder is het veld 'Mail', alle subvelden worden een voor een besproken.

To

Bij 'To' komt het e-mailadres te staan waarop jij wilt dat berichten, die door bezoekers op het contactformulier zijn aangemaakt, naar toe worden verzonden. Een prima e-mailadres is bijvoorbeeld info@jouwwebsite, waarbij 'jouwwebsite' in deze tutorial synoniem staat voor de naam van jouw eigen website.

From

Bij 'From' staat standaard [your-name] <wordpress@jouwwebsite>, dit kun je heel goed veranderen in [your-name] <info@jouwwebsite>. Het veld 'From' zorgt ervoor dat in een binnenkomende e-mail goed te zien is van wie het bericht afkomstig is.

Subject

Bij 'Subject' staat normaal gesproken [your-subject], hierdoor wordt in de e-mail, die jij als beheerder van jouw website binnenkrijgt, bij het onderwerp weergegeven wat de bezoeker in het contactformulier bij 'Subject' of 'Jouw onderwerp' heeft ingevuld. Bijvoorbeeld: 'vraag over een product'.

Additional Headers

Bij 'Additional Headers' staat 'Reply-To: [your-email]', het zorgt ervoor dat indien je een binnenkomend bericht handmatig beantwoordt, automatisch het e-mailadres van de bezoeker wordt gekozen. Gegevens in dit veld kun je dus gewoon ongewijzigd laten.

Message Body

De tekst bij 'Message Body' kun je ongewijzigd laten maar mag naar wens ook worden aangepast. Hier staan alle gegevens van de bezoeker middels de velden [your-name] [your-email] [your-subject] nog eens een keer weergegeven en niet onbelangrijk; het bericht dat de bezoeker in het veld [your-message] heeft ingevuld. Dit veld is dus bedoeld om de beheerder van de website alle gegevens van de bezoeker in de binnenkomende e-mail te laten zien.

Het veld Mail 2, de automatische reply

Nu wordt interessanter, want in het veld 'Mail 2' kan met een automatische reply aan een bezoeker, die de moeite heeft genomen een bericht te versturen, meteen een bericht worden teruggestuurd, zónder dat jij daar zelf iets voor hoeft te doen. Dit automatische bericht kan een bedankje of vriendelijke groet zijn, óf een bevestiging dat een bestelde aankoop zo spoedig mogelijk zal worden verzonden. Zet nu een vinkje bij Mail 2 om alle invulvelden te laten verschijnen.

To

Achter 'To' staat standaard [your-email] ingevuld, dit kun je gewoon laten staan, hierdoor wordt immers het automatische bericht teruggestuurd naar het e-mailadres dat de bezoeker heeft ingevuld.

From

Bij 'From' kun je jouw naam plus <info@jouwwebsite> neerzetten, zo krijgt de ontvanger netjes jouw naam plus het afkomstige e-mailadres te zien. Als deze automatische e-mail vanuit jouw eigen e-mailadres info@jouwwebsite wordt verstuurd, dan moet je je wel bedenken dat dit verzonden bericht niet in je eigen persoonlijke e-mailprogramma te zien is, het bericht wordt immers meteen vanuit de server van jouw website verzonden.

Subject

Bij 'Subject' kun je nog wat aanvullingen schrijven, bijvoorbeeld de aanvulling 'Uw Bestelling /' in combinatie met [your-subject].

Additional Headers

Het veld 'Additional Headers' kun je ongewijzigd laten.

Message Body

Bij 'Message Body' kun je uiteraard schrijven wat jij als websitebeheerder wilt, een vriendelijke bedankje is meestal wel op zijn plaats, of een stukje uitleg over wat een koper na bestelling van een aankoop allemaal kan verwachten. Je kan hier ook door middel van 'Jouw onderwerp [your-subject]' en 'Jouw bericht [your-message]' nog een keer een overzicht geven van wat de bezoeker allemaal aan tekst heeft ingediend, dan ontvangt deze een kopie van het bericht.

Messages en Additional Settings overslaan en dan Save

De velden Messages' en 'Additional Settings' vallen buiten het bestek van deze korte tutorial en kun je op zich wel overslaan. 'Messages' bevatten onder andere meldingen die een bezoeker te zien krijgt wanneer op het contactformulier een veld verkeerd of niet is ingevuld, deze meldingen zijn standaard in het Engels. Wanneer jouw website in het Nederlands is kun je deze meldingen eventueel naar het Nederlands vertalen. Sla nu alle instellingen op door middel van Save, het is nu tijd om het contactformulier op je WordPress pagina te plaatsen.

Het plaatsen van het contactformulier

Bovenaan alle hoofdvelden zie je nog steeds deze code staan: [contact-form-7 id="70" title="Mijn verkopen"] of iets dergelijks. Deze code hoef je enkel te kopiëren en te plakken op de gewenste pagina van jouw WordPress website, en dat is alles. Via Preview Changes kun je in WordPress goed zien of het formulier netjes op de pagina staat.

Tot slot: het contactformulier uitproberen

Probeer het contactformulier nu uit met een aantal eigen e-mailadressen (indien je die hebt). Als alles meezit lukt het versturen van een bericht via het contactformulier meteen en krijg je de melding te zien dat het bericht succesvol werd verzonden. Als er een foutmelding komt dan kan het zijn dat je toch nog een aantal instellingen niet helemaal goed hebt staan. Denk bijvoorbeeld aan foutieve e-mailadressen; het is aan te raden alleen e-mailadressen te gebruiken die dezelfde uitgang hebben als jouw website. Maar het kan ook zijn dat er iets mankeert aan de instellingen van jouw website-hoster, in dat geval moet je naar je website-hoster gaan voor meer informatie. Als alles wel goed werkt dan krijg je in je eigen e-mailprogramma twee mailtjes binnen: de eerste is het bericht dat je als pseudo-bezoeker op je eigen website had ingevuld en verzonden, en de tweede mail is de automatische reply. Bekijk beide e-mails goed, dan kun je meteen zien of je nog instellingen of teksten wilt aanpassen. Op de website van de maker van Contact Form 7 vind je meer informatie over deze plugin.