Home / WordPress / Beginners / WordPress Contactformulier maken in 3 simpele stappen

WordPress Contactformulier maken in 3 simpele stappen

WordPress Contact formulieren plugin

Het toevoegen van een WordPress Contactformulier op je site is niet moeilijk. Met de gratis plugin Contact Form 7 plaats je in een handomdraai een formulier op je WordPress site. Netjes een mail naar je bezoeker sturen ter bevestiging? Ook dat is geen probleem. Lees mee en plaats je formulier in enkele stappen!

Stap 1

Welke plugin voor een WordPress Contactformulier?

Jaren geleden schreef ik hierover een artikel op mijn blog. Nog steeds is het één van de meest gelezen artikelen: De beste Contactformulier plugins voor WordPress. Om een lang verhaal kort te maken: er zijn twee plugins die qua gebruik en mogelijkheden boven de rest uitsteken:

  1. Gravity Forms (de beste, maar niet gratis)
  2. Contact Form 7 (gratis)

Gravity Forms biedt echt veel meer mogelijkheden om professionele formulieren te maken. Maar goed, veel gebruikers zullen in eerste instantie voor de gratis variant kiezen. Heb je alleen maar een eenvoudig contactformulier nodig dan is dat eigenlijk ook wel prima. In deze tutorial maken we daarom ook gebruik van Contact Form 7.

Dit is een handleiding voor beginners, dus ook de voor de hand liggende stappen slaan we hieronder niet over.

Installeer de plugin via Plugins - Nieuwe plugin en tik in het zoekvenster in: contact form 7.

Contact Form 7 Installeren

Klik op Nu Installeren en bevestig de vraag of je de plugin wilt installeren.

WordPress contactformulier

Activeer de plugin. Links in het menu verschijnt nu een extra menu optie: Contact. Je keert terug in het scherm met geïnstalleerde plugins. Van daaruit kun je de instellingen van de plugin bewerken, maar voor een eenvoudig contactformulier hoef je dat niet te doen.

Stap 2

Contactformulier aanmaken

We gaan nu het formulier aanmaken. Of eigenlijk bewerken, want er is al een basisformulier voor je aangemaakt. Klik links in het menu op Contact. Klik vervolgens op de titel van het formulier dat er al is of klik op de link Bewerk.

contactformulier-maken

Je krijgt nu de opbouw van je formulier te zien. In feite is ddit een stukje HTML code. Je mag het bewerken, maar moet daarvoor natuurlijk wel enige basis HTML kennis hebben. Wil je alleen de aanspreekvorm wijzigen van U naar Je? Dan zie je eenvoudig hoe je dat moet doen.

contactformulier-wordpress-bewerken

Met het kader rechts kun je extra velden aanmaken in verschillende soorten. Dat hebben we nu echter niet nodig. Scroll een stukje naar beneden. Daar zie je de email instellingen, waarmee je bepaalt hoe de email eruit ziet die JIJ ontvangt.

wp-contactformulier-email-instellen

Links zie je waar het bericht naartoe gezonden wordt. Rechts bepaal je de inhoud van de email. Merk op dat de veldnamen zoals die erboven in het HTML gedeelte zijn vastgelegd, hier weer gebruikt worden.

Tip: Mail ter bevestiging sturen aan je bezoeker?
Zet dan een vinkje bij het veld Mail2 en bepaal vervolgens de inhoud ervan.

Iets gewijzigd of toegevoegd? Klik dan rechts bovenin op de knop Opslaan.
Selecteer nu de code van het formulier en kies kopiëren.

contactformulier-code-kopieren

Stap 3

Contactformulier op een WordPress pagina opnemen

We zijn er bijna. De code van het formulier die je net hebt gekopieerd, voeg je nu toe aan een nieuwe pagina. Die pagina noemen we natuurlijk Contact.

Contactformulier op Pagina opnemen

Dat is alles! Publiceer je pagina en bekijk het resultaat. Hieronder zie je een voorbeeld met het Twenty Fourteen theme. Afhankelijk van je theme kan jouw versie er iets anders uitzien natuurlijk.

WordPress Contactformulier Resultaat

Met Contact Form 7 is natuurlijk nog veel meer mogelijk. Maar vaak heb je dat niet nodig en gaat het gewoon om het plaatsen van een eenvoudig maar goed contactformulier.

Meer weten? Op de hoogte blijven van meer Nederlandse WordPress tutorials? Mis het niet en schrijf je in voor de gratis WordPress Nieuwsbrief!

50 comments

  • Hallo naamgenoot,

    Mooi artikel en helder!
    Contact form 7 is inderdaad een mooie tool.

    Wellicht is het ook interessant voor je om een artikel over CloudFormz te schrijven?
    Dit is een online formulier generator die verder gaat dan enkel contactformulieren.

    Via een kant en klare WordPress plugin kan men via een dropdown een gemaakte formulier selecteren en ook via een shortcode plaatsen.

    Bij deze de link naar de video tutorial:
    http://www.youtube.com/watch?v=Tl6fSvmXGlU

    Heb je nog vragen? Stel ze gerust.

    Met vriendelijke groet,

    Robbert van CloudFormz

  • Hallo,

    Ik ben een site aan het maken en nu heb ik een contactformulier geplaatst. Naast dat de lay-out in de sidebar nog niet naar mijn zin is, gaat mijn vraag hier niet over.

    Als ik een test doe met het formulier, komen de berichten niet binnen. Ik heb gedaan wat hierboven vermeld stond. Wat heb ik gemist?

    Als het kan de uitleg graag in zeer simpele stappen, want ik ben een super-dummie-digibeet en geen computergeleerde.
    Alsvast bedankt.

  • Hoi,
    Volgens mij heb ik al de stappen genomen die je liet zien, maar als resultaat krijg ik een nederlands contactformulier met daaronder een engels. Hoe krijg ik die engelse weg?

    gr Renate

  • Hallo Elene
    Je hebt niets gemist.
    Als je de melding krijgt dat het bericht wordt verzonden, maar je ontvangt het niet, dan is de kans groot dat het probleem bij je provider/hosting ligt.
    Krijg je wel een email als er iemand een reactie plaatst op je website?
    Zo nee, overleg dan met je provider.
    Zo ja, dan is het iets anders en zou het gewoon moeten werken.
    Succes!

  • Hallo Renate
    Ik denk toch dat je dan iets niet helemaal juist gevolgd hebt. Het doet vermoeden dat je de code er nu 2x in hebt staan, 1x in het Nederlands en daaronder het origineel in het Engels.
    Lukt het je niet dan mag je ook een email sturen: robbert @ joomblocks.com
    Succes!

  • Beste Robbert,

    ik ben bekend met de plugin, gebruik hem op een aantal sites en hij bevalt mij prima. Belangrijk voor mij om te weten, ik zou graag elke contactaanvraag willen meten. Veelal wordt er gebruik gemaakt van een bedanktpagina waar een aparte conversietracker opgezet wordt welke dan als lead wordt aangemerkt. Weet je of dit mogelijk is? Dus i.p.v. een melding “bedankt voor het invullen” e.d. zou ik graag willen dat een pixel afgevuurd wordt. Heb je daar ervaring mee?

    Een on-click tracker kan uiteraard ook, maar ik weet niet hoe ik dat op de button kan krijgen.

    hoor het graag!

    groet,

    Robin

  • Hallo Robin
    Ik begrijp het probleem. Wat dat betreft is deze plugin niet ideaal. Het is met een extra scriptje wel mogelijk om naar een bedankpagina te gaan, maar het is al een soort workaround.
    wat dat betreft is een niet-gratis plugin zoals Gravity forms, veel handiger in het gebruik.

  • Hoi,

    Heel duidelijke tutorial.
    Ik had alle stappen gevolgd en het ging helemaal goed, maar als ik een test mail stuur (eerst in de draft versie, maar dacht dat het daar mss aan lag en later in de gepubliceerde versie) geeft hij aan: Failed to send your message. Please try later or contact the administrator by another method. Weet je waar dat aan kan liggen?

    Groet, Helen

  • Hallo Helen
    Ligt waarschijnlijk aan de instellingen op de webserver waar je website draait. Dat hoort overigens niet. Ik adviseer je om even met je provider contact te zoeken.

  • Beste Robbert,
    Dank voor je waardevolle input en info!
    Ik heb met Contact Form 7 een contactformulier gemaakt en geïntegreerd op een webpagina, maar ik wens de font-size van de in de diverse velden in te voeren gegevens te vergroten. Ook wens ik misschien de getoonde veldgrootte te vergroten, bijv. om een adres volledig te tonen. Hoe doe ik dat?
    Bij voorbaat dank voor je hulp.
    Met vriendelijke groet,
    Frank

  • Hallo Esther
    De site van NCOI bevat natuurlijk een flink stuk maatwerk. Dat komt niet kant-en-klaar uit een plugin rollen op die manier.

    De WordPress plugin die de meeste mogelijkheden biedt op dit gebied is Gravity Forms.

  • Ik heb er zelfs een reserveerformulier meegemaakt, een aan en afmelding voor nieuwsbrief en natuurlijk een contactformulier. Werkt perfect.

  • Beste Robbert, ik werk al wat langer met Contactform 7 en ben er ook zeer over te spreken. Echter, ik ben nu bezig voor een autorijschool en wil dan ook de velden geboortedatum en adresgegevens laten invullen. Deze worden aan de voorzijde wel getoond en kunnen ook ingevuld worden, maar ik krijg ze via de mail niet binnen. Wat doe ik verkeerd? Ik kan evt. een printscreen sturen van het formulier.

    Groeten,
    Inge

  • Hallo Inge,
    Je moet de velden ook opnieuw in het mailtje dat wordt verzonden, dat gaat niet automatisch. Ik stuur je een printscreen.
    gr Robbert

  • Beste Robbert,
    ik heb zojuist het contactformulier ingevoegd. Ik ben echt een newbie wat betreft WordPress, heel erg bedankt voor de heldere uitleg, het werkt!
    Nu wil ik alleen de ‘verzenden’knop aanpassen qua kleur. Ik heb overal gezocht in de themeinformatie, maar ik kan nergens vinden waar ik de kleur van knoppen kan veranderen.
    Ik hoop dat je mij kunt helpen!

    Groetjes,
    Patricia

  • Hallo, ik heb net voor het eerst een blog aangemaakt. En de uitleg ziet er duidelijk en makkelijk uit!
    Alleen kan ik geen plugins installeren. Ik heb ook geen apart kopje in mijn sidebar met plugins.
    Is dat omdat ik een standaard account heb? Weet u dat misschien?

    Groetjes Chantal

  • Hallo Peter
    De gekopieerde codes die je erin geplakt hebt worden hier weer omgezet naar html, waardoor dit vreemde effect ontstaat.
    Ik vermoed overigens dat dit stukje code uit je theme komt (comment-sectie) en niet veroorzaakt wordt door de plugin.
    gr Robbert

  • Allemaal prachtige reacties. Ik ben bezig de verzendknop een kleur te geven en het formaat aan te passen. Op zich begrijp ik wel genoeg hoe dit te realiseren is met CSS alleen kom ik er niet achter hoe en waar ik dit in het formulier moet plaatsen. Graag een reactie alvast bedankt.

  • Mooi formulier, ik heb alleen wel een groot probleem.
    Tijdens het testen wanneer ik mijn privé-email noteer ontvang ik de mail goed. Als ik mijn werkmail opgeef krijg ik niets binnen. De e-mail instellingen staan goed en er is geen sprake van spam.

    Weten jullie waar dit nog verder aan kan liggen?

  • De plugin genereert uiteindelijk de HTML en CSS code voor je.
    Wil je aanpassingen doen aan die CSS dan neem je die wijzigingen op in het CSS bestand van je theme, of beter nog, van je child-theme.

  • Hallo Angela
    Je geeft zelf al aan dat het mechanisme om de mail te verzenden goed werkt. Dat is niet afhankelijk van het emailadres, dus de mail zal de server waarop jouw website draait verlaten. Dat je hem vervolgens op je werk niet binnen krijgt betekent maar 1 ding: het wordt ergens tegen gehouden en vermoedelijk toch ergens door een spamfilter.

  • Hallo,

    ik krijg iedere keer als ik probeer de gegevens in te vullen in het contact formulier de volgende melding :
    Het verzenden van je bericht is mislukt. Probeer het a.u.b. later nog eens, of neem op een nadere wijze contact met ons op.

    ik heb aan het orgineel verder niets veranderd alleen dan mijn eigen mail adres in gevuld waar het mailtje naar toe gestuurd moet worden.

    Gr Maurice

  • Hallo Maurice, hier kunnen enkele oorzaken voor zijn:
    – mailadres niet juist ingesteld (wellicht zelfs een spatie ervoor of erna).
    – provider ondersteunt geen mailverkeer vanuit WordPress. Daar is vaak wel iets aan te doen, maar dat zou je dan even met je provider moeten kortsluiten.
    groeten Robbert

  • Hallo,
    Ik wil dat mensen op mijn website via een beslisboom producten kunnen kiezen en afhankelijk van de keuze, zijn bepaalde producten te kiezen/aanvinkbaar. Uiteindelijk moet aan het eind een lijst producten overblijven met producten en totaalprijs.
    Hoe krijg ik dit voor elkaar?
    Het is voldoende als ik weet waar ik moet zoeken of waar ik mij verder in moet verdiepen.
    Een kant en klare oplossing is natuurlijk ook welkom.
    Alvast dank voor de tijd en moeite en met vriendelijke groter, Nikolaj

  • Hallo Nikolaj
    Dit kan met bijv gravity forms, maar je zult al snel in maatwerk terecht gaan komen.

    wellicht is een combinatie van woocommerce en een product configurator ook een goede optie. Zoek in google op: woocommerce product configurator
    Succes

  • Hallo
    is het mogelijk een formulier te maken dat je je als abonnee kan aanmelden
    maar ook een keuze hebt in een ander factuuradres?
    dus:
    * zelfde factuuradres
    * ander factuuradres

    bvd
    gr Carel

  • Hallo Carel,
    Dat valt te doen, maar een plugin zoals Gravity Forms is dan wel handig om in te zetten. Dan kan het nog zijn dat je wat code nodig hebt om het te realiseren, maar daarmee is het in ieder geval mogelijk om zoiets te bouwen.
    gr Robbert

  • Beste Robbert,

    Ik heb de meest simpele versie van wordpress (gratis). Ik probeer de plugin te installeren maar onder het tabje plugins zie ik alleen “wil je een webshop toevoegen? Upgrade!”

    Doe ik iets verkeerds of is het tegenwoordig niet meer mogelijk om met de gratis wordpress versie plugins te installeren?

  • Hallo Robbert
    Ik kan de tekst in de verzend niet button lezen.
    Is bij mij onzichtbaar.
    Omdat ik beide achtergronden transparant heb gemaakt.
    En wil dit ook zo houden.
    Kan dit ergens aanpassen?

  • Ik gebruik al contact form 7, is inderdaad een mooie tool. Maar laatste tijd krijg ik de volgende foutmelding:
    “Het verzenden van je bericht is mislukt. Probeer het a.u.b. later nog eens, of neem op een nadere wijze contact met ons op.”
    Kan iemand mij vertellen wat de oorzaak en mogelijke oplossing is?

  • Hallo Salah, Je zult gemerkt hebben dat het bericht dan ook echt niet wordt verzonden. Als ik je vraag zo lees dan haal ik eruit dat het voorheen wel werkte en nu niet meer? Dat is op zich vreemd. Wat je in ieder geval kunt doen is controleren of WordPress überhaupt nog wel emails verstuurt. Worden er wel mails verzonden wanneer er een reactie geplaatst wordt bijvoorbeeld of wanneer je de wachtwoord vergeten functie gebruikt?

  • Beste mijn vraag is. nu zijn. al mijn text balken zijn even lang over de breedte.
    Hoe kan ik er voor zorgen dat de balk waar je bijvoorbeeld onderwerp invoert kleiner is dan het tekst vlak

  • je hebt een foutje onderaan je web pagina: [box color=”green”]Meer weten? Op de hoogte blijven van meer Nederlandse WordPress tutorials? Mis het niet en schrijf je in voor de gratis WordPress Nieuwsbrief![/box]

  • Hoi Ik heb een probleem met ontvangen van de inhoud van het formulier
    Het formulier met NAW gegevens wordt netjes verstuurd maar ik krijg geen gegevens te zien enkel het emailadres van de invuller. Hoe los ik dit op? b.v.d.

  • Johan van der Heijden

    Beste Robbert, is het mogelijk om bij het contactformulier van DIVI de tekst van de verzendknop ‘INDIENEN’ te veranderen naar ‘VERZENDEN’. is het raadzaam om voor zo’n contactformulier toch een ander plugin te gebruiken?

    Groeten, Johan

  • Hoi,

    Mij lukt het eigenlijk nooit echt om dit contactformulier werkend te krijgen. Op dit moment zit ik op mijn localhost om te testen. Ik heb hier een website voor een hotel en de functies in en uit checken. Ik krijg deze error: There was an error trying to send your message. Please try again later. Houd dit in dat ik een verkeered e-mailadres gebruik? Ik gebruik momenteel namelijk het e-mailadres waar ik mee ben ingelogd.

  • Als je op een lokale testomgeving werkt mbv bijvoorbeeld xampp of mamp dan werkt het verzenden van email vanuit WordPress sowieso standaard niet. Je kunt dat wel oplossen, maar dat kost het nodige configuratiewerk.
    Draait je website bij een reguliere WordPress provider zoals bijvoorbeeld Byte, Managedwphosting dan werkt dit vlekkeloos. Mocht dat bij jouw provider ook niet lukken laat het dan even weten. Succes!

  • Ik heb een formulier aangemaakt maar wil het graag achter een button “direct inschrijven” hangen. Dus als je op de direct inschrijven knop klikt dan in het inschrijfformulier komt. Iemand die weet of dit kan en hoe het moet?

  • Hallo Jikke, je hebt dus een functie nodig waarmee je een button kunt plaatsen. Die button link je vervolgens naar een aparte pagina waar je het formulier op plaatst.
    Soms zitten button functies in je theme. Heb je dat niet dan kun je er een plugin voor inzetten.

  • Ik gebruik contactform ook en ben er zeer tevreden over. Nu zit ik met het volgende. Ik wil een geboortedatum via een datepicker in het formulier opnemen. Maar in de standaard addon voor contact 7 kan ik steeds maar 1 maand terug of vooruit, maar als je bij geboortedatum naar bijv. 1950 moet, dan lijkt me dat er een andere oplossing moet zijn.

  • Hallo Robbert. Bedankt voor de reactie. Ja, ik gebruik die plugin, maar ik had op het datum-veld niet voldoende naar beneden gescrolld.. Ik heb het change-veld nu gezien. Maar toch nog een vraagje. Als ik bij “jaar van” 1930 invul (vanwege geboortedatums) en bij “jaar tot” 2017, dan houdt de plugin daar geen rekening mee. Hij gaat dan van 2007 tot 2027. Misschien heeft het iets te maken met het feit dat hoewel Contact-form 7 correct getest is met mijn thema (Happenstance) de bijbehorende datepicker dat niet is. Want nadat ik het contactformulier heb opgeslagen, geeft wordpress me de boodschap of ik de pagina wel wil verlaten en dat data mogelijk niet wordt opgeslagen. Misschien nog een hint?

Plaats een reactie

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