So erstellen Sie ein Angebotsformular mit dem Kontaktformular-Modul von Divi

Ein Angebotsformular (auch bekannt als Anfrage-ein-Angebots-Formular) ist eine großartige Lösung für kleine Unternehmen, die qualifizierte Leads gewinnen möchten, ohne Telefonanrufe beantworten zu müssen. Ein gutes Angebotsformular kann die schlechten Eier aussortieren, die nicht für Ihren Dienst bereit sind, indem Sie die richtigen qualifizierenden Fragen stellen. Es kann auch helfen, die Bedürfnisse eines Kunden zu ermitteln, damit Sie eine effektive Antwort/ein Angebot erstellen und den Verkauf abschließen können, sobald Sie ihn am Telefon erhalten haben.

Es gibt eine Reihe großartiger Formular-Plugins, die sich der Formularverarbeitung widmen. Wenn Sie jedoch nach einer einfachen und effektiven Lösung für Ihre Divi-Site suchen, ist das aktualisierte Kontaktformular von Divi genau das Richtige für Sie.

Heute werde ich Sie durch den Prozess der Erstellung eines einfachen, aber leistungsstarken Angebotsformulars mit bedingter Logik führen, um Leads besser zu qualifizieren. Ich werde auch einige erweiterte Designfunktionen mit benutzerdefiniertem CSS hinzufügen, die das Formular noch sauberer und lesbarer machen.

Lass uns anfangen.

Umsetzung des Designs mit Divi

Erstellen des Vollbild-Header-Abschnitts

Das Angebotsformular kann zu jeder Seite hinzugefügt werden, aber in diesem Beispiel verwende ich eine spezielle Seite nur für das Angebotsformular.

Um den Besucher willkommen zu heißen, verwende ich eine Vollbild-Kopfzeile, die den Benutzer zwingt, auf die Schaltfläche zu klicken oder zu scrollen, um das Formular anzuzeigen. Dies ist eine coole Funktion, die eine persönlichere Erfahrung schafft und den Benutzer auf die Idee aufmerksam macht, zu scrollen und zu klicken, bevor er das Formular sieht. In manchen Fällen wirkt es etwas wenig einladend und überwältigend, wenn ich auf eine Seite komme, auf der nur ein langes Formular auszufüllen ist. Dies ist natürlich optional und ich würde es auf jeden Fall testen, um zu sehen, ob es ohne den Vollbild-Header besser konvertiert.

Fügen Sie mit dem Visual Builder einen Abschnitt mit voller Breite und ein Kopfzeilenmodul mit voller Breite oben auf Ihrer Seite hinzu.

Aktualisieren Sie die Fullwidth Header-Einstellungen wie folgt:

Inhaltsoptionen

Titel: [Titel eingeben; Versuchen Sie, persönlicher zu sein, anstatt einen langweiligen Titel wie "Quote Form"]
Untertiteltext: [Geben Sie den Untertiteltext ein]

Schaltfläche Nr. 1 Text: [Schaltflächentext eingeben; so etwas wie „zeig es mir“ oder „Lass uns das machen“]
Schaltfläche #1 URL: #quote (dies wird für die Anker-CSS-ID verwendet, die zum Abschnitt mit dem unten stehenden Formular scrollt)
Logobild-URL: [Logobild eingeben]
Hintergrundüberlagerung: rgba(0,0,0,0.7)
Hintergrundbild: [laden Sie Ihr 1920 x 1080 Hintergrundbild hoch]

Designoptionen

Text- und Logoausrichtung: Mitte
Vollbild machen: JA
Scroll-Down-Taste anzeigen: JA
Symbol: [Symbol auswählen]
Symbolfarbe nach unten scrollen: #999999
Textfarbe: Hell
Titelschriftart: Ubuntu
Titel Schriftgröße: 36px
Untertitelschriftart: Ubuntu
Untertitel-Schriftgröße: 22px
Benutzerdefinierte Stile für Button One verwenden: JA
Button One Textgröße: 20px
Schaltfläche Eins Textfarbe: #ffffff
Schaltfläche 1 Hintergrundfarbe: #e09900;
Farbe des Knopfes Eins: #e09900
Tastenabstand ein Buchstabe: 1px
Button One Schriftart: Ubuntu

Einstellungen speichern

Erstellen des Angebotsformulars

Für das Angebotsformular verwenden wir nun das Kontaktformular von Divi. Zuerst müssen wir einen regulären Abschnitt mit einer Zeile mit voller Breite (1 Spalte) hinzufügen. Fügen Sie dann der Zeile ein Kontaktformular-Modul hinzu.

Aktualisieren Sie die Kontaktformulareinstellungen wie folgt.

Inhaltsoptionen?

Titel: [definieren Sie einen Titel für Ihr Kontaktformular oder fügen Sie zusätzliche Anweisungen hinzu]
Schaltflächentext senden: Angebot einholen
E-Mail: [Geben Sie die E-Mail-Adresse ein, an die Nachrichten gesendet werden sollen]
Umleitungs-URL aktivieren: JA (dies ist optional, aber eine gute Idee)
Weiterleitungs-URL: [Weiterleitungs-URL zu einer benutzerdefinierten Dankesseite eingeben]

Designoptionen

Titelschriftart: Ubuntu
Titelschriftgröße: 30px
Titel-Buchstaben-Abstand: 1px
Formularfeldschriftart: Ubuntu
Schriftgröße des Formularfelds: 24px
Textfarbe des Formularfelds: #e09900
Eingaberandradius: 5px
Rand verwenden: JA
Randfarbe: #999999
Randbreite: 1px
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 24px
Schaltflächentextfarbe: #ffffff
Hintergrundfarbe der Schaltfläche: #e09900;
Farbe des Knopfrahmens: #e09900
Tastenabstand der Buchstaben: 1px
Schaltflächenschriftart: Ubuntu

Erweiterte Optionen (benutzerdefiniertes CSS)

Captcha-Feld:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Captcha-Text:

Font-size: 24px

Einstellungen speichern

Hinzufügen der Angebotsformularfelder

Nicht Ihre Einstellungen, es ist an der Zeit, unsere Formularelemente hinzuzufügen. Standardmäßig enthält das Formular die Felder „Name“, „E-Mail“ und „Nachricht“. Sie können „Nachricht“ löschen.

Firmenfeld

Fügen Sie unter dem Feld „E-Mail“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : Firma
Titel : Wie heißt Ihr Unternehmen?
Pflichtfeld : JA

Servicefeld

Fügen Sie unter dem Feld „Firma“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : Dienst
Titel : Wie können wir Ihnen heute helfen?
Typ : Optionsfelder
Optionen :

• Website-Produktion
• App-Entwicklung
• Kunstrichtung
• Videoerstellung

Pflichtfeld : JA

Kunstzweckfeld

Fügen Sie unter dem Feld „Dienst“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : art_purpose
Titel : Welche Art von Art Direction brauchen Sie?
Typ : Optionsfelder
Optionen :

• Grafik-Design
• Werbung
• Markenzeichen
• Verpackung

Pflichtfeld : JA
Bedingte Logik aktivieren
Beziehung : BELIEBIG
Regeln : Wie können wir Ihnen heute helfen? > Gleichgestellt > Art Direction

Hinweis : Diese Logik zeigt dieses Feld immer dann an, wenn ein Benutzer „Art Direction“ aus der vorherigen Frage auswählt.

Feld für den Webzweck

Fügen Sie unter dem Feld „art_purpose“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : web_purpose
Titel : Welche Art von Website benötigen Sie?
Typ : Optionsfelder
Optionen :

• E-Commerce
• Blog
• Web-App
• Landingpage

Pflichtfeld : JA
Bedingte Logik aktivieren
Beziehung : BELIEBIG
Regeln : Wie können wir Ihnen heute helfen? > Equals > Website-Erstellung

Hinweis : Diese Logik zeigt dieses Feld immer dann an, wenn ein Benutzer aus der vorherigen Frage „Webproduktion“ auswählt.

Videofeld

Fügen Sie unter dem Feld „web_purpose“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : Video
Titel : Auf welchem ​​Gerät soll das Video gezeigt werden?
Typ : Optionsfelder
Optionen :

• Handy
• Tablette
• Monitor oder Fernseher
• Beamer

Pflichtfeld : JA
Bedingte Logik aktivieren
Beziehung : BELIEBIG
Regeln : Wie können wir Ihnen heute helfen? > Gleiche > Videoerstellung

Hinweis : Diese Logik zeigt dieses Feld immer dann an, wenn ein Benutzer aus der vorherigen Frage „Videoerstellung“ auswählt.

Feld App-Plattform

Fügen Sie unter dem Feld „Video“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : app_platform
Titel : Auf welcher Plattform soll die App entwickelt werden?
Typ : Optionsfelder
Optionen :

• iOS
• Android
• Fenster
• Brombeere

Pflichtfeld : JA
Bedingte Logik aktivieren
Beziehung : BELIEBIG
Regeln : Wie können wir Ihnen heute helfen? > Equals > App-Entwicklung

Hinweis : Diese Logik zeigt dieses Feld immer dann an, wenn ein Benutzer in der vorherigen Frage „App-Entwicklung“ auswählt.

Budgetfeld

Fügen Sie unter dem Feld „app_platform“ ein neues Feld hinzu und aktualisieren Sie die Einstellungen unter Inhaltsoptionen wie folgt:

Feld-ID : Budget
Titel : Wenn Sie ein Budget im Sinn haben, lassen Sie es uns wissen.
Typ : Optionsfelder
Optionen :

• Weniger als $1k
• Etwa $5k
• Mehr als 10.000 $

Pflichtfeld : NEIN
Bedingte Logik aktivieren
Beziehung : BELIEBIG
Regeln :
Wie können wir Ihnen heute behilflich sein? > Equals > App-Entwicklung
Wie können wir Ihnen heute behilflich sein? > Gleiche > Videoerstellung
Wie können wir Ihnen heute behilflich sein? > Equals > Website-Erstellung
Wie können wir Ihnen heute behilflich sein? > Gleichgestellt > Art Direction

Einstellungen speichern

Fügen Sie die Anchor-CSS-ID hinzu

Gehen Sie zurück und bearbeiten Sie die Abschnittseinstellungen für den Abschnitt, der das Formular enthält. Geben Sie auf der Registerkarte Erweitert die CSS-ID „quote“ ein.

Dies entspricht der Schaltflächen-URL in der Kopfzeile mit voller Breite, sodass die Schaltfläche beim Klicken zum Abschnitt scrollt.

Legen Sie eine benutzerdefinierte Breite für die Angebotsformularspalte fest

Gehen Sie als Nächstes zu Zeileneinstellungen für die Zeile, die das Angebotsformular enthält, und aktualisieren Sie die Designoptionen wie folgt:

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 556px

Zusätzliche Designanpassungen

Für dieses Angebotsformular verwenden wir Optionsfelder. Sobald ein Optionsfeld/ein Kreis angeklickt wird, entspricht die Farbe des Kreisfüllers der Akzentfarbe Ihres Site-Themas unter Theme Customizer > General Settings > Layout Settings >

Wenn Sie Ihre Theme-Akzentfarbe für die Füllfarbe des Optionsfelds nicht auf der gesamten Website ändern möchten, gehen Sie zu Seiteneinstellungen und geben Sie das folgende benutzerdefinierte CSS auf der Registerkarte CSS ein:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Außerdem können Sie das folgende CSS hinzufügen, um den Titeltext für die Fragen mit Optionsfeldern anzupassen:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Schließlich können Sie den Optionsfeldlisten einen gestalteten Rahmen hinzufügen, der dem Stil des Formulars mit dem folgenden CSS entspricht:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

Das ist es.

Überprüfen Sie das Endergebnis:

Abschließende Gedanken

Dieses Angebotsformular ist ein vereinfachtes Beispiel dafür, was Sie mit dem Angebotsformular machen können. Für Ihr eigenes Angebotsformular möchten Sie möglicherweise zusätzliche Felder wie "Telefonnummer" hinzufügen, damit Sie Ihre Leads zurückrufen können. Sie können auch mehr bedingte Logik verwenden, um spezifischere Informationen zu den Kundenanforderungen zu erhalten.

Wie ich am Anfang des Artikels sagte, gibt es fortschrittlichere Plugins. Es gibt ganze Unternehmen, die sich nicht ohne Grund auf robuste Kontaktformularlösungen spezialisiert haben. Ich hoffe, dieser Beitrag war hilfreich, um zu zeigen, wie das Kontaktformular-Modul die meisten Ihrer Standard-Kontaktformularanforderungen mehr als erfüllen kann.