Stap 8: Formulier

Een groot voordeel van de Page Builder is de mogelijkheid tot het toevoegen van formulieren in de landingspagina’s. De formulieren zijn geconnect met je Webpower-database. Lees hierover meer in dit artikel. 

In dit voorbeeld maken we een nieuwsbrief-aanmelding. We beginnen door een 1-koloms lay-out toe te voegen. De lay-out geven we een donkere achtergrondkleur. De background width is full en de padding is: 70px, 20px, 70px, 20px.

Vervolgens voegen we hier het formulier-blok aan toe. Binnen het formulier-blok krijg je een selectie te zien van blokken die je kunt toevoegen. In dit formulier willen we uitvragen: e-mailadres, voornaam en achternaam. We hebben ervoor gekozen deze velden verplicht te maken, omdat we anders niet met de voornaam kunnen personaliseren.

We beginnen door het formulier hier toe te voegen en de settings van het formulier in te stellen naar onze wensen:

• Form titel: Meld je aan voor de nieuwsbrief
• Submit button-tekst: Aanmelden
• Succes message after submit: Je hebt een e-mail ontvangen. Bevestig je aanmelding direct
• Error message is failed to submit: Oeps, er is iets misgegaan. Probeer het nogmaals
• Recaptcha: nee
• After submit place contact in group: Aanmelders
• Place new contacts in opt-in group: Yes

Hierna geven we de button styling mee:

We gaan nu de formuliervelden toevoegen. Omdat de ontvanger van het formulier de velden zelf in moet vullen, gebruiken we hiervoor ‘‘tekstvelden’’. Lees meer over de te kiezen formuliervelden in dit artikel.  Het veld e-mail koppelen we aan het correcte databaseveld door in het rechterscherm aan te geven ‘‘link aan databaseveld in Webpower = e-mail’’. Ook geven we aan dat het veld gevalideerd moet worden (controle van het e-mailadres). Tot slot geven we de tekst een styling door de tekst wit te maken.

De styling voor het formulier-item staat nu goed. We willen hetzelfde soort veld (text field) gebruiken voor de voor- en achternaam en daarom kopiëren we de velden. Hierin passen we natuurlijk wel de teksten aan en ook vinken we de opties verplicht en validate aan en/of uit.

Tot slot willen we nog de opt-in-check doen. Hiervoor gebruiken we het formulierveld: Opt-in. We geven het veld het label: Ik ga akkoord met de voorwaarden. Tip: link hierbij naar de voorwaarden op je website. Uiteraard moet ook dit veld nog de juiste styling krijgen:

Gefeliciteerd, je hebt nu een landingspagina gemaakt!