Een contactformulier maken op je website kan op veel manieren. Er zijn een heleboel plugins, zoals Contact form 7, Caldera forms of WPforms waarmee je dit kunt realiseren. Het voordeel van werken met Elementor is dat je al deze plugins niet meer nodig hebt. Met Elementor Pro heb je namelijk de mogelijkheid om eenvoudig contactformulieren te maken op je website. Met alles erop en eraan. In dit artikel leg ik je uit hoe je dit doet en hoe je hetzelfde contactformulier op meerdere pagina’s kunt gebruiken.
Wil je toch een meer uitgebreid contactformulier maken? De Elementor addon Piotnet biedt een form builder waarmee je onder andere conditionele velden kunt maken. Wil je een formulier met betaalmogelijkheid? Dan adviseren we je om te werken met Gravity forms.
Tip: Met Elementor Pro kun je nu ook multi-step formulieren maken!
Contactformulier maken met de Formulieren widget
Ga naar de pagina waarop je een contactformulier wilt plaatsen. Bijvoorbeeld de pagina ‘Contact’ en kies voor ‘Bewerk met Elementor’.
Vind de widget ‘Formulieren’ en voeg deze toe aan de sectie.
Het contactformulier aanpassen
Een standaard contactformulier is aangemaakt. Deze kun je in principe direct gebruiken, maar het is wel zo netjes om even de tekst even naar het Nederlands te vertalen. Dit kun je heel eenvoudig doen.
Veldnamen wijzigen
Klik op het veld tabje ‘Name’ om het veld te bewerken en pas de naam aan. Je kunt hier ook instellen of het veld verplicht is of niet.
Doe dit ook voor ‘Message’ en eventueel ‘Email’ (als je er bijvoorbeeld e-mailadres van wilt maken).
Button tekst aanpassen
Om de tekst op de button aan te passen, klik je op het tabje eronder. Eventueel kun je er ook voor kiezen om een icoon toe te voegen aan de button.
Labels verwijderen
Als je het niet mooi vindt dat de labels bovenaan de velden staan, dan kun je deze ook uitzetten. Zet ‘Label’op ‘hide’
Een veld toevoegen aan het contactformulier
Indien gewenst kun je ook eenvoudig een veld toevoegen aan het contactformulier. Klik op ‘item toevoegen’ of kopieer een van de andere velden. Je kunt voor verschillende veldtypen kiezen:
Velden naast elkaar zetten
Wanneer je veel velden in je contactformulier gebruikt, kan het formulier al snel (te) lang worden. Over het algemeen oogt dit niet zo mooi. Het is dan mooier om bepaalde velden zoals voor- en achternaam naast elkaar te zetten. Dit doe je door de ‘Column width’ aan te passen.
Zet het eerste veld op 50%. Je ziet direct dat deze kleiner wordt, alleen blijft het tweede veld nog steeds op de regel eronder staan. Om ze naast elkaar te zetten, moet je deze ook op 50% zetten. Om ze naast elkaar te zetten mag de kolombreedte van de velden bij elkaar opgeteld niet meer dan 100% zijn. Als je dus 3 velden naast elkaar wilt zetten, zet je ze alle drie op 33%.
Je kunt hetzelfde doen met de button.
Notificatiemail aanpassen
Bij een contactformulier maken is het ook handig als je de emails goed instelt. Als iemand het contactformulier invult op jouw website, ontvang je hiervan een mail. Dit is één van de acties die je kunt instellen onder ‘Actions after submit’. Deze staat standaard al ingesteld. Het emailadres waar de mail naar verzonden wordt is het admin adres dat je voor je website gebruikt. In ons geval dus contact@sijweb.nl. Het is handig om deze informatie ALTIJD even te checken. Ook kun je het onderwerp van de email aanpassen. [all fields] kun je laten staan. Dit zijn de gegevens die de bezoeker heeft ingevuld.
Je bezoeker ook redirecten naar een bedankpagina na het inzenden van het formulier? Lees dan dit artikel.
Bevestigingsmail instellen
Wil je ook dat de inzender een bevestigingsmail ontvangt van het bericht? Dan kun je ook een bevestigingsmail instellen.
Meldingen aanpassen
Na het verzenden van het bericht krijgt de bezoeker een succes melding te zien. Maar het kan ook zijn dat er tijdens het invullen iets niet goed gaat. Hiervoor staan standaardteksten ingesteld die je vindt onder het tabje ‘Additional options’ –> Zet ‘Custom messages’ op ‘ja’. Je kunt hier de teksten vertalen naar het Nederlands of de teksten naar wens aanpassen.
Het contactformulier testen
Test ALTIJD het contactformulier. Hier kan namelijk een hoop misgaan. In de meeste gevallen volstaat het als je het afzenderadres toevoegt aan je contactpersonen.
Inzendingen opslaan
Wil je de inzendingen ook opslaan in WordPress, zodat je zeker weet dat je niets mist? Sinds maart 2021 is het mogelijk om de inzendingen op te slaan in Elementor submissions en heb je hiervoor geen aparte plugin meer nodig zoals Elementor DB of Elementor Leads.
Als je een nieuw formulier aanmaakt met Elementor is dit standaard al ingesteld. Bij formulieren die je voor maart 2021 op de website hebt gezet, moet je ze wel even nalopen. Je slaat de inzendingen op door bij ‘Actions after submit’ te kiezen voor ‘Collect submission’
De submissions vind je vervolgens onder Elementor –> Submissions:
Je kunt er ook voor zorgen dat je e-mailadressen worden toegevoegd aan je mailingtool (let op: hiervoor heb je wel toestemming nodig).
Zoals je ziet kun je dus eenvoudig een contactformulier maken met Elementor. Kom je er niet uit? We helpen je graag!
Tip: Beveilig je contactformulier tegen spam met reCAPTCHA V3
24 reacties
Top uitleg, dank!
Alleen ik ontvang geen enkel mailtje. M’n e-mailadres staat onder het tablad ‘Email’ goed ingesteld. Zowel onder to, From e-mail en reply-to heb ik het zelfde e-mailadres opgegeven.
Heb nu twee testmailtjes verstuurd, maar ontvang niets (ook niet in spambox).
Krijg wel na het versturen de melding dat het bericht succesvol is verzonden.
Alvast dank voor je hulp 🙂
Gr, Mitchel
Hoi Mitchel,
Heb je voor de afzender van het emailbericht hetzelfde emailadres gebruikt als je WordPress admin adres? Dit kan soms voor conflicten zorgen. Probeer het eens met email@jouwdomeinaam.nl. Dan gaat het meestal wel goed. Als dat niet werkt, even helemaal een ander emailadres als afzender proberen.
Hi Sanne,
Fijne uitleg. Het contactformulier is gelukt en werkt! Nu kreeg ik te horen dat je bezoeker tegenwoordig een vinkje moet kunnen zetten als je meer info vraagt dan alleen naam en e-mailadres. Ik kan nergens vinden hoe ik dat erbij kan plaatsen. Is deze optie er wel met Elementor?
Groetjes Laura
Hoi Laura,
Goede vraag! Er zit een acceptance veld in het contactformulier. Daarmee kun je een bezoeker bijvoorbeeld akkoord laten gaan met jouw privacy voorwaarden. Bij de acceptance tekst vul je dan bijvoorbeeld onderstaande tekst (in html) in:
Ik ben akkoord met de Privacy voorwaarden (let even op dat je de juiste link gebruikt).
Kun je hier mee uit de voeten?
Ik heb er even een artikeltje over gepubliceerd, zie hier
Beste, oe krijg ik randen om de labels?
In het tabblad ‘Stijl’ zie je een optie voor ‘Field’. Daar kun je een randdikte instellen voor de velden en de kleur aanpassen.
Sanne,
Kan je met Elementor Pro de klant een formulier tussentijds op laten slaan? Of is hier een aparte plugin voor nodig (en als dit zo is heb jij dan nog goede tips 🙂
Hoi Erwin,
Ik zou het formulier dan steeds opslaan als global widget (niet echt waar voor is bedoeld, maar dan kun je ze wel bewaren). Je zou ook het template waarin je de formulieren widget hebt staan kunnen opslaan.
Groetjes,
Sanne
hoi Sanne,
Even een vraag over datums. Voor onze vereniging moeten leden zich nu, vanwege de corona, inschrijven voor een activiteit. Het aantal deelnemers per activiteit is gelimiteerd. Daarom kunnen zij zich slechts maximaal 7 dagen voor een bepaalde activiteit inschrijven. Op het formulier moeten zij dus de datum ingeven waarop zij de activiteit willen doen. Maar sommige schrijven zich langer dan 7 dagen daarvoor in. Kan ik een restrictie meegeven aan het label datum met een melding dat ze te vroeg zijn?
Hoi Timo,
Je kunt geen restrictie toevoegen in het formulier zelf, maar je zou wel met widget conditions kunnen werken. Dan kun je instellen dat het formulier pas op een bepaalde datum wordt getoond.
Kijk bijvoorbeeld eens bij deze add-on: https://shop.namogo.com/elementor-extras/extensions/display-conditions/ maar met deze plugin kan het ook: https://widget-options.com/
Succes!
Groetjes,
Sanne
Hoi Sanne,
Sinds enige tijd gebruik ik wordpress en specifiek elementor voor het maken van onze nieuwe website. Daarbij heb ik jouw website al vaak als hulplijn ingeschakeld. Erg waardevol, dankjewel.
Nou loop ik bij het formulier tegen een vraag aan. Ik wil graag dat gebruikers documenten kunnen toevoegen aan hun bericht. Als ik deze optie toevoeg en ik kies voor “multiple files” dan kan ik toch maar 1 document toevoegen (bij het opnieuw toevoegen van een bestand wordt het eerste bestand vervangen). De layout verandert ook helemaal niet bij het aan of uitzetten van deze optie (nou weet ik ook niet of de layout zou moeten wijzigen?). Als ik het formulier bij “bron inspecteren” opzoek dan staat multiple wel gewoon aan.
Heb jij enig idee waar dit aan zou kunnen liggen?
Groet,
Valerie
Hoi Valerie,
Goed om te horen dat je wat aan mijn blogartikelen hebt!
Ik heb het bij mij even getest en daar gaat alles goed met multiple files upload. Heb je het ook getest in een andere of incognito browser? En de caching van je website al een keer gewist?
Als dat niet werkt, zou ik er ook in moeten duiken. Wellicht is er dan een conflict met een andere plugins of codes die op je website staan.
Groetjes,
Sanne
Hoi Sanne,
Het werkt inderdaad. Stom genoeg zat de fout niet in de werking maar in mijn verwachting van de werking. Ik ging er vanuit dat je eerst 1 file toe kon voegen en daarna nog een; maar dan vervangt ie de eerste file door de tweede, waardoor ik dacht dat het niet werkt.
Als je echter in één keer meerdere files selecteert met shift of ctrl en deze in één keer toegevoegd werkt het wel. Persoonlijk vind ik dat wel een groot nadeel; niet iedereen heeft direct door dat het zo werkt en je moet als gebruiker alle files op één locatie hebben staan. Er is denk ik geen workaround om dat anders in te kleden of wel?
Groetjes,
Valerie
Hoi Valerie,
Ik ben het met je eens dat dat beter zou zijn, maar dit is wel waarop het werkt met Elementor formulieren. Als workaround zou je meerdere bestand upload velden kunnen invoegen, dan kun je wel meerdere bestanden uit verschillende mappen toevoegen. Anders kun je ook een stukje tekst met toelichting erbij plaatsen. Als dat niet naar wens is, kun je overwegen om alsnog met een andere formulieren plugin te werken (zoals WPForms), maar ik moet eerlijk zeggen dat ik niet weet of die functie daar heel anders werkt.
Groetjes,
Sanne
Hoi Sanne,
Fijne uitleg, maar het werkt helaas nog niet. Als ik het test, krijg ik zelf het bevestigingsmailtje binnen op mijn website mailadres en niet op mijn testadres. Heb jij enig idee wat ik fout kan doen?
Hoi Ilona,
Heb je bij het ontvangers e-mailadres wel de shortcode van het e-mailveld? Meestal is dit [field id=”email”] (tenzij je hier wat anders invult).
Groetjes,
Sanne
Hoi Sanne,
Dankjewel! Alleen is het nu gewoon een bericht geworden en geen abonnee. Kan dat misschien helemaal niet met deze tool? Ik ben de weg kwijt =).
Hoi Ilona,
Via een contactformulier kunnen bezoekers van je website contact met je opnemen. Wat bedoel je precies met abonnee? Toegang tot je website? Of inschrijven voor een nieuwsbrief? Als je wilt dat mensen zich inschrijven voor een nieuwsbrief kun je dit artikel even lezen: https://www.sijweb.nl/nieuwsbrief-inschrijfformulier-koppelen/
Groetjes,
Sanne
Hoi Sanne,
Met abonnee bedoel ik dat ze een berichtje krijgen als er een nieuw artikel online staat. Een nieuwsbrief klinkt meteen groot, maar misschien is dat het wel hetzelfde?
Groetjes,
Ilona
Hoi Ilona,
Als je wilt dat ze per mail een bericht krijgen als er een nieuw artikel online staat, moet je gaan werken met een mailingtool (bv. MailChimp). Deze kun je dan koppelen aan het formulier. In MailChimp moet je dan wel de nodige handelingen uitvoeren om deze feed in te stellen (dat er automatisch een mail uit gaat als er een nieuw artikel op je website verschijnt). Hoe je dat in MailChimp doet lees je hier –> https://mailchimp.com/help/share-your-blog-posts-with-mailchimp/
Succes!
Groetjes,
Sanne
Fantastisch! Het was een puzzel, maar het werkt. Dankjewel Sanne!
Hi Sanne,
Dit is een leuke functie binnen Elementor Pro. Het zou nog leuker zijn als je ook de kleur van de button onderaan kunt aanpassen.
Gr. Martin
Hoi Martin,
Dat kan ook via het tabje ‘stijl’. Maar in principe heeft de button in het contactformulier dezelfde stijl als de globale buttons die je hebt ingesteld voor je website.
Groet,
Sanne