Share on facebook
Share on twitter
Share on linkedin

Een contactformulier maken? Gebruik Contact Form 7!

Als jij een website hebt, wil je natuurlijk dat de bezoeker makkelijk contact kan opnemen. Het kan bijvoorbeeld zijn dat hij een vraag heeft over een product of dienst die jij levert, of misschien heeft hij wel een vraag over een bepaald artikel die jij geschreven hebt. Gelukkig zijn er verschillende WordPress plugins waarmee je een contactformulier kan maken. In dit artikel vertel ik hoe jij een contactformulier maakt met de Contact Form 7 plugin.

De Contact Form 7 plugin installeren

Als je bent ingelogd in WordPress, ga je in het linker menu naar Plugins en klik je vervolgens op de knop Nieuwe Plugin (zie onderstaande afbeelding).

Contact form 7 installeren

Nadat je daar op geklikt hebt, kom je op de pagina waar jij nieuwe plugins kunt installeren voor jouw website. Rechts bovenin beeld staat Plugins zoeken. Daar zoek je naar Contact Form 7. Vervolgens krijg jij een overzicht te zien met allerlei plugins waarmee jij een contactformulier kunt maken. In ons geval installeren wij Contact Form 7 (het eerste zoekresultaat). Klik op Nu installeren. De installatie wordt gestart. Vervolgens klik je op Activeren

De Contact Form 7 plugin activeren

Aan de slag met de Contact Form 7 plugin

Nu je de Contact Form 7 plugin geactiveerd hebt, kun je aan de slag met de plugin. Links in het menu zie jij nu het extra kopje Contact. Daar klik je op. Vervolgens zie jij dat er al een contactformulier is aangemaakt. Dit heeft de plugin automatisch voor jou gedaan. Jij kan ervoor kiezen om dit contactformulier aan te passen, of om er zelf een te maken. Ik zal voor het eerste gaan als ik jou was. Dat bespaart veel tijd en moeite. In dit artikel laat ik jou zien hoe je het formulier kunt aanpassen en hoe je invoervelden toevoegt en verwijdert.

Lees ook: WordPress review (onafhankelijk) | Wat vinden wij van WordPress?

Het contactformulier bewerken met Contact Form 7

Nu ga ik het contactformulier, die de plugin automatisch aangemaakt heeft, bewerken. Ik klik met mijn muis op: Contactformulier 1.

contactformulier bewerken

Vervolgens opent er een scherm waarin jij het contactformulier kunt bewerken. Nu ziet het er allemaal wat technischer uit. Je ziet een shortcode, waarmee jij het contactformulier in een pagina kan zetten, je ziet allerlei tabbladen en je ziet de code waarmee het formulier is opgebouwd. Kortom: het lijkt allemaal wat ingewikkelder. Om verder te kunnen gaan leg ik jou daarom de belangrijkste begrippen uit.

Uitleg van de begrippen in Contact Form 7

uitleg contact form 7

(1) = De titel die jij het contactformulier meegeeft. Dit is puur voor jezelf; niemand anders zal dit zien. De titel is vooral belangrijk als jij meerdere contactformulieren gaat aanmaken. Door het gebruik van duidelijke titels houd je het voor jezelf overzichtelijk.  

(2) = De shortcode van het contactformulier. De shortcode gebruik jij om het contactformulier toe te voegen aan een bepaalde pagina. Hoe je dat precies doet (is niet lastig), vertel ik jou later in dit artikel.

(3) = Het tabblad waar ik mij nu bevind. Hier heb jij de mogelijkheid om het formulier aan te passen naar eigen wens.

(4) = het tabblad waar jij het e-mail sjabloon kunt bewerken. Niet alleen de tekst van de bericht inhoud kan jij bewerken; jij kunt ook tags toevoegen en aanpassen, zodat de opbouw van de doorgestuurde contactaanvraag er anders uit komt te zien. Ook kun je hier aangeven naar welk mailadres de contactaanvraag doorgestuurd mag worden.

Het tabblad mail

Het tabblad Mail.

(5) =Het tabblad waar jij berichten kunt bewerken. Dit zijn de berichten die mensen te zien krijgen nadat zij contact hebben opgenomen. Als het bericht succesvol verzonden is, staat er bijvoorbeeld: ‘Bedankt voor uw bericht; het is verzonden’ en wanneer het niet kan worden verzonden staat er: ‘Er is een fout opgetreden bij het versturen van het bericht; probeer het later nog eens’. Deze teksten kun jij helemaal naar eigen wens aanpassen.

Het tabblad berichten

Het tabblad Berichten.

(6) = Het tabblad aanvullende instellingen. Dit wordt vrij weinig gebruikt. Hiervoor heb je bovendien kennis nodig van codetalen. Dan kun je er bijvoorbeeld voor zorgen dat alleen de gebruikers die ingelogd zijn, toegang hebben tot het contactformulier. Mocht je nou geen kennis hebben van codetalen? Lees dan dit artikel. Hierin worden verschillende codes besproken, waarmee jij alsnog het contactformulier kunt aanpassen.

De knoppenbalk en de code

(7) = De knoppenbalk. Hier zie je veertien invoegmogelijkheden voor het contactformulier. Wat welke knop precies inhoudt en wat je allemaal kunt invoegen in het contactformulier, bespreek ik later in dit artikel.

(8) = De code van het formulier. Door middel van de knoppenbalk kun jij gemakkelijk de code aanpassen. Hiervoor heb jij verder geen kennis nodig van programmeertalen. Ook hier ga ik later nog verder op in.

Invoervelden toevoegen met de knoppenbalk

Jij hebt nu enige kennis van de Contact Form 7 plugin. Deze kennis zorgt ervoor dat ik nu de verschillende invoervelden kan uitleggen en vervolgens kan laten zien hoe je deze toevoegt aan het contactformulier.

Knoppenbalk contact form 7

De verschillende invoervelden ga ik uitvoerig behandelen.

Tekst

Met dit veld kan jij de gebruiker een tekst laten invullen. Vrij logisch. Maar aan dit tekstveld kan jij ook het een en ander aanpassen.

Tekst in contact form 7

Zo kun je bijvoorbeeld aanvinken of de gebruiker verplicht iets moet neerzetten bij dit invoerveld. Ook kun je de naam van het tekstveld veranderen (deze naam zien jouw bezoekers niet). Daarnaast kun je een voorbeeldtekst gebruiken en kun je de naam van de auteur vereisen.

E-mail

Ook hier kun je, net als bij alle andere invoervelden, aangeven of de gebruiker verplicht iets moet invullen bij het invoerveld. Voor de rest is er niet zo veel anders als bij het tekstveld hierboven het geval is. Wel kun je nu het mailadres van de auteur vereisen, in plaats van de naam van de auteur.

URL

Hier kan de gebruiker een webadres invullen. Ook hier kan je weer invullen of het verplicht is of niet. Daarnaast kun je, net als bij de andere invoermogelijkheden, de standaardwaarde aanpassen.

Tel

Bij dit invoerveld kan de gebruiker zijn telefoonnummer invullen. Net als bij de rest van de invoervelden kun je aangeven of het verplicht is. Ook hier kun je de standaardwaarde aanpassen.

telefoonnummer formulier

Je kunt hier hetzelfde aanpassen als bij de vorige invoervelden.

Getal

Dit veld vereist wel iets meer uitleg. Hier kun je niet alleen aangeven of het veld verplicht is, maar ook wat voor veldtype het moet zijn.

Hiervoor kun je kiezen uit de mogelijkheden: (Getalveld – spinbox) en (Slider).

Het (Getalveld – spinbox) gebruik je als je de bezoeker zelf de mogelijkheid wilt geven om een getal in te voeren.

De (Slider) gebruik je als je wilt dat de gebruiker een getal kan selecteren.

Aan beide kun je een bereik toevoegen. Dit betekent dat een gebruiker kan kiezen binnen een bereik van twee getallen. Denk bijvoorbeeld aan een waarderingscijfer (bereik van 0-10) of aan een leeftijd (vaak wordt het bereik hiervoor ingesteld op 0-99).

Leeftijd contactformulier

Een Getalveld – spinbox waarin jij een getal kunt invoeren tussen 0 en 100.

Datum

Bij dit invoerveld kan de gebruiker een datum invullen. Dit kan handig zijn als er iets is voorgevallen op een bepaalde datum. Als de gebruiker dan een klacht heeft bijvoorbeeld, kan hij door middel van dit veld zijn klacht verder specificeren. Ook hier kan het bereik worden aangepast.

Tekstgebied

Dit lijkt heel erg op het Tekstveld. Toch is er een verschil. Het tekstveld wordt vaak gebruikt voor het invullen van bijvoorbeeld een naam of een onderwerp. Het Tekstgebied is een groter vlak en wordt daarom vaak gebruikt voor het plaatsen van een bericht.

Tekstgebied toevoegen

Uw naam = een Tekstveld

Uw bericht=een Tekstgebied

Dropdown-menu

Dit is een veld die je niet heel veel voorbij ziet komen bij contactformulieren op websites. Bij webshops zie je het wel vaker voorbij komen. Bijvoorbeeld als jij een overhemd gaat bestellen; wil jij maat S, M, L, of XL? Hiervoor wordt vaak gebruikgemaakt van een dropdown-menu. Je hebt de keuze uit meerdere opties. In de Contact Form 7 plugin kun je heel makkelijk aangeven wat de opties zijn waaruit de gebruiker kan kiezen.

Dropdown-menu

Hierboven zie je een Dropdown-menu (Bron: zalando.nl).

Selectie-vakjes

Ook dit zie je sneller terug komen bij webshops, dan bij gewone websites. Als de gebruiker alleen contact wil opnemen, zal hij niet zo snel een ‘keuze’ hoeven maken. Hij heeft vaak een specifieke vraag die hij wil stellen en hoeft daarvoor eigenlijk alleen zijn naam en mailadres in te vullen, en natuurlijk de vraag die hij heeft.

Bij de selectie-vakjes kunnen de gebruikers meerdere vakjes aanvinken. Per regel geef je de gebruiker een keuzemogelijkheid (zie de foto hieronder).

Selectie-vakjes

Mocht je de gebruiker nou willen beperken tot één keuze, dan kun je beter gaan voor de Keuzerondjes.

Keuzerondjes

Bij de keuzerondjes ziet de gebruiker meerdere opties, net als bij de selectie-vakjes. Alleen nu kan de gebruiker maar één keuze maken; het is niet mogelijk om meerdere bolletjes te selecteren. Dit invoerveld wordt overigens ook weinig gebruikt bij contactformulieren. Bij bestelformulieren daarentegen, zie je wel dat er vaak gebruikgemaakt wordt van dit invoerveld.

Lees ook: Webshop maken met WordPress | De beste tutorials

Acceptatie

Met dit veld kun je de gebruiker ergens akkoord mee laten gaan, denk bijvoorbeeld aan de algemene voorwaarden. De voorwaarde die jij stelt, kun jij op ieder moment aanpassen in de Contact Form 7 plugin. Ook kan jij bepalen of de gebruiker verplicht akkoord moet gaan, of dat het een optie is. Vaak is dat eerste het geval.

voorwaarde accepteren

Quiz

Met de Contact Form 7 plugin is het zelfs mogelijk om een quiz te maken; deze plugin is van alle markten thuis. Ook dit is niet heel lastig. Je kunt gemakkelijk jouw vragen en antwoorden toevoegen aan het formulier.

quiz maken

Zoals je ziet is er wel een bepaalde manier hoe jij de vragen en antwoorden moet formuleren. Let daar goed op. Als jij wilt vragen hoe oud Jesse Commandeur is (ja, dat ben ik), doe je dat als volgt:

Hoe oud is Jesse Commandeur?|20

quiz vraag

Zo ziet dat er dan uit op het formulier. Bij Contact Form 7 is het overigens niet mogelijk om van dit veld een verplicht invoerveld te maken. Ook vind ik het er niet heel mooi uitzien. Daarom zou ik hiervoor een andere plugin gebruiken, bijvoorbeeld de Quiz And Survey Master plugin.

Bestand

Met de Contact Form 7 plugin kan jouw bezoeker ook een bestand versturen, mits je dit invoerveld toevoegt aan het contactformulier. In de plugin kun jij aangeven wat de maximale bestandsgrootte is, en welke bestandstypes toegestaan zijn. Let op dat het bestandsgroottelimiet in bytes vermeld staat. Wil jij dat jouw gebruiker een bestand van 1 MB kan uploaden? Dan zijn dat 1.000.000 bytes.

Verzenden

Dit spreekt voor zich; het zorgt ervoor dat de gebruiker het contactformulier kan verzenden. Door het label aan te passen kun je ‘verzenden’ veranderen in een ander woord, bijvoorbeeld: ‘versturen’.

 reCAPTCHA (Contact Form 7)

De reCAPTCHA controleert of jouw gebruiker een echte bezoeker is. Dit wordt gecontroleerd aan de hand van een bepaalde test of vraag. Op de foto hieronder zie je een voorbeeld van een reCAPTCHA. Komt het al bekend voor?

reCAPTCHA contact form 7

Nou is het jou misschien opgevallen dat de reCAPTCHA niet te vinden is in de knoppenbalk. Dat klopt. Voordat jij de reCAPTCHA kunt toevoegen aan een contactformulier, moet jij eerst onderstaande stappen uitvoeren.

1. Vraag een API Key aan bij Google. Dat doe je hier.

2. Ga in het menu van WordPress naar (Contact – Integratie).

3. Vul de API Key in.

Hoe je een nieuw invoerveld toevoegt aan het contactformulier van Contact Form 7

Nu ik alle definities heb gegeven en de knoppenbalk uitvoerig ben langs gegaan, kan ik jou vertellen hoe je de invoervelden toevoegt aan het contactformulier. Het is niet lastig, maar wel belangrijk om goed op te letten.

Het standaard contactformulier ziet eruit als volgt. Deze heeft de plugin automatisch voor jou aangemaakt.

formulier

Het formulier in de backend.

contactformulier op de website

Het formulier in de frontend.

Het standaardformulier in Contact Form 7 aanpassen

We gaan nu het standaardformulier aanpassen. Hiervoor ga ik onder Uw naam een nieuw invoegveld toevoegen. Daar wil ik Uw geboortedatum hebben staan. Daarvoor ga ik het invoerveld Datum toevoegen aan het contactformulier. Mocht jij een ander invoegveld willen toevoegen aan het contactformulier, dan kan dat natuurlijk ook. De wijze waarop je dat doet is in principe hetzelfde.

Het invoerveld ‘datum’ toevoegen aan het contactformulier

Hiervoor ga ik bij de knoppenbalk naar Datum. Daar vink ik aan dat het een verplicht veld is. Vervolgens vul ik het bereik in. In dit geval doe ik 1920-2020, omdat de kans klein is dat iemand ouder dan 100 jaar mijn website bezoekt. Daarna druk ik op Tag invoeren.

contactformulier aanpassen

De tag zie je vervolgens verschijnen in het formulier [date* date-85 min:1920-05-17 max:2020-05-17].

De invoervelden een tekst meegeven

Zoals je in het formulier ziet, begint ieder standaard onderdeel met <label> en eindigt ieder onderdeel met </label>. Dit komt doordat er aan ieder invoerveld een tekst meegegeven wordt. Het ziet eruit als volgt:

<label> Uw e-mail adres (verplicht)

    [email* your-email] </label>

Uw e-mail adres (verplicht) = de tekst die jij het invoerveld meegeeft.

[email* your-email] = de tag waardoor het voor de gebruiker mogelijk wordt om zijn of haar e-mailadres in te vullen.

Het invoerveld ‘datum’ een tekst meegeven

Nu gaan wij op dezelfde manier het invoerveld Datum een tekst meegeven. Hiervoor beginnen we met het label. Vervolgens plaatsen we de tekst en de tag, en sluiten we weer af met het label.  

Dan krijgen we dit:

<label> Uw geboortedatum (verplicht)

   [date* date-85 min:1920-05-17 max:2020-05-17] </label>

Je voegt het toe aan het formulier, op de plek waar jij het wilt hebben staan. Ik plaats het onder het invoerveld Naam. In de backend ziet dat er dan zo uit:

een tekst meegeven

Ook op de site ziet het er goed uit (zie de foto hieronder). Hoe jij het contactformulier toevoegt aan een bericht of pagina vertel ik jou in de volgende alinea.

het resultaat

Het contactformulier toevoegen aan een bericht of pagina met Contact Form 7

Als jouw contactformulier af is kun jij hem toevoegen aan een bericht of pagina. Hiervoor kopieer je de shortcode die boven het formulier vermeld staat.

Shortcode contact form 7

Vervolgens maak je een nieuw bericht, of een nieuw pagina, aan.

Je drukt op het plusje om een nieuw element toe te voegen. Je zoekt naar: shortcode, en voegt dit element toe. De shortcode van het contactformulier kun je nu in de widget plaatsen.

Shortcode toevoegen Contact Form 7

Nu hoef je de pagina of het bericht alleen nog maar te publiceren. En klaar is kees!

De contactgegevens op de juiste manier doorsturen met Contact Form 7

De bezoeker van jouw website heeft nu de mogelijkheid om een contactformulier in te vullen, maar als jij de contactgegevens niet (juist) kan ontvangen, heeft dat natuurlijk niet zoveel zin. Daarom gaan we nu het e-mail template aanpassen.

Hiervoor gaan we in het menu weer naar Contact. Vervolgens klik je op het contactformulier die we zojuist aangepast hebben. Je gaat naar het tabblad Mail.

Omdat wij een nieuw invoerveld hebben toegevoegd aan het formulier, moeten wij hier nu iets aanpassen. Als je niks hebt aangepast aan het formulier, hoef je hier in principe niet naar te kijken. Let er wel op dat jouw mailadres klopt.

e-mail sjabloon bewerken

We moeten er nu voor zorgen dat alle velden terugkomen in het bericht. De velden die nog ontbreken, zijn de velden die jij nieuw hebt aangemaakt (deze zijn dik gedrukt). In ons geval is dat het invoerveld Datum. Zoals het e-mail sjabloon nu ingesteld staat, zou dit niet mee worden genomen in de inhoud van het bericht die doorgestuurd wordt naar jouw mail; jij weet dan niet wat de geboortedatum van jouw bezoeker is.

Daarom kopiëren we de tag (date-85) die bovenaan dikgedrukt staat en plakken we die vervolgens in Bericht inhoud. Plaats het op de plek waar het voor jou logisch oogt.

Als je dat gedaan hebt, kun je checken of de tag op de juiste manier is toegevoegd aan het sjabloon. Wanneer de tag op de juiste manier is toegevoegd, zal die bovenaan de pagina niet meer vetgedrukt staan. Als die nog wel vetgedrukt staat, betekent het dat je hem niet op de juiste manier hebt toegevoegd.

Lees ook: Hoe jij een nieuwe gebruiker laat inloggen op jouw WordPress website

Tot slot

Als het goed is kun jij nu een contactformulier maken met de Contact Form 7 plugin. Is het nog altijd niet gelukt, of heb je nog vragen? Stel ze dan in de reacties onder dit artikel of neem contact met ons op

Onze meest gewaardeerde artikelen

Meer artikelen