Contactformulier module

Datum: 12 januari 2022

Een contactformuliermodule aan jouw pagina toevoegen

Voordat je een contactformuliermodule aan je pagina kunt toevoegen, moet je eerst in de Divi Builder springen. Zodra het Divi-thema op jouw website is geïnstalleerd, zie je elke keer dat je een nieuwe pagina maakt een knop Divi Builder gebruiken boven de berichteditor. Als je op deze knop klikt, wordt Divi Builder ingeschakeld en krijg je toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in de visuele modus te starten. Je kunt ook op de knop Visual Builder inschakelen klikken wanneer je aan de voorkant door jouw website bladert als je bent aangemeld bij jouw WordPress-dashboard.

Nadat je de Visual Builder hebt geopend, kan je op de grijze plusknop klikken om een ​​nieuwe module aan jouw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als je een nieuwe pagina begint, vergeet dan niet eerst een rij aan jouw pagina toe te voegen. Ik heb een aantal tutorials over het gebruik van de rij- en sectie-elementen geschreven.

Zoek de contactformuliermodule in de lijst met modules en klik erop om deze aan je pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat je ook het woord “contactformulier” kunt typen en vervolgens op enter kunt klikken om de contactformuliermodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, zie je met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud, Ontwerp en Geavanceerd.

Opties voor contactformulier inhoud

Op het tabblad inhoud vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in jouw module wordt weergegeven, vind je altijd op dit tabblad.

Titel

Definieer een titel voor je contactformulier.

Succesbericht

Typ het bericht dat je wilt weergeven nadat het formulier is ingediend. Laat leeg om het standaardbericht te behouden: “Bedankt dat u contact met ons heeft opgenomen”.

Tekst knop verzenden

Hier kan je de tekst van de knop formulier verzenden definiëren.

E-mail

Voer het e-mailadres in waar berichten naartoe moeten worden gestuurd.
Opmerking: E-mailbezorging en spampreventie zijn complexe processen. We raden aan om een ​​bezorgservice zoals Mandrill, SendGrid of andere soortgelijke services te gebruiken om de bezorging van berichten die via dit formulier worden ingediend, te garanderen.

Berichtpatroon

Hier kan je het aangepaste patroon voor het e-mailbericht definiëren. Velden moeten worden opgenomen in het volgende formaat: %%field_id%%. Als je bijvoorbeeld het veld met id = phone en veld met id = message wilt opnemen, dan kan je het volgende patroon gebruiken: Mijn bericht is %%message%% en het telefoonnummer is %%phone%%. Laat leeg als standaard.

Captcha weergeven

Hier kan je de captcha met deze optie in- of uitschakelen.

Omleidings-URL inschakelen

Hier kan je ervoor kiezen om gebruikers om te leiden naar een andere URL nadat het formulier succesvol is ingediend.

Omleidings-URL

Hier kan je de omleidings-URL typen waar je wilt dat gebruikers na het indienen van een formulier naartoe gaan.

Achtergrondkleur formulier

Deze optie verandert de achtergrond van jouw formuliervelden.

Beheerderslabel

Dit zal het label van de module in de builder veranderen voor gemakkelijke identificatie. Bij gebruik van de WireFrame-weergave in Visual Builder, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Wat is conditionele logica?

Eerst wil ik kort ingaan op wat ik bedoel met conditionele logica. Wat we in deze tutorial gaan doen, is een reeks contactformulieren instellen die verschijnen op basis van de keuzes die de gebruiker maakt of niet maakt.

Het is mogelijk om bijvoorbeeld één contactformulier hebben dat zich aanpast op basis van welke dienst of welk product de bezoeker nodig heeft. Op die manier kan je de informatie krijgen in het formaat dat je nodig hebt. Conditionele logica op contactformulieren kan de communicatie verbeteren en te versnellen.

Laten we met dat in gedachten eens kijken naar het maken van de gerichte contactformulieren.

Voeg de eerste voorwaardelijke vraag toe

Op het tabblad Inhoud en onder alle velden die al in het formulier staan, ziet u de knop Nieuw veld toevoegen. Klik daarop.

Als u dit doet, wordt het venster Veldinstellingen geopend en ziet u plaatsen voor veld-ID en titel-items. De veld-ID is voor jou. Dat is wat er in de module-instellingen verschijnt om bij te houden. De titel is de tekst die jouw bezoekers aan de voorkant van het formulier zullen zien. (De titel verschijnt ook in de e-mail die je ontvangt wanneer het formulier wordt verzonden.)

We hebben de Veld-ID gelabeld met ‘Conditioneel’ omdat dit de eerste vraag is die de bezoeker op het formulier ziet. Hun reactie erop zal bepalen wat ze hierna te zien krijgen. Dit is een gemakkelijke manier om de stroom van de vragen en antwoorden van het formulier te volgen.

Veldopties toevoegen

Blader vervolgens onder het tabblad Inhoud naar het gedeelte Veldopties. Hier voegt u de keuzes toe waaruit de gebruiker kan kiezen. Elk van deze zal een trigger zijn voor bepaalde vervolgvragen. Voor dit voorbeeld gebruiken we selectievakjes als ons invoertype. Dit betekent dat de gebruiker er zoveel kan kiezen als hij wil.

Naast selectievakjes biedt Divi ook andere opties: invoerveld en tekstgebied voor de eigen getypte antwoorden van de gebruiker, vervolgkeuzemenu selecteren en keuzerondjes voor unieke keuzes die u opgeeft, evenals e-mailveld voor invoer van e-mailadressen. Het standaard veld Naam is een invoerveld en Bericht is een tekstgebied.

Met selectievakjes geselecteerd, zullen we de keuzes invoeren die we later verschillende opties willen activeren. We willen er dan zeker van zijn dat dit een verplicht veld is, zodat de gebruiker het formulier niet voortijdig kan indienen. Het is belangrijk op te merken dat we geen voorwaardelijke logica aan deze stap toevoegen. Dit is de trigger, dus het lijkt hoe dan ook voor de gebruiker.

Nieuwe velden toevoegen voor voorwaardelijke reacties

Vervolgens zullen we echter voorwaardelijke logica toevoegen voor de nieuwe velden die we toevoegen als vervolgantwoorden. Omdat we 3 opties voor de initiële vraag hebben toegevoegd, gaan we 3 nieuwe corresponderende velden aan het formulier toevoegen. Je herhaalt de volgende stappen voor elk.

Geef de voorwaardelijke reacties in de nieuwe velden een naam

Merk op dat we een naamgevingsconventie hebben gebruikt van Voorwaardelijk 1 (om de eerste voorwaardelijke trigger aan te geven) en vervolgens 1a, 1b en 1c voor vervolgreacties. We hebben ze ook op de juiste manier gelabeld, zodat we kunnen bijhouden wat ze zijn.

Voorwaardelijke logica toevoegen aan de antwoordvelden

Scrol daarna omlaag naar het gedeelte Voorwaardelijke logica onder het tabblad Inhoud van dat veld. Schakel de schakelaar voor voorwaardelijke logica in. Kies vervolgens de relatie voor deze, wat betekent dat je deze kunt instellen op willekeurig (elk aantal reacties kan deze optie laten verschijnen) of alle (alleen de specifieke combinatie van antwoorden laat dit veld verschijnen).

Als je slechts een enkele triggerregel gebruikt, werken een of alle regels.

Onder Regels zie je het veld dat deze activeert en aan de rechterkant kan je selecteren welke keuze deze activeert. Het centrum is de kwalificatie, zoals is gelijk aan, is niet gelijk aan, is kleiner dan, is groter dan, enzovoort. Voor dit specifieke veld selecteren we de vraag die we instellen als Voorwaardelijk 1 en vervolgens de optie erin die dit veld specifiek activeert.

Herhaal dit voor alle voorwaardelijke reacties

Omdat we drie verschillende antwoorden hebben toegevoegd aan onze enkele voorwaardelijke vraag, gaan we dit exacte proces ook voor de andere velden herhalen. Alleen de juiste correlatieve reacties voor die selectie creëren.

Stel Contact Form Fiends ‘Naam/E-mail/Bericht’ in op Verschijnen

Zodra je de reacties voor de conditionele logica heeft ingesteld, willen we dat de bezoeker het formulier ook daadwerkelijk kan verzenden. Daarvoor gaan we de voorwaardelijke logica aanpassen in de velden Naam, E-mail en Bericht. De setup voor elk van deze is precies hetzelfde, dus nogmaals, je herhaalt dit 3 keer.

Ga in de veldinstellingen Naam, E-mail en Bericht naar Voorwaardelijke logica. Schakel het in en voeg zoveel toe als je definitieve antwoorden hebt op de voorwaardelijke vervolgvragen. 

Kies voor elke regel de vervolgvraag als trigger. Stel de kwalificatie in op is niet leeg, wat betekent dat zolang de bezoeker de vraag beantwoordt, aan de voorwaarde wordt voldaan. Dat zal het laatste vakje grijs maken, wat aangeeft dat elk antwoord voldoende is.

Sla de wijzigingen op en herhaal dit voor alle velden die je wilt weergeven om formulierverzending toe te staan. En dat is het! Jouw formulier past zich direct aan de behoeften van de gebruikers aan.