MENU

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

Contactformulier maken op je website met Elementor

Inhoud van dit artikel:

Tot 25% korting op Elementor Pro
Pssst...! Nog geen Elementor Pro? Of wil je jouw licentie upgraden? Profiteer nu van de CyberMonday sales met kortingen tot 25%
Korting

Een contactformulier maken op je website kan op veel manieren. Er zijn een heleboel plugins, zoals contact form 7, caldera forms, wp forms 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 leggen we 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.

formulier toevoegen met Elementor

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. Wil je de inzendingen ook opslaan in WordPress, zodat je zeker weet dat je niets mist? Dan heb je hier een aparte plugin voor nodig. Wij maken gebruik van Elementor DB, maar Elementor Leads is ook een plugin die je hiervoor kunt gebruiken. Die laatste bevelen we niet aan, omdat we bij sommige klanten hebben gemerkt dat niet alle inzendingen worden opgeslagen.

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

Meer handige tips ontvangen?

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.

15 reacties

  1. 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

  2. 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.

  3. 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

  4. 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?

  5. 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 🙂

  6. 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

  7. 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?

  8. 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

  9. 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

  10. 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

  11. 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

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Lees ook:

Meer handige tips ontvangen?

Hulp nodig?

SIJ Web biedt support bij de bouw van jouw website.
Tot 25% korting op Elementor Pro
Pssst...! Nog geen Elementor Pro? Of wil je jouw licentie upgraden? Profiteer nu van de CyberMonday sales met kortingen tot 25%
Korting

Tips ontvangen?

Schrijf je in voor updates!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.