How-to: Elementor contactformulier maken

Elementor formulier maken

Dit ga je lezen

Het Elementor contactformulier: een van de belangrijkste onderdelen om je lead tot een conversie te leiden. Binnen enkele minuten maak je al een contactformulier, zonder ook maar enige code te gebruiken. Maar welke mogelijkheden zijn er allemaal? En hoe maak je een perfect contactformulier? In dit blog leg ik je alles uit dat je moet weten. 

Elementor contactformulier maken

Allereerst, sleep de contact form widget naar de gewenste plaats. Zodra je de muis los laat, maakt Elementor zelf al een contactformulier aan in het Engels. Als eerst geef je het contactformulier een naam. Bijvoorbeeld ‘inschrijving nieuwsbrief’. Onder de naam staan direct al alle velden. Deze velden kun je volledig naar eigen wens aanpassen. 

Elementor contactformulier velden
Elementor contactformulier voorbeeld

Zoals je hierboven ziet staan, kun je de contactformulieren eenvoudig aanpassen. Bij het type veld kun je eenvoudig aangeven wat er ingevuld moet worden. Bijvoorbeeld: tekst, telefoonnummer, Email, URL en ga zo maar door. Dit is vooral handig voor eventuele koppelingen met een e-mail systeem. Hierover later meer. 

Onder het type veld, staat het label. Deze moet altijd ingevuld worden om zo het overzicht te behouden. Mocht je het label liever niet zichtbaar hebben (zoals op het contactformulier hierboven), dan kun je deze later ook uit zetten met de ‘hide /show’ switcht. 

Standaard heeft een formulier drie velden. Wil je hier meer aan toevoegen? Klik dan op de dupliceer knop. Je kopieert dan eenvoudig een bestaand veld. Daarnaast kun je ook de knop ‘Add Item’ gebruiken om een volledig leeg nieuw veld te gebruiken. 

Onder het veld label, kun je de placeholder aanpassen. Dit is het label dat in het veld staat (zoals op bovenstaand formulier). Wanneer je twee velden naast elkaar wilt, kun je de column width aanpassen naar 50. Wanneer je dit ook doet bij een volgend veld, komen de velden naast elkaar te staan.

 

Elementor velden naast elkaar gebruiken

Veldtypes gebruiken

Zoals eerder aangegeven zijn er veel veldtypes te gebruiken. Onderstaand benoem ik ze allemaal kort. De meeste types spreken echter voor zich. Zo is het bij tekst mogelijk om een eigen tekst (naam, opmerkingen etc.) in te voeren. Net als bij Email. In het URL-veldtype kan de gebruiker zijn eigen link meesturen. Bij det veld Tel is het voor bezoekers mogelijk om hun telefoonnummer mee te sturen. 

Met het veld ‘Radio’ geef je bezoekers een keuzemogelijkheid. Je kunt deze mogelijkheden invoegen in het tekstvak dat verschijnt in de editor.Wanneer je op enter klikt, voegt de editor een nieuwe optie toe. Zet de opties vervolgens naast elkaar met de knop ‘inline’.

De optie ‘Select’ geeft dezelfde mogelijkheid als ‘Radio’, alleen is het nu een dropdown menu. Met de optie ‘Multiple selection’ is er de mogelijkheid om meerdere opties tegelijk te kiezen. Naast ‘Select’ en ‘Radio’ geeft ook ‘Checkbox’ deze optie. Bij ‘Checkbox’ kies je standaard voor meerdere opties. Daarnaast is het keuzeveld vierkant in plaats van rond.

Acceptance geeft de bezoeker de mogelijkheid om iets te accepteren, bijvoorbeeld ‘Ik wil graag de maandelijkse nieuwsbrief ontvangen’. 

Het veld ‘Nummer’ geeft de mogelijkheid om te vragen om een nummer, bijvoorbeeld ‘hoeveelheid’. In de velden die beschikbaar zijn voor dit veld is er de mogelijkheid om een minimum en een maximum aan te geven. Zorg wel dat het label duidelijkheid geeft. Onduidelijke velden zijn namelijk echt slopend voor je conversiecijfers!

‘Time’ en ‘Date’ zijn nagenoeg gelijk aan elkaar. Bij ‘Time’ kiest de bezoeker een specifiek tijdstip. Bij ‘Date’ is er de mogelijkheid om een specifieke datum te kiezen. Ook binnen deze velden is het mogelijk om een minimale en een maximale tijd/datum aan te geven. 

Het veld ‘File upload’ geeft de bezoeker de mogelijkheid om een of meerdere bestanden te uploaden. Vooraf kun je instellen wat de maximale grootte is van het bestand. Daarnaast kun je eenvoudig aangeven hoeveel bestanden er geüpload mogen worden. 

Is jouw formulier bedoeld om een account aan te maken? Grote kans dat de bezoeker ook een wachtwoord nodig heeft. Zet in dit geval het veld ‘Password’ aan. Hierin staat het wachtwoord van jouw bezoeker. 

Wil je gebruik maken van een bepaalde functie, maar staat deze nog niet in Elementor? Gebruik dan het veld ‘HTML’. Hierin kun je jouw eigen opties toevoegen aan het formulier. 

Door het veld ‘Step’ toe te voegen, maak je eenvoudig een multi-step formulier. Deze ogen een stuk gemakkelijker en korter, waardoor de conversieratio waarschijnlijk ook omhoog zal gaan. Daarnaast maak je op deze manier eenvoudig secties van jouw formulier. Meer over dit formulier lees je in mijn blog over het multi-step formulier. 

Spam voorkomen

‘reCAPTCHA’ en reCAPTCHA V3‘ helpen jou om spam te voorkomen. Deze velden zijn een extra beveiligingslaag die ervoor zorgen dat jouw formulieren echt door mensen worden ingevuld in plaats van spambots. Om deze velden te kunnen gebruiken, moet de API key ingevuld zijn in de Elementor set-up. 

Als laatst is het mogelijk om een ‘Honeypot’ toe te voegen aan het formulier. Dit is hetzelfde als een ‘reCAPTCHA’. Echter is hiervoor geen extra set-up nodig. Een Honeypot voegt een extra veld toe, welke onzichtbaar is voor bezoekers, maar wel ingevuld wordt door spambots. Op deze manier herkent jouw website een spambot en ontvang jij niet de ingezonden spam. 

Voorbeeld: compleet Elementor contactformulier

Onderstaand een voorbeeld van een compleet Elementor contact formulier. Dit formulier heeft alle mogelijke velden en is opgedeeld in verschillende secties.

Knoppen van het Elementor contactformulier aanpassen

Naast de inhoud van het formulier, is ook de lay-out aan te passen. Dit pas je eenvoudig aan, ook allemaal in het tab ‘Inhoud’. Kies de juiste button grootte, plaats van de knoppen en breedte van de knop. 

Wanneer je gebruik maakt van een multi-step formulier, kun je eenvoudig de stappen knoppen aanpassen. Wil je in plaats van ‘Volgende’ een andere tekst? Dan pas je dit eenvoudig aan in deze sectie. Daarnaast kun ook per stap een icoon kiezen. Naast het kiezen is er ook de mogelijkheid om een eigen icoon toe te voegen. Bijvoorbeeld van jouw bedrijfslogo, waardoor je een eigen touch aan het formulier geeft. 

Na het plaatsen van het icoontje, is het mogelijk deze verder te stylen. Bijvoorbeeld door de afstand tussen de tekst en het icoontje aan te passen. 

Opvolging van een inzending

Het formulier is ingevuld en de lead is binnen. Wat nu? Binnen Elementor zijn veel integraties mogelijk. Ook een contactformulier koppel je eenvoudig met jouw marketingplatform. Daarnaast kun je de nieuwe lead redirecten naar een nieuwe pagina. Onder het tabje ‘Actions after submit’ stel je dit eenvoudig in. 

Zorg bij een koppeling met jouw marketingplatform wel dat deze vooraf geïntegreerd is. Wil je weten welke marketingprogramma’s er allemaal mogelijk zijn? Klik dan op ‘Actions after submit’, en daarna op het plusje in de zoekbalk. Je kunt nu scrollen door alle mogelijkheden. Zodra je een optie kiest, verschijnt er een nieuwe knop in de Elementor editor. Hierin kun je de gewenste voorkeuren (bijvoorbeeld type mailinglijst) aanpassen. 

Meldingen na verzending

Zodra een formulier verzonden is, krijgt de lead een melding te zien. Standaard staan deze meldingen op standaard berichten. Door op de slider ‘Custom messages’ te klikken, vul je eenvoudig jouw eigen berichten in. Per melding (succesvol afronden, foutmelding, etc.) kun je een bericht typen wat in dat geval weergegeven wordt. 

Styling van een formulier

Nadat het functionele gedeelte is ingericht, komt de styling aan bod. Deze is minimaal even belangrijk als de inhoud. Het stylen van een formulier begint bij het tabje ‘Stijl’. 

Voordat je begon met het maken van een formulier heb je deze misschien al uitgewerkt in Adobe XD of Adobe Illustrator. Aan de hand van jouw voorbeeld maak je het formulier eenvoudig na. Begin bij de afstand tussen de velden: deze regel je met de eerste slider. Daarna pas je eenvoudig de afstand tussen de regels aan (row’s gap) en de afstand tussen het veld en het label (label spacing).

De tekstkleur pas ik zelf nooit handmatig aan. Dit eenheid te bewaren binnen de website. Standaard werk ik altijd met de typografie in de instellingen van Elementor. Pas je dan eenmaal de typografie aan, dan wordt dit door de hele website heen verwerkt. Dit scheelt erg veel tijd. Na het aanpassen van het formulier, doe je hetzelfde voor de velden. Pas de kleur van het veld (standaard wit, 100% dekkend) aan, en daarna ook de afstanden binnen het veld. 

Om het uiterlijk van de velden aan te passen, maak je gebruik van de ‘Bordor width’. Deze geeft de randdikte aan. Standaard is deze gekoppeld, maar je kunt de rand ook ontkoppelen door op de ketting te klikken. Hierdoor kun je elke rand van het veld dikker of dunner maken. 

Pas vervolgens de knoppen aan naar wens. In een van de vorige stappen is de tekst en het icoon al aangepast. In deze stap kun je de kleur en het lettertype/dikte aanpassen. De knoppen kun je nog meer aanpassen met de ‘Border radius’. Deze geeft de knop een afronding op de hoeken. Standaard zijn deze allemaal gekoppeld, maar ook deze ontkoppel je eenvoudig. Dit geeft jouw knop een mooie, stijlvolle look. 

Conversieratio van jouw formulier verhogen

Vooraf weet je nooit wat wel en wat niet goed werkt. Mijn advies is om het formulier continue een klein beetje te aan te passen, en vervolgens te kijken wat er wel en wat er niet werkt. Maar kijk hierbij vooral naar wat voor jou wel en niet werkt. 

Zelf aan de slag met Elementor?

Elementor is met 5+ miljoen actieve installaties de meest populair pagebuilder voor WordPress van dit moment. Met Elementor maak je eenvoudig een volledige custom website. Van header tot single blogpost, alles is aan te passen. 

Elementor contactformulier optimaliseren

Alle stappen van de tutorial doorlopen, maar levert het nog niet de behaalde resultaten op? Neem gerust contact met mij op. Ik help je graag verder bij het verbeteren van jouw online marketing!

Deel dit artikel

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Meer lezen?

Elementor Pro 3.3 update

Elementor Pro 3.3: Volledige websites importeren, snellere websites en meer!

De nieuwe Elementor Pro 3.3 update is er eindelijk! Ook in deze update zijn er weer diverse handige tools toegevoegd. Daarnaast is jouw Elementor Pro website na de update een stukje sneller, wat de SEO weer ten goede komt!
Link building

De 5 beste strategieën voor effectieve backlinks!

Backlinks, een van de belangrijkste onderdelen om een autoritaire website te bouwen. Maar hoe verkrijg je kwalitatief goede backlinks?
Elementor update 3.2 text path widget

Elementor update 3.2.0: wat is er nieuw? (widgets + pagespeed)

Elementor heeft afgelopen maart de 3.2 versie uitgerold. Met deze Elementor update kun je jouw creativiteit nog meer los laten gaan! In de nieuwe update zijn er een aantal nieuwe widgets toegevoegd waardoor jouw website er nog beter uit komt te zien.

Herman Kingma

Geniet van marketing

Hoi! Ik ben Herman en ik help bedrijven met marketing. 

Groetjes!

Mijn favorieten
Link building
De 5 beste strategieën voor effectieve backlinks!
Elementor update 3.2 text path widget
Elementor update 3.2.0: wat is er nieuw? (widgets + pagespeed)
Categorieën

Op de hoogte blijven van nieuwe posts?

Zie ze direct in je inbox!