Contact Form 7 is een WordPress plug-in die het mogelijk maakt om formulieren op je website te plaatsen. Helaas heeft WordPress standaard geen formulier opgenomen in het CMS, daarom moeten we eerst een plug-in installeren. In deze korte handleiding leg ik uit hoe je Contact Form 7 op je website plaatst en in gebruik neemt.
Contact Form 7 Downloaden
Voordat we kunnen starten met de installatie moeten we Contact Form 7 eerst downloaden en uploaden. Er zijn twee mogelijkheden om dit te doen:
- De eenvoudigste manier is via de backend van je WordPress website. Je neemt de volgende stappen. De eerste stap is inloggen in WordPress. Vervolgens navigeer je aan de linkerkant naar Plugins en klik je op Nieuwe plugin. Het onderstaande scherm verschijnt:
Rechts boven staan een rode pijl. Vul in dit gedeelte Contact Form 7 in. Vervolgend klik je op Nu installeren. De plug-in wordt nu automatisch geinstalleerd. - Een andere methode om deze plug-in te downloaden en op je website te plaatsen is direct via WordPress. Dit is het adres: https://wordpress.org/plugins/contact-form-7/. Vanaf deze pagina kun je het bestand downloaden. Zodra het bestand op je pc staat, kun je hem uploaden naar WordPress. Deze optie staat bovenin de pagina, onder de knop Plugin uploaden. Contact Form 7 wordt nu geinstalleerd.
Contact Form 7 installeren
Nu de plug-in is toegevoegd aan je website, wordt het tijd om hem te installeren. Als alles goed is gegaan, dan is aan de linkerkant het icoon Contact toegevoegd.
Standaard staat er één formulier in, genaamd Contactformulier 1. Deze kun je aanpassen of verwijderen. Wij gaan nu een nieuw formulier aanmaken. Klik bovenin op Nieuwe toevoegen. In het onderstaande scherm kun je velden verwijderen en toevoegen.
Velden in het formulier wijzigen, verwijderen of toevoegen
Als je een nieuw formulier toevoegt, dan zie je dat Contact Form 7 standaard een aantal velden voor je heeft aangemaakt.
De velden die er in staan, zijn:
- Je naam. Bezoekers vullen hier hun naam in, dit veld is verplicht. Dit zie je door (verplicht), als mensen in dit veld niks invullen, dan wordt het formulier niet verzonden en krijgen ze een foutmelding te zien.
- Je e-mail. Bezoekers vullen hier hun e-mail adres in, ook dit veld is verplicht.
- Onderwerp. Hier kunnen bezoekers hun bericht een onderwerp geven. Deze is nu niet verplicht. Wil je echter dat ze verplicht een onderwerp invullen, dan voeg je (verplicht) achter onderwerp in.
- Je bericht. Mensen kunnen hier een bericht invullen. Ook hier kun je voor kiezen om dit verplicht te stellen. In de meeste gevallen is het verplicht stellen van dit veld wel aan te raden. Want anders krijg je alleen een naam en e-mail adres in je mailbox.
- Submit. Deze hoort in elk formulier thuis, want anders kunnen mensen de ingevulde informatie niet naar jouw verzenden.
Velden Wijzigen en verwijderen
De meeste onderdelen kun je eenvoudig aanpassen. Als je bijvoorbeeld Je naam wilt veranderen in alleen Naam, dan verwijder je heel simpel “Je”. Nu staat er straks in het formulier Naam i.p.v. Je naam.
Als je een veld niet relevant vindt, dan selecteer je deze vanaf <label> tot </label> en verwijder je deze door op backspace te klikken.
Velden toevoegen
uiteraard heb je de mogelijkheid om velden toe te voegen. In het geval van bijvoorbeeld een uitzendbureau kan het handig zijn als bezoekers hun CV kunnen uploaden. Als je dit veld wilt toevoegen dan plaatst je de cursor op de plek waar je het veld wilt toevoegen en klik je op bestand. Vervolgens wordt het volgende scherm zichtbaar:
De Naam heb je straks nodig in het email veld. Bij de Limiet moet je even opletten, want deze staat in bytes. De meeste mensen denken en handelen in MB’s, als je bijvoorbeeld wilt dat mensen tot maximaal 10mb mogen toevoegen dan vul je hier 10485760 bytes in. Het is overigens niet verstandig om deze limit leeg te laten, want dan kunnen spammers en hackers grote bestanden met virussen naar jouw mailbox uploaden. De Toegestane bestandstypes kun je naar eigen inzicht invullen. In het geval van een CV is een pdf en doc bestand waarschijnlijk voldoende. Als je bezoekers ook de mogelijkheid wil geven om afbeeldingen toe te voegen, dan kun je de JPG en PNG bestanden er bij zetten. De opmaak om deze bestanden toe te voegen, ziet er als volgt uit: pdf | doc | jpg | png . Als je dit hebt gedaan klik je op Tag invoegen.
Email instellingen
Nu je het formulier naar eigen inzicht hebt aangepast, moeten we de email instellingen goed zetten. Dit werk met de labels (tags) die we hebben gebruikt bij het aanmaken van het formulier. Het scherm E-mail zie je hieronder staan. Deze wordt intern meegezonden met een formulier. E-mail 2 word vaak gebruikt als autoresponder voor de bezoeker die het formulier heeft ingevuld.
Contact form 7 gebruikt automatisch bij “Aan” het email adres van de Admin. Dit adres heb je ingevoerd bij het installeren van WordPress. Als je een ander e-mailadres wilt gebruiken, dan kun je die hier invullen. Op dit email adres krijg je de formulieren binnen.
Het Van veld wordt gebruikt om de afzender in aan te geven. Standaard wordt je naam en het email adres weergegeven. Het meest logische is om de tag [your name] in ieder geval te laten staan.
Het Onderwerp kun je naar eigen inzicht invullen. Deze wordt geplaatst in de onderwerpregel van de mailbox.
Aanvullende kopteksten kun je gebruiken om mensen die het bericht ook moeten ontvangen toe te voegen. Om dit doen voeg je Cc of Bcc plus het email adres toe.
Bericht inhoud deze sectie geeft de inhoud van je bericht weer. Zoals je ziet kun je Tags gebruiken, maar tekst toevoegen is ook mogelijk.
Bestand bijlage is een belangrijke sectie om bestanden te ontvangen. In het de tab Formulier heb je een tag ingevoerd die het voor de bezoeker mogelijk maakt om [file – file 141] een file te uploaden. Als je deze mogelijkheid toevoegt krijgt het file elke keer een uniek nummer. 141 moet je dus vervangen voor dit unieke nummer.
Het contactformulier op je website plaatsen
Na het aanmaken van het formulier, gaan we deze plaatsen op de website. Dit werkt aan de hand van shortcodes. Je hoeft dus alleen een shortcode toe te voegen aan een pagina waarop jouw formulier zichtbaar moet zijn. Nadat je het formulier hebt opgeslagen wordt de shortcode zichtbaar onder Contactformulieren. De onderstaande code moet je kopiëren en plakken op de door jouw gewenste pagina.
Als alles goed is gegaan is Contact From 7 nu zichtbaar op je WordPress website. Het is verstandig om het formulier even te testen door jezelf een bericht te sturen.
Eventuele vragen kun je hieronder plaatsen.