So erstellen Sie ein vielseitiges Divi-Kontaktformular mit bedingter Logik

Nicht jeder Besucher kommt aus dem gleichen Grund auf Ihre Website. Sie bieten wahrscheinlich eine Reihe von Produkten oder Dienstleistungen an, nicht nur eine einzelne Option für Kunden und Kunden. Aus diesem Grund können mehrere zielgerichtete Kontaktformulare dazu beitragen, die UX Ihrer Website zu glätten, damit Ihre Kunden (und potenzielle Kunden) Sie so reibungslos wie möglich kontaktieren können, um genau das zu erfahren, was sie benötigen. Mit dem Divi-Kontaktformularmodul und unserer Funktion für bedingte Logik werden wir Sie durch die Erstellung der bestmöglichen Pipeline zwischen Ihnen und Ihren Benutzern führen.

Vorschau des bedingten Kontaktformulars

Wenn alles gesagt und getan ist, haben Sie etwas Ähnliches auf Ihrer Website, das von Ihren Besuchern verwendet werden kann.

Desktop

Handy, Mobiltelefon

Was ist bedingte Logik?

Zunächst wollen wir kurz ansprechen, was wir unter bedingter Logik verstehen. In diesem Tutorial richten wir eine Reihe von Kontaktformularen ein, die basierend auf den Entscheidungen des Benutzers angezeigt werden oder nicht.

Sie können beispielsweise ein einziges Kontaktformular haben, das sich an die vom Besucher benötigte Dienstleistung oder Produkt anpasst. Auf diese Weise erhalten Sie die Informationen in dem von Ihnen benötigten Format, anstatt sie ausschreiben zu müssen. Bedingte Logik in Kontaktformularen kann die Kommunikation verbessern und Ihre Fähigkeit, für Ihre Benutzer bereitzustellen, beschleunigen.

Lassen Sie uns in diesem Sinne die gezielten Kontaktformulare erstellen.

So erstellen Sie Kontaktformulare mit bedingter Logik

Laden Sie den Divi Builder

Da wir das Divi-Kontaktformularmodul verwenden, müssen wir den Divi Builder aufrufen. In diesem Tutorial verwenden wir das Landschaftspflege-Layoutpaket als Beispiel. Sie können jedes beliebige Layout oder Design verwenden, aber Sie müssen in der Lage sein, das Divi-Kontaktformularmodul zu verwenden und zu gestalten.

Rufen Sie zunächst den Divi Builder aus dem Backend Ihrer WordPress-Website auf. Im Seiteneditor sehen Sie eine violette Schaltfläche mit der Aufschrift Divi Builder verwenden (oder mit Divi Builder bearbeiten, wenn Sie die Seite bereits erstellt haben).

Das Kontaktformular-Modul hinzufügen oder finden

Dann suchen Sie das bereits auf der Seite vorhandene Kontaktformular-Modul oder klicken auf das Symbol Schwarz + Kreis und suchen das Kontaktformular im Dropdown-Menü.

Geben Sie die Kontaktformular-Einstellungen ein

Das Divi-Kontaktformular-Modul enthält standardmäßig 3 Felder: Name , E-Mail und Nachricht . Was wir tun werden, ist ein Kontaktformular zu erstellen, in dem diese Optionen erst angezeigt werden, wenn der Besucher uns genügend Informationen gegeben hat, um seine Anfrage richten zu können.

Fügen Sie die erste bedingte Frage hinzu

Auf der Registerkarte Inhalt und unter allen bereits im Formular vorhandenen Feldern sehen Sie die Schaltfläche Neues Feld hinzufügen. Klicken Sie darauf.

Dadurch öffnet so die Feldeinstellungen Fenster, und Sie sollten Plätze für Feld - ID und Titel Einträge. Die Feld-ID ist für Sie. Dies wird in den Moduleinstellungen angezeigt, damit Sie den Überblick behalten können. Der Titel ist der Text, den Ihre Besucher am vorderen Ende des Formulars sehen. (Der Titel wird auch in der E-Mail angezeigt, die Sie beim Absenden des Formulars erhalten.)

Wir haben die Feld-ID mit „Bedingt“ gekennzeichnet, da dies die erste Frage ist, die der Besucher im Formular sieht. Ihre Reaktion darauf wird bestimmen, was sie als nächstes sehen. Dies ist eine einfache Möglichkeit, den Fluss der Fragen und Antworten des Formulars zu verfolgen.

Feldoptionen hinzufügen

Scrollen Sie als Nächstes unter der Registerkarte Inhalt zum Abschnitt Feldoptionen . Hier fügen Sie die Auswahlmöglichkeiten für den Benutzer hinzu. Jeder von ihnen wird ein Auslöser für bestimmte Folgefragen sein. In diesem Beispiel verwenden wir Checkboxen als Eingabetyp. Dies bedeutet, dass der Benutzer so viele auswählen kann, wie er möchte.

Neben Ankreuzfelder, Divi ermöglicht auch andere Optionen: Eingabefeld und Textbereich für den eigenen typisierte Antworten Wählen Sie Dropdown und Radiobuttons für singuläre Auswahl des Benutzers Sie, sowie E - Mail - Feld für die E - Mail - Adresseintrag geben. Das Standardfeld Name ist ein Eingabefeld und Nachricht ist ein Textbereich .

Wenn Checkboxen ausgewählt sind, geben wir die Auswahlen ein, die wir später verschiedene Optionen auslösen möchten. Wir möchten dann sicherstellen, dass dies ein Pflichtfeld ist, damit der Benutzer das Formular nicht vorzeitig absenden kann.

Es ist hier wichtig zu beachten, dass wir diesem Schritt keine bedingte Logik hinzufügen . Dies ist der Auslöser, sodass er dem Benutzer unabhängig davon angezeigt wird.

Neue Felder für bedingte Antworten hinzufügen

Als nächstes werden wir jedoch Bedingungslogik für die neuen Felder hinzufügen, die wir als Folgeantworten hinzufügen. Da wir 3 Optionen für die Ausgangsfrage hinzugefügt haben , werden wir dem Formular 3 neue entsprechende Felder hinzufügen . Sie werden die folgenden Schritte für jeden wiederholen.

Benennen Sie die bedingten Antworten in den neuen Feldern

Beachten Sie, dass wir die Namenskonvention Bedingung 1 (um den ersten bedingten Auslöser anzuzeigen) und dann 1a , 1b und 1c für Folgeantworten verwendet haben. Wir haben sie auch entsprechend gekennzeichnet, damit wir den Überblick behalten können.

Wie bei der ersten Frage geben wir auch den Titel als Frage ein, die der Besucher sieht.

Bedingte Logik zu den Antwortfeldern hinzufügen

Scrollen Sie anschließend nach unten zum Abschnitt Bedingte Logik unter der Registerkarte Inhalt dieses Felds. Aktivieren Sie den Schalter für Bedingte Logik . Wählen Sie dann die Relation für diese aus, d. h. Sie können sie auf any (eine beliebige Anzahl von Antworten kann diese Option anzeigen lassen) oder alle einstellen (nur die spezifische Kombination von Antworten lässt dieses Feld erscheinen).

Wenn Sie wie wir nur eine einzelne Triggerregel verwenden, funktionieren entweder eine oder alle .

Unter Regeln sehen Sie das Feld, das diese auslöst, und rechts können Sie auswählen, welche Auswahl sie auslöst. Die Mitte ist der Qualifizierer, z. B. ist gleich, ist nicht gleich, ist kleiner als, ist größer als und so weiter. Für dieses spezielle Feld wählen wir die Frage aus, die wir als Bedingung 1 festgelegt haben, und dann die darin enthaltene Option, die das Erscheinen dieses Felds speziell auslöst.

Wiederholen Sie dies für alle bedingten Antworten

Da wir unserer einzelnen bedingten Frage drei verschiedene Antworten hinzugefügt haben, werden wir diesen Vorgang auch für die anderen Felder wiederholen. Erstellen Sie nur die entsprechenden korrelativen Antworten für diese Auswahl.

Setzen Sie Kontakt Formular Fiends 'Name/E-Mail/Nachricht' auf Erscheinen

Sobald Sie die Antworten für die bedingte Logik eingerichtet haben, möchten wir, dass der Besucher das Formular tatsächlich absenden kann. Dazu passen wir die Bedingungslogik in den Feldern Name , E-Mail und Nachricht an . Das Setup für jeden von ihnen ist genau gleich, also wiederholen Sie dies noch einmal dreimal.

Wechseln Sie in den Einstellungen für die Felder Name , E-Mail und Nachricht zu Bedingte Logik . Aktivieren Sie es und fügen Sie so viele Antworten hinzu , wie Sie endgültige Antworten auf Ihre bedingten Folgefragen haben. In unserem Fall haben wir 3 Folgefragen, also verwenden wir 3 Regeln.

Wählen Sie für jede Regel die Folgefrage als Auslöser. Setzen Sie den Qualifer auf is not empty , was bedeutet, dass die Bedingung erfüllt ist, solange der Besucher die Frage beantwortet hat. Dadurch wird das letzte Kästchen ausgegraut, was darauf hinweist, dass jede Antwort ausreichend ist.

Speichern Sie Ihre Änderungen und wiederholen Sie dies für alle Felder, die angezeigt werden sollen, um die Formularübermittlung zu ermöglichen . Und das ist es! Ihr Formular passt sich sofort den Bedürfnissen Ihrer Benutzer an.

Endgültige Ergebnisse

Unten sehen Sie, wie die bedingte Logik in der Praxis funktioniert.

Desktop

Handy, Mobiltelefon

Einpacken

Das Kontaktformular ist eines der allgegenwärtigsten Elemente einer Website. So ziemlich jede Site hat eine, und so ziemlich jede Site braucht eine. Aber nicht jeder Benutzer kommt aus dem gleichen Grund auf Ihre Website. Durch die Verwendung der Bedingungslogikfunktion von Divi können Sie Ihre Kontaktformulare in ein vielseitiges Werkzeug für die Kommunikation Ihrer Benutzer anpassen.

Welche Arten von Formularen haben Sie mit der Funktion Divi Conditional Logic erstellt?

Beitragsbild des Artikels von Kubko / shutterstock.com