Contactformulier met WPForms Lite

uit de cursus Website bouwen met WordPress

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Website bouwen met WordPress

perm_identity Walter van Rooij | video_library 34 video's | query_builder 3:06:49

Content Management Systeem (CMS) WordPress

Met het gratis Open Source CMS WordPress kun je professionele websites maken voorzien van alle functionaliteiten die je maar wenst. WordPress maakt gebruik van Thema’s voor de vormgeving en plug-ins voor de functionaliteiten.

Omdat WordPress wereldwijd een enorm populair CMS is en de basis vormt voor miljoenen websites is het een zeer betrouwbaar CMS waar continu gewerkt wordt aan veiligheid en functionaliteit. Vanwege de populariteit worden er ook veel plug-ins ontwikkeld door derden.

Je leert…

In deze cursus leer je hoe je met WordPress een website opzet met behulp van templates. We behandelen het downloaden en installeren van de meest belangrijke plug-ins. Denk aan SEO, Google maps, contactformulieren, privacyverklaring (GDPR), fotogallerijen etcetera

Uiteindelijk zorgen we ervoor dat je precies weet hoe je jouw website online op het world wide web krijgt. Binnen no time ben jij online.

Deze les gaat over het maken van een contactformulier op je website.

Een contactformulier is een gangbare optie om op je website te hebben.

Je kan ermee regelen dat je klanten gerichte informatie aan je zenden.

Bovendien het is beter dan het plaatsen van een e-mailadres op je website,

Want dat trekt extra Spam

Want dat trekt extra Spam

Sommige thema's hebben de formulier-functionaliteit ingebouwd.

Ons Lighthouse-thema heeft dat niet, en in dat geval

moeten we omzien naar een Plugin om een formulier voor ons te maken.

om dat te laten zien log ik in op de achterkant van de website en ga daar op zoek

naar WPForms.

Ik ben hier in de achterkant van de website, ik ga naar Plugins

en ik klik op Add New.

De plugin die ik zoek heeft de naam

WPForms Lite

een gratis plugin zoals je aan de naam kan zien,

daar is WPForms.

Ik install

Het installeren is gelukt, ik Activate.

en het activeren is ook gelukt.

Zoals je kunt zien kan ik hier een Video-tutorial volgen

die me vertelt hoe ik met WPForms moet omgaan

die me vertelt hoe ik met WPForms moet omgaan

die me vertelt hoe ik met WPForms moet omgaan

maar het is gelukkig erg eenvoudig, dus ik laat het je zo zien.

Zoals je kan zien is in de menubalk links een kopje WPForms verschenen. Daar klik ik op.

En hier is te zien dat ik nog geen formulier heb hgemaakt. Ik klik op Add New.

Ik mag mijn formulier een naam geven

contactformulier,

en ik mag een styling voor het formulier kiezen.

dat zegt me op dit moment nog niks, laat ik met een Blank Form beginnen.

En hier kan ik zien dat het bouwen van een formulier

een soort Drag and Dro-systeem is dat met blokken welkt.

Heel comfortabel.

Ik begin met het kiezen van een naam.

Als ik op het veld klik zie ik links in beeld dat ik het mag invullen,

het Label heet Name

en de description zegt: Uw Naam

De descriptie is het gedeelte van het formulier dat ik in beeld zal zien.

Het formaat

kan ik Simple laten zijn

en zoals je kan zien betekent dat dat ik een invulveld krijg

waar mensen hun naam in kijk kunnen.

Bij de Advanced options

zie ik dat ik het label Name kan Hiden, kan verbergen.

Dat betekent dat ik het label niet in beeld krijg

naar het label speelt wel een rol in de afhandeling van het formulier.

Ik klik op Save.

Ik klik op Add Field.

Ik wil nog zo'n veld,

en dat geef ik de naam Adres.

Ik klik op het veld,

het label zal Adres gaan heten, het label zal ik straks verbergen,

het Format maak ik weer Simple

en de description: uw adres.

In de advanced options heb ik, net zoals net,

de mogelijkheid om het label onzichtbaar te maken.

Ik Save.

Ik ga nog een field toevoegen.

Ik kies opnieuw het Name-veld.

Ik klik op het veld

woonplaats

het label zal ik straks weer verbergen

Het formaat van mijn tekstregel wordt Simple,

En de tekst in het veld zelf

wordt Uw woonplaats.

Bij de Advanced options kies ik weer voor Hide Label

en ik Save

Het volgende veld dat ik toevoeg

een e-mailadres

het label: e-mail en de description:

uw e-mail adres.

Ook hier zeg ik dat het label moet worden verborgen

ik Save

en ik voeg nog een veld toe

en bij de Descriptie vul ik in: Uw vraag.

Mensen kunnen hier een vraag stellen.

Ik klik op Save

Ik heb nu een heel eenvoudige setup voor mijn concactformulier

Ik sluit het formulier.

Terug in het overzichtsvenster van WPForms

zie ik dat er een Shortcode is

Dit heb ik al eens eerder bij de hand gehad

toen het ging over Google Maps. Die code kan ik kopiëren

en in mijn tekstpagina of in een Widget plaatsen

en zo het formulier tevoorschijn laten komen aan de voorkant van mijn website.

Ik kopieer deze Shortcode

en ik ga naar een pagina

waar ik het formulier wil plaatsen.

DE meest logische plek: de contactpagina.

Daar is de pagina

en zoals je weet: in de Editor geldt dat er twee aangezichten zijn.

Ik heb een Visual editor en ik heb een Code-editor.

en ik heb al eerder meegemaakt dat ik stortcode plaatste van Google-maps

dat als ik code wil plaatsen, dat ik dat in het code-gedeelte moet doen.

onderaan de pagina maak ik ruimte en ik plak mijn shortcode

en ik Save

Nu naar de voorkant van de website om het resultaat te bekijken.

Ik ben hier in de voorkant van de website en ik klik hier op Contact

om het formulier te bekijken.

en inderdaad, het ziet er prachtig uit.

De volgende stap die we moeten nemen, is terug naar WPForms

om daar het e-mailadres te checken.

Ik ga daarvoor terug naar de achterkant van de website.

en ik ben hier terug in mijn formulier.

Ik ga hier in de linkermarge naar het kopje Settings.

Daar zie ik de naam van het ciontactformulier,

Daar zie ik de naam van het ciontactformulier,

Daar zie ik de naam van het ciontactformulier,

ik kan er eventueel een beschrijving aan toevoegen en ik kan er een styling aan toevoegen.

Maar het belangrijkste staat bij Notifications.

Hier kan ik een e-mailadres achterlaten van de ontvanger van het formulier.

In principe ben ik dat zelf als Super-User

dat kan je zien aan met e-mailadres dat hier tussen de accolades staat.

Maar, soms wens je zelf als Super-administrator

niet de ontvanger van de post te zijn.

Ten slotte ga ik naar het kopje Confirmation.

Ten slotte ga ik naar het kopje Confirmation.

bevestiging, betekent dat.

Hier zie je dat er een Message zal worden achtergelaten,

en die is in het engels

maar een nederlandse melding zou kunnen zijn:

Hartelijk dank voor uw vraag,

we beantwoorden deze zo snel mogelijk.

Ik Save

en ik sluit.

en ik ga naar de voorkant van de website

waar ik Refresh.

en ik ga een inzending proberen.

en ten slotte klik ik op Submit.

Zoals je ziet geeft het formulier een keurige reactie af.

In mijn e-mailprogramma

zal ik de bevestiging zien

dat alles prima werkt.

Tot zover de les over WPForms Lite.