By October 31, 2015 0 Comments Read More →

De doeltreffende kracht van Contact form 7 om het optimale eruit te halen

Contact Form 7 is een zeer krachtige gratis plugin. Eén van de 10 noodzakelijke plugins die ik heb opgenoemd. De meeste websites maken gebruik van formulieren op een geschikte wijze, passend bij hun doelstellingen. Denk aan formulieren ten behoeve van contact opnemen (naam, email en bericht) of een vragenlijst voor een selectie van je klanten om online in te vullen (bijvoorbeeld een testimonial). Je kunt het zo gek niet bedenken of je maakt het met Contact Form 7. Heb je de plugin al gedownload?

Alleen laten ook veel mensen zich afschrikken door de HTML codes die ze plotseling zien. Of ze gebruiken Contact form 7 niet optimaal. Denk aan online testimonials die je klanten aan de hand van een cursus kunt laten invullen. Gebruik jij al de doeltreffende kracht van Contact form 7 of blijf je haperen op een klein simpel contactformuliertje?

In dit artikel leg ik je uit hoe je het maximale uit Contact Form 7 kunt halen, hoe je formulieren naar wens kunt aanpassen. Naast dat het een gratis plugin is, is het gemakkelijk in gebruik. Het is wellicht even schakelen als je nog niet zoveel kennis hebt van HTML. Contact Form 7 behandelt slechts de basis, waar je altijd profijt van zult hebben. Het is net als met al het andere dat nieuw is, er is een leer-curve.

De basics van Contact Form 7

Voordat ik van start ga, ga ik ervan uit dat je Contact form 7 geïnstalleerd hebt. Anders kun je dat alsnog downloaden, dat praat een stuk makkelijker.

Nadat je Contact Form 7 hebt geïnstalleerd, verschijnt er in je linkermenu de tekst ‘Contact’ waarvandaan je direct de plugin kunt gebruiken. Als je de plugin opent, is er een standaard ‘Contactformulier 1’ geïnstalleerd. Elk formulier dat je aanmaakt zal in deze lijst komen te staan. Erachter staat de shortcode welke je op iedere gewenste pagina en/of bericht kunt plaatsen. Ook in je Widgets.

contact form 7

Door te klikken op de titel van het formulier, of op “bewerk” wanneer je er met de muis op stilstaat, kun je het formulier bewerken. Ook kun je een nieuw formulier aanmaken door bovenin te klikken op “voeg nieuw formulier toe”. Er opent zich een venster met html codes en opties.

Dit kan je dus afschrikken, wanneer je nog niet veel know how hebt van HTML, maar wees gerust, ik leid je erdoorheen.

contactformulier 1 Contact form 7

Het tabblad ‘Formulier’ is geselecteerd. Hier kun je het formulier bewerken of creëren. Je kunt kiezen om een invoerveld toe te voegen door een keuze te maken uit “tekst t/m verzend”. Wanneer je een keuze maakt, verschijnt er een pop-up venster. Om het je makkelijk te maken, hoef je enkel de naam in te vullen (kun je het invoerveld gemakkelijk onderscheiden van de rest). Wanneer je de naam verandert verandert bijvoorbeeld ‘your-subject’ in onderwerp (als onderwerp jouw naam is van het invoerveld). Daarnaast geef je aan of het een verplicht veld is en/of de opties per regel bij bijvoorbeeld een dropdown menu. Als je jouw selectie bevestigd, verschijnt er een code tussen brackets [], een tag.

Ging ik te snel? Dan zal ik de tag voor je vereenvoudigen. Pak je het daarna weer op?

tags

Een tag in een formulier wordt vervangen door een HTML element welke het invoerveld representeert wanneer het wordt weergegeven in een gepubliceerd formulier. Onderdelen van een formulier kunnen in de volgende onderdelen worden opgedeeld: type, naam, en/of opties en/of waarden. Type is het meest belangrijk, omdat het definieert welk HTML element wordt gebruikt voor het bepaalde invoerveld. De naam is om het invoerveld te identificeren. Onder opties staat een specifiek detail over gedrag en verschijning. Dit is optioneel. Ook de waardes zijn optioneel. Onder waardes kun je verschillende waarden ingevuld hebben voor bijvoorbeeld een dropdown menu.

De lijst van Tags die gebruikt worden in Contact Form 7:

  • tekst, e-mail, tel, URL , tekst gebied (text, text*, email, email*, tel, tel*, url, url*, textarea and textarea*)
  • getal (number, number*, range and range*)
  • datum (date and date*)
  • drop-down menu, selectievakjes,  keuzerondjes (checkbox, checkbox*, radio, select and select*)
  • acceptatie (acceptance)
  • quiz (quiz)
  • reCAPTCHA (captchac and captchar)
  • bestand (file and file*)
  • verzend  (submit)

Duidelijk? Mooi, dan kunnen we verder.

Je kunt nu jouw formulier gaan optimaliseren. Oftewel door middel van het gebruik van de simpele HTML codes zorgen dat jouw formulier goed wordt weergegeven. <p> en </p> geeft het begin en einde van een paragraaf weer. Hier tussen zet je de tekst voorafgaand aan een invoerveld. <br/> zorgt voor een regeleinde, met andere woorden dat je invoerveld onder de tekst staat, net als een enter zou doen.

Het ziet er ingewikkelder uit, dan dat het werkelijk is. Een paar keer stoeien ermee en ook jij kan mooie formulieren maken met Contact Form 7.

Het opstellen van de email

Als je formulier klaar is, wil jij natuurlijk de antwoorden van je formulier per mail ontvangen. Daarvoor is het andere tabblad “E-mail”. Er opent zich dan het volgende venster:

E-mail contact form 7

Het is eigenlijk vanzelfsprekend. Onder “Aan” vul je het emailadres in waarop je de emails wilt ontvangen. Onder “Van” vul je de code in van het invoerveld voor de naam zoals die op het formulier wordt opgegeven. Het onderwerp kan een code zijn als dit vrij staat om in het formulier te worden in gevuld. Als je gebruik maakt van een testimonial staat het onderwerp al vast, en kun je zelf een onderwerp opgeven als ‘testimonial’. Zo vallen de mails op in jouw Postvak In. “Aanvullende kopteksten” geeft het emailadres weer (de afzender). Handig als je wilt reageren.

Onder “bericht inhoud” geef je alles weer zoals jij op het formulier hebt weergegeven. Hier is het belangrijk dat je goed oplet wat er staat. Neem nu de code voor onderwerp. Onder het formulier zelf is de code [text your-subject] en onder de te maken email die je ontvangt geef je het als volgt weer: [your-subject]. Het woord ‘text’ vervalt, oftewel het type in de tag. Aangezien je nu juist niet wilt dat er een invoerveld geactiveerd wordt. Dat geldt voor alle invoervelden. Als je een dropdown aanmaakt, krijg je de volgende code: [select dropdown “1” “2” “3”]. Voor de email geef je het als volgt weer: [dropdown “1” “2” “3”]. Capiche?

Goed dan nog even op een rijtje voor je:

  • Onder het tab “Formulier” maak je jouw formulier aan. Je maakt een keuze welke invoervelden je wilt gebruiken, welke als tags worden weergegeven. In het formulier maak je gebruik van de HTML codes <p> en </p> om het begin en einde van de paragraaf en dus je invoerveld aan te geven. Met de code <br/> geef je een enter, waardoor het invoerveld onder de tekst voorafgaand aan het invoerveld komt te staan.
  • Onder het tab “E-mail” maak je jouw email op door de velden in te vullen met tekst of de code zoals je die op het formulier hebt opgegeven. Het enige verschil is dat je het eerste woord voor de code weglaat, de type in de tag. Dus in plaats van [text your-subject] plaats je de code: [your-subject]

berichten Contact Form 7

Aanpassen van berichten

Je kunt onder de tab “berichten” zelf aangeven wat er komt te staan bij welke actie die wordt genomen en/of (fout)melding. Hier kun je de formulieren perfectioneren. Of dat iets is wat echt nodig is, laat ik aan jou over. Het kan zijn voordelen hebben om daar de tijd in te steken. Je kunt ook verder gaan met andere doelstellingen en het formulier online gooien.

contact form 7 testen

Testen

Je hebt alles nu naar wens ingesteld en Contact form 7 doeltreffend ingezet. De basics heb je staan, email staat correct ingesteld en eventuele berichtgeving is naar wens aangepast. Dan is het tijd voor jouw moment supreme, de test. Gebruik hiervoor de shortcode om het formulier op de juiste plek op jouw website te plaatsen. Vul zelf de velden in en klik op bevestig. Controleer of de email daadwerkelijk aankomt.

YES? Dan is het je gelukt. Nee? Balen zeg, toch nog even alle instellingen bij langs gaan, weer terug naar de basics. Blijf je verder verdiepen in de doeltreffende kracht van Contact form 7 om zo nog meer sterke formulieren te ontwikkelen voor de bezoekers van jouw website.

Welke formulieren heb jij gemaakt met Contact Form 7? Plaats een link naar jouw unieke formulier of vertel ons alles over de ontwikkeling van jouw formulier. Wij zijn benieuwd welke resultaten jij neerzet met Contact Form 7.

Ik deel:
Posted in: Tutorial

About the Author:

Na vele jaren online mijzelf te ontwikkelen, door de vele zoektochten naar de antwoorden om weer verder te kunnen, vond ik het tijd om anderen een zoektocht te besparen. Om het startpunt te worden voor verheldering, groei en kennis. Het platform waar kennis gebundeld is en je gemakkelijk in contact komt met nieuwe verfrissende ideeën. Op jouw site!

Post a Comment