Het maakt niet uit wat voor soort website je beheert, je hebt een contactformulier nodig.
Ze kunnen leads genereren, connecties en relaties opbouwen, gebruikers je laten informeren over problemen met je website en al het andere daartussenin.
Het maken van contactformulieren in WordPress hoeft niet ingewikkeld te zijn. Met de Elementor page builder is het zelfs eenvoudiger dan ooit!
In dit artikel laat ik je zien hoe je contactformulieren maakt met Elementor, kijk ik naar de verschillende beschikbare opties en onderzoek ik alles wat er te weten valt over contactformulieren binnen Elementor.
Laten we beginnen!
Inhoudsopgave
hoe maak je een contactformulier met Elementor?
Er zijn twee methodes die je kunt gebruiken om contactformulieren aan jouw website toe te voegen:
- De betaalde methode: dit maakt gebruik van de interne widget van Elementor. Je moet zowel Elementor als Elementor Pro geïnstalleerd hebben.
- De gratis methode: hier moet je een plug-in van een derde partij installeren en het formulier insluiten in de pagina of post die je met Elementor hebt gemaakt.
Beide methoden hebben hun eigen voor- en nadelen. In de volgende sectie ga ik ze beide onderzoeken.
contactformulier toevoegen met Elementor pro
Bij deze methode moet je de Elementor Pro-licentie aanschaffen. Ik raad het absoluut aan omdat je het uiterlijk van het formulier naar wens kunt aanpassen en het goed past binnen de website.
Met deze methode krijg je niet alleen toegang tot alle coole Elementor Pro-widgets, maar krijg je ook toegang tot de enorme bibliotheek met templates die daarbij hoort.
Bovendien kun je met Elementor Pro je website volledig transformeren!
Zo voeg je een contactformulier toe met Elementor Pro.
stap 1: de Elementor contact widget toevoegen aan je pagina
Open eerst de pagina waarin je het Elementor Contact Formulier wilt gebruiken.
Je startpagina en contactpagina zijn een uitstekende plek voor een contactformulier als je niet zeker weet waar je het contactformulier op jouw website moet plaatsen.
Nadat je jouw pagina in Elementor in het editor venster hebt geopend, kun je de contactformulier widget gebruiken:
In Elementor is dit de widget genaamd “Form”.
Sleep de formulier widget naar je pagina en je ziet de basis van een Elementor contactformulier zoals hieronder (de stijl kan wat afwijken vanwege het gebruik van een ander thema).
Stap 2: Je contact formuliervelden instellen
Er is een groot aantal instellingen voor de formulier widget in Elementor, en ik zal al deze instellingen later in de blog verder behandelen.
Laten we ons eerst concentreren op de basis.
Elementor vult je formulier vooraf in met de benodigde velden die elk contactformulier zou moeten hebben:
- Naam
- E-mail (je hebt dit tenslotte nodig om te antwoorden!)
- Bericht
Dit is alles wat je nodig hebt voor een eenvoudig contactformulier. Maar wat als je meer velden wilt?
Wil je het budget van de klant weten? Of stel andere vragen, zodat je, wanneer je het bericht ontvangt, snel geschikte leads kunt bepalen?
Laten we die in de volgende stap onderzoeken.
stap 3: velden toevoegen aan je Elementor contactformulier
Om een veld aan je Elementor contactformulier toe te voegen, klik je op “Item toevoegen”:
Hiermee wordt een nieuw item in je contactformulier als volgt gemaakt:
Zoals je kunt zien, is er een reeks instellingen, dus laten we die eens bekijken:
- Type – dit is het type veld dat je aan het formulier wilt toevoegen. Er zijn meerdere verschillende veldtypen, waaronder:
- Text
- Textarea
- URL
- Tel
- Radio
- Select
- Checkbox
- Acceptance
- Number
- Date
- Time
- File Upload
- Password
- HTML
- Hidden
- reCAPTCHA
- reCAPTCHA V3
- Honeypot
Pfiew! Dat zijn veel veldtypes!
De meeste spreken voor zich, maar er zijn er misschien een paar waarvan je denkt “Wat is dat?”
Maak je geen zorgen.
De volgende is de optie “Label”. Het label is de naam van het formulierveld dat boven het contactformulier wordt weergegeven. Het laat gebruikers zien welke invoer wordt verwacht, dus zorg ervoor dat het iets beschrijvends is!
Dan is er de instelling “Placeholder”. De placeholder is wat wordt weergegeven in het formulierveld wanneer een gebruiker geen gegevens heeft ingevoerd. Het is handig om de placeholder tekst in te stellen als voorbeeld van welke informatie je wilt dat ze invoeren.
Bijvoorbeeld door “e-mailadres” toe te voegen, aangezien de placeholder de gebruiker vertelt dat je een e-mailadres in dat veld verwacht.
De voorlaatste instelling is “Required”. Dit is een eenvoudige aan/uit knop die, indien ingeschakeld, de gebruiker niet toestaat het formulier in te dienen zonder het veld in te vullen.
De laatste is de instelling “Column Width”. Door de kolombreedte in te stellen, kunt je jouw velden naar wens uitlijnen en stapelen.
Als je bijvoorbeeld de breedte instelt op 50% en een ander gebied toevoegt en ook op 50% instelt, worden de velden naast elkaar weergegeven, waardoor je meer vrijheid hebt bij het ontwerpen van jouw contactformulier met Elementor.
- Geavanceerd tab
Hierna volgen de opties binnen het “Advanced” gedeelte van de nieuwe veldinstellingen.
Er zijn niet zoveel opties op dit tabblad:
- Default Value – Dit is de standaardwaarde van het veld en verschilt van de placeholder. Dit is een optionele instelling die wordt gebruikt wanneer standaard een soort waarde is ingesteld als de gebruiker zijn eigen waarde niet toevoegt. Bijvoorbeeld een minimale waarde of bestelling in een formulier.
- ID – ID wordt gebruikt om de gegevens van dat veld op te slaan. Je hoeft dit meestal niet te wijzigen, maar het moet uniek zijn.
- Shortcode – De shortcode kan worden gebruikt om het veld overal op je pagina op te halen. Over het algemeen hoef je dit niet te gebruiken.
Wow, dat waren veel opties! Hopelijk heb je nu een goed idee van wat ze allemaal betekenen.
Stap 4: Instellen waar je formulier inzendingen naartoe gaan
Klik in de Elementor editor op “E-mail” om de beschikbare opties weer te geven:
Er zijn veel velden voor e-mail. Out of the box, alles is vooraf ingevuld, dus als je niets specifieks nodig hebt, kun je hier snel voorbij vliegen en je pagina opslaan.
Wil je meer weten over de mogelijkheden van de instellingen voor je Elementor contactformulier, lees dan verder.
Hier zijn alle opties en wat ze doen:
- To – Het e-mailadres waarnaar de indiening van het formulier wordt verzonden. Kan naar meerdere e-mailadressen worden verzonden. Voer e-mailadressen in, gescheiden door komma’s.
- Subject – Het onderwerp van de verzonden e-mail met de inzending, weergegeven in jouw e-mailclient.
- Message – Hier kun je instellen welke velden worden verzonden vanuit jouw contactformulier. Met behulp van de shortcodes die we eerder hebben behandeld bij het maken van velden, kun je slechts enkele hiervan instellen om alle velden van de inzending te verzenden of te ontvangen.
- From E-mail – Het bron-e-mailadres dat de e-mail verzendt. Zorg ervoor dat je het e-mailadres op de witte lijst zet, zodat je al jouw inzendingen ontvangt!
- From Name – De naam van de persoon die het formulier verzendt.
- Reply-to – Dit veld is het e-mailadres waarnaar het antwoord gaat wanneer je op “beantwoorden” klikt in je e-mailclient. Standaard is dit het beheerders e-mailadres van de website, maar misschien wil je dit wijzigen. Klik in de vervolgkeuzelijst en stel deze in op het veld ‘E-mail’.
- CC – Wil je iemand in de CC van de e-mail? Voer hier hun e-mailadres in, stuur naar meerdere e-mailadressen (gescheiden door komma’s).
- BCC – Wil je naar een BCC verzenden? Voer hier hun e-mailadres in, stuur naar meerdere e-mailadressen (gescheiden door komma’s).
Vervolgens zie je dat er een metabox veld is dat metadata bevat, die je kunt instellen om te worden verzonden met de formulier inzending.
Je hoeft dit meestal niet aan te passen of te bewerken.
Ten slotte is er de optie “Send as” (Verzenden als). Met de verzendoptie kun je selecteren of je het ingediende item als platte tekst of HTML (standaard is HTML) wilt verzenden. Nogmaals, je hoeft dit meestal niet te wijzigen.
stap 5: Elementor contact form messaging instellen
De formulier editor van Elementor is krachtiger dan het in eerste instantie lijkt. Een van de meest geavanceerde functies is de mogelijkheid om de berichten per formulier aan te passen.
Het aanpassen van formulier berichten zorgt voor een meer gepersonaliseerd feedbackproces voor de eindgebruiker in plaats van te klinken als een saaie robot.
Maar welke berichten kun je precies aanpassen voor jouw Elementor contactformulier?
Eerst moet je aangepaste berichten inschakelen.
Klik op “Additional Options” en zet vervolgens “Custom Messages” op “Ja”.
Zoals je kunt zien, zijn er 4 verschillende berichten die je kunt bewerken, waaronder:
- Succes Message – Wordt weergegeven aan een eindgebruiker zodra deze het formulier heeft ingediend en correct heeft ingevuld (bijv. Je e-mail is succesvol verzonden!).
- Error Message – Weergeven aan een eindgebruiker wanneer er een onbekende fout is opgetreden bij het verzenden van het formulier.
- Required Message – Wordt weergegeven wanneer een verplicht formulierveld niet is ingevuld wanneer het formulier wordt verzonden.
- Invalid Message – Wordt weergegeven aan een eindgebruiker wanneer iets in de formulier inzending onjuist is en niet kan worden verzonden.
Door de berichten te kunnen bewerken, kun je plezier hebben en eigenzinnig zijn, of als je een bedrijfssite hebt, kunt je meer zakelijk zijn.
Het beste is dat ze volledig bewerkbaar zijn, je kunt doen wat je wilt!
stap 6: je Elementor contactformulier opmaken
Je wilt toch niet dat je contactformulier er saai uitziet of niet overeenkomt met de branding van jouw website? Gelukkig kan aangepaste styling in Elementor niet moeilijk zijn.
Klik in de editor op het tabblad “Stijl”:
Je vindt een breed scala aan opties en instellingen om jouw contactformulier naar wens te personaliseren. Alles, van spatiëring, opvulling en kleuren tot de grootte van velden, labels, invoer, knoppen en al het andere.
Ik laat je deze opties zelf verkennen. Het is niet moeilijk om ze te gebruiken!
Als ik bijvoorbeeld de kleur van de Elementor knop wil wijzigen, klik ik op de vervolgkeuzelijst “Buttons” om de instellingen weer te geven:
Je kunt snel de achtergrondkleur van de knop, de tekstkleur van de knop, de hover kleur en een hele reeks opties en instellingen instellen.
Als je eenmaal tevreden bent met de opmaak van jouw formulier, is het tijd voor de laatste stap, het publiceren van je formulier!
stap 7: je Elementor contactformulier publiceren
Nu alles is ingesteld met jouw contactformulier, precies zoals jij het wilt, is het tijd om jouw formulier aan de wereld te publiceren!
Het kan niet eenvoudiger.
Klik onderaan de Elementor editor op de groene knop “Update” en je pagina wordt bijgewerkt met je gloednieuwe contactformulier.
Gefeliciteerd. Je hebt met succes een contactformulier gemaakt en gepubliceerd met Elementor!
Dat is echter niet het einde van het verhaal.
Het bovenstaande werkt alleen als je Elementor Pro gebruikt. Elementor Pro kost vanaf $ 49, wat weliswaar een koopje is voor wat is inbegrepen, maar niet iedereen heeft $ 49 te besteden aan een plugin.
Gelukkig is er een reeks gratis alternatieve contactformulieren die je naast Elementor kunt gebruiken.
Wanneer moet je de betaalde methode gebruiken?
Met Elementor Pro geïnstalleerd, krijg je meer dan 300 templates, 90+ widgets en 60+ website kits, evenals premium ondersteuning.
Je krijgt ook volledige controle over het aanpassen van je website. Je kunt elke pagina, post, sidebar, koptekst, voettekst en zelfs productpagina’s aanpassen als je een E-commerce website hebt.
Met Elementor Pro formulieren kun je jouw formulieren integreren met veel populaire e-mailmarketing tools waarmee je jouw publiek direct kunt omzetten in abonnees. Dit is een functie die alleen wordt geleverd met de premium versie van veel contact plugins.
Klinkt cool toch?
Ik raad je ten zeerste aan om je website volledig met Elementor Pro te bouwen. Dit is misschien wel de beste van de twee methoden om contactformulieren aan jouw website toe te voegen.
wanneer moet je Elementor pro niet gebruiken?
Als alles wat je nodig hebt een eenvoudig contactformulier op je website is en je sommige premium functies niet nodig hebt, kun je de aanschaf van Elementor Pro overslaan.
In de komende secties laat ik je zien hoe je een contactformulier aan jouw website kunt toevoegen met de gratis versie van Elementor.
Ik heb een aparte blog geschreven voor het vergelijken van Elementor en Elementor Pro, klik hier!
gratis een contactformulier toevoegen in Elementor
Deze methode is vrij eenvoudig. Het enige dat je hoeft te doen, is een plugin voor contactformulieren van een derde partij installeren waarmee je shortcodes kunt toevoegen aan je website.
Elementor is vrij veelzijdig als het gaat om integraties en werkt goed met de meeste WordPress plugins voor contactformulieren.
Voordat we verder gaan en je het exacte proces te weten komt, moet je eerst kijken naar de 4 beste Elementor vriendelijke plugins voor contactformulieren.
top 4 Elementor vriendelijke plugins voor contactformulieren
HubSpot’s WordPress plugin is een gratis alles-in-één marketing plugin die wordt vertrouwd door meer dan 100.000 gebruikers. Met de plugin kun je eenvoudig formulieren, pop ups, livechat, analyses en meer toevoegen aan jouw WordPress website.
En het beste deel? Alles wordt automatisch gesynchroniseerd met de HubSpot CRM, waardoor je een gecentraliseerd overzicht krijgt van de interactie van een contactpersoon met jouw website.
Gebruik HubSpot om nieuwe formulieren en pop ups toe te voegen aan jouw Elementor pagina’s of jouw bestaande formulieren automatisch te synchroniseren met een CRM.
Prijs: Gratis
WPForms heeft maar liefst 3+ miljoen actieve installaties!
Het is een freemium plugin waarbij de basisversie gratis is, maar voor extra opties moet je de premium versie kopen. Hoewel de gratis versie veel functies biedt die je zou willen en prima is voor het maken van een eenvoudig contactformulier, zijn veel functies beperkt tot de Pro-versie.
Net als Contact Form 7 kun je de WPForms shortcodes gebruiken om je contactformulier op een Elementor pagina (of welke pagina dan ook) te plaatsen.
Prijs: gratis versie en Pro-versie vanaf $ 79
Contact Form 7 is een van de meest populaire plugins voor contactformulieren voor WordPress. Het is volledig gratis en heeft meer dan 5 miljoen actieve installaties!
Hoewel het qua functionaliteit eenvoudig is, is het de moeite van het bekijken waard als je alleen een eenvoudig contactformulier nodig hebt.
Je kunt de ingebouwde shortcodes gebruiken om snel en gemakkelijk elk formulier op jouw pagina’s en berichten te plaatsen.
Prijs: Gratis
Forminator is een freemium plugin voor WordPress formulieren.
Met een eenvoudig te gebruiken gebruikersinterface is Forminator een geweldig alternatief voor meer bekende formulier plugins. En het wordt geleverd met ingebouwde ondersteuning voor PayPal en Stripe.
Net als de andere plugins die ik hier heb benoemd, is het een fluitje van een cent om Forminator toe te voegen aan je Elementor pagina.
Bovendien, als je de Pro-versie van Forminator aanschaft, krijg je ook toegang tot hosting voor 3 websites, SmartCrawlPro, Hustle Pro en een hele reeks andere functies voor onbeperkte websites! Dat lijkt mij een prima prijs voor slechts $ 5 per maand.
Prijs: er is een gratis versie, en de prijs voor Forminator Pro is vanaf $ 5 per maand, inclusief toegang tot andere plugins en hosting.
een contactformulier insluiten in Elementor
Je kunt elk van de hierboven genoemde contactformulier plugins gebruiken met Elementor. Maar voor dit voorbeeld werk ik met WP Forms.
Zo sluit je een contactformulier in met WP Forms en Elementor.
Stap 1: Maak een contactformulier
Installeer WP Forms op de gebruikelijke manier. Ga dan naar WP Forms > Add New vanuit je WordPress dashboard.
Hier kun je een formulier uit de gegeven templates selecteren en jouw formulier een naam geven.
Stap 2: Pas het formulier aan
Nu kun je verplichte velden bewerken en toevoegen aan jouw contactformulier. Je kunt in deze sectie ook de velden verwijderen die je niet wilt.
Als je klaar bent met de bewerkingen, kun je op “Preview” klikken om te controleren hoe het formulier eruitziet.
Als je tevreden bent met het formulier, klik je op “Save” om de wijzigingen op te slaan.
Stap 3: Maak de shortcode
Zodra je op insluiten klikt, vraagt WP Forms of het het formulier voor je op een bepaalde pagina of post moet toevoegen. Hoewel het misschien de gemakkelijkere optie lijkt, raad ik je aan om de link ‘gebruik een shortcode’ te kiezen net onder de knoppen.
Zodra je op de link klikt, genereert deze een shortcode. Kopieer de shortcode voor nu. We zullen het nodig hebben in de volgende stap.
Stap 4: Het formulier insluiten
Dit is hét moment om te beginnen met bewerken.
Open de pagina die je nodig hebt en selecteer ‘Bewerken met Elementor’.
Zoek in de Elementor-widget naar “Shortcode”..
Selecteer de Shortcode-widget en sleep deze naar het gebied waar je het formulier wilt hebben.
Plak de shortcode die je eerder hebt gekopieerd in de widget. Het formulier verschijnt dan op de plaats waar je het op de pagina hebt geplaatst.
Als je tevreden bent met de resultaten, druk je op “Update” om de pagina op te slaan.
Een andere manier om hetzelfde formulier in Elementor toe te voegen, is door te zoeken naar “WP Forms” in de Elementor widgets.
Wanneer je een Elementor vriendelijke plugin gebruikt, wordt er automatisch een widget voor gemaakt. Het maakt het inbedden veel gemakkelijker.
Sleep de WP Forms widget naar de gewenste plaats en selecteer het gewenste formulier.
Dit geeft hetzelfde resultaat als de shortcode-methode.
Makkelijk toch?
Conclusie
Het bouwen van een contactformulier met Elementor hoeft niet ingewikkeld te zijn of uren te duren. Dankzij Elementor Pro of een reeks gratis plugins is het maken van een contactformulier met Elementor snel en eenvoudig.
Ga je gang en probeer het zelf.
Heb je een voorkeur voor een contactformulier plugin? Misschien heb je je contactformulieren al in Elementor gebouwd?
Laat het mij weten in de reacties hieronder!
Hulp nodig met je website, of liever de hele website uitbesteden?
Heb jij hulp nodig bij jouw website, of wil je toch liever je hele website uitbesteden? Neem dan contact met mij op! Dan gaan we samen de uitdaging aan om voor jou een toekomstbestendige, efficiënte website te bouwen!
