So erstellen Sie ein Inline-Kontaktformular mit Divi

Der Hero (oder Above the Fold)-Bereich der Homepage ist erstklassige Immobilien. Und wie die meisten Immobilienentwickler möchten Sie Ihren Platz maximieren. Hier bietet sich ein Inline-Kontaktformular an. Ein Inline-Formular ist im Grunde ein Formular, in dem alle seine Felder oder Steuerelemente nebeneinander, inline und linksbündig bleiben. Dieses kompakte Layout eignet sich hervorragend, um die Conversions auf einer Homepage oder einer Landingpage zu steigern.

Heute zeige ich Ihnen, wie Sie mit Divis Visual Builder ein Inline-Kontaktformular für Ihre Website erstellen. Die Arbeit, die dafür erforderlich ist, besteht darin, sowohl die Breite als auch die Ausrichtung der Formularfelder anzupassen. Um dies zu erreichen, werden wir die Designfunktionen des Kontaktmoduls nutzen und einige benutzerdefinierte CSS auf der Registerkarte Erweitert hinzufügen.

Wenn Sie Divi noch nicht kennen, lassen Sie sich von der Registerkarte Erweitert nicht davon abhalten, dieses Tutorial in Angriff zu nehmen. Ich habe mein Bestes gegeben, um die Dinge einfach und klar zu halten.

Genießen.

Hier ist ein Beispiel dafür, wie das Inline-Kontaktformular aussehen wird

Das Konzept & Inspiration

Wenn Sie jemals eine Autoversicherung kaufen oder online nach einem neuen Zuhause suchen mussten, haben Sie wahrscheinlich ein Inline-Formular gesehen, das mit minimalen Eingabefeldern bewusst kompakt ist, damit Sie (der Benutzer) eher geneigt wären, den Ball ins Rollen zu bringen neues Zitat. Also wollte ich ein einfaches Inline-Kontaktformular erstellen, das für Divi-Benutzer etwas Ähnliches tun würde. Obwohl dieses Kontaktformular nicht in der Lage ist, ein Angebot zu erstellen oder eine Liste von Häusern aufzurufen, entspricht es den Bedürfnissen von Geschäftsinhabern oder Bloggern, die Kunden oder Benutzern eine einfache Möglichkeit bieten möchten, Kontakt aufzunehmen.

Implementieren des Designs mit Divi

Abonnieren Sie unseren Youtube-Kanal

Wir beginnen mit dem Hinzufügen eines regulären Abschnitts mit einer einzelnen Spaltenstrukturzeile.

Da der Rest unserer Elemente auf einem weißen Hintergrund schwer zu erkennen ist, fügen wir die Hintergrundfarbe zu unserem Abschnitt hinzu, indem Sie zu Abschnittseinstellungen gehen und Folgendes aktualisieren:

Inhaltsoptionen

Hintergrundfarbe: #006ea5

Einstellungen speichern

Jetzt können wir der Zeile unser Kontaktformular-Modul hinzufügen.

Aktualisieren Sie die Kontaktformulareinstellungen wie folgt:

Inhaltsoptionen

Schaltflächentext senden: „Angebot einholen“
E-Mail: [Geben Sie die E-Mail-Adresse ein, an die Nachrichten gesendet werden sollen]
Captcha anzeigen: NEIN
Formularhintergrundfarbe: rgba(255,255,255,0)

Designoptionen

Formularfeldschriftart: Lato
Schriftgröße des Formularfelds: 24px
Textfarbe des Formularfelds: #ffffff
Eingaberandradius: 3px
Rand verwenden: JA
Rahmenfarbe: #ffffff
Randbreite: 1px
Schaltflächentextgröße: 24px Desktop, 20px Tablet, 20px Smartphone
Schaltflächentextfarbe: #0c71c3
Hintergrundfarbe der Schaltfläche: #f4f11f
Breite des Tastenrahmens: 3px
Knopfrandradius: 3

Einstellungen speichern

Gehen Sie zurück zur Registerkarte Inhalt und löschen Sie das Nachrichtenfeld, indem Sie auf das Papierkorbsymbol rechts in der Feldleiste klicken. Fügen Sie dann ein neues Feld hinzu, indem Sie auf die graue Kreisschaltfläche mit dem weißen Pluszeichen klicken, die sich unter den einzelnen Feldleisten befindet. Dies ist das Feld Telefon.

Aktualisieren Sie die Feldeinstellungen wie folgt:

Inhaltsoptionen

Feld-ID: „Telefon“
Titel: Telefon

Designoptionen

Volle Breite machen: NEIN
Erlaubte Symbole: Nur Zahlen (0-9)

Erweiterte Optionen

Geben Sie das folgende benutzerdefinierte CSS in das Feld Hauptelement ein :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Einstellungen speichern

Gehen Sie nun zurück zum Inhalts-Tab Ihrer Kontaktformular-Einstellungen und duplizieren Sie das gerade erstellte Telefonfeld und verwandeln Sie es in ein Postleitzahl-Feld.

Aktualisieren Sie die Feldeinstellungen wie folgt:

Inhaltsoptionen

Feld-ID: „PLZ“
Titel: Postleitzahl

Erweiterte Optionen

Geben Sie das folgende benutzerdefinierte CSS in das Feld Hauptelement ein :

Max-width: 17%;
Margin-top: -1.5%;

Einstellungen speichern

Bisher haben wir die Breite und Ausrichtung unserer Felder Telefon und Postleitzahl angepasst. Jetzt müssen wir dasselbe für die Felder Name und E-Mail tun.

Gehen Sie zu den Namensfeldeinstellungen und aktualisieren Sie die erweiterten Optionen mit dem folgenden benutzerdefinierten CSS im Hauptelementfeld :

Max-width: 20%;
Margin-top: -1.5%;

Einstellungen speichern

Gehen Sie als Nächstes zu den E-Mail-Feldeinstellungen und aktualisieren Sie die erweiterten Optionen mit dem folgenden benutzerdefinierten CSS im Hauptelementfeld :

Max-width: 20%;
Margin-top: -1.5%;

Einstellungen speichern

Wichtiger Hinweis: Beachten Sie, dass für das benutzerdefinierte CSS, das für jedes der Felder verwendet wird, eine max-width-Eigenschaft auf einen bestimmten Prozentsatz festgelegt ist. Dieser Prozentsatz bestimmt, wie breit Ihre Felder im Verhältnis zur Breite Ihres Inhaltsbereichs stehen. Der Standardinhaltsbereich von Divi ist beispielsweise 1080px, sodass das Namensfeld 20 % von 1080px beträgt. Dies ist wichtig zu wissen, wenn Sie mehr Platz für Ihr Inline-Formular schaffen möchten. Sie müssen lediglich den Prozentwert für die Eigenschaft max-width nach Bedarf anpassen.

Fast fertig. Jetzt müssen wir nur noch den Abstand des Abschnitts und der Zeile bereinigen, die das Formular enthält. Gehen Sie zu den Abschnittseinstellungen auf der Registerkarte Design und aktualisieren Sie Folgendes:

Benutzerdefinierte Polsterung: 12 Pixel oben, 14 Pixel unten

Einstellungen speichern

Gehen Sie nun zu den Zeileneinstellungen unter der Registerkarte Design und aktualisieren Sie Folgendes:

Benutzerdefinierte Polsterung: 48 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links

Einstellungen speichern

Responsiv machen

Da es sich um ein horizontales Formular handelt, müssen die Formularfelder auf mobilen Geräten angepasst werden. Um dies zu beheben, genügt ein kleiner Ausschnitt aus benutzerdefiniertem CSS. Gehen Sie zu Seiteneinstellungen , auf der Registerkarte Erweitert und folgen Sie im Feld Benutzerdefiniertes CSS :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

So reagiert das Formular auf die verschiedenen Bildschirmgrößen.

Erstellen eines Inline-Kontaktformulars mit drei Feldern

Nachdem Sie nun ein Inline-Formular mit vier Feldern erstellt haben, können Sie es ganz einfach in ein Feld mit drei Formularen umwandeln, indem Sie einige Optionen aktualisieren. Hier sind die Schritte:

1. Bearbeiten Sie das gerade erstellte Inline-Formular oder duplizieren Sie das Formular.
2. Postleitzahlfeld löschen (jetzt haben Sie nur noch drei Felder)
3. Aktualisieren Sie die Einstellungen für das Telefonfeld (oder was auch immer das dritte Feld ist) auf der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Aktualisieren Sie die Einstellungen für das E-Mail-Feld (oder was auch immer das zweite Feld ist) auf der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im Feld Hauptelement:

   max-width: 25%;
   margin-top: -1.5%;

5. Aktualisieren Sie die Einstellungen für das Namensfeld (oder was auch immer das erste Feld ist) auf der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im Feld Hauptelement:

   max-width: 25%;
   margin-top: -1.5%;

Hinweis: Beachten Sie, dass die Eigenschaft max-width für jedes der Felder jetzt 25 % beträgt, um die Breite der Felder zu erhöhen.

Erstellen eines Inline-Kontaktformulars mit zwei Feldern

Sie können Ihr Inline-Formular auch in ein Formular mit zwei Feldern umwandeln, indem Sie einige Optionen aktualisieren. Hier sind die Schritte:

1. Bearbeiten Sie das gerade erstellte Inline-Formular oder duplizieren Sie das Formular.
2. Löschen Sie das Postleitzahlenfeld und das Telefonfeld, sodass Sie nur noch zwei Felder haben (Name und E-Mail)
3. Aktualisieren Sie die Einstellungen für das Namensfeld (oder was auch immer das erste Feld ist) auf der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im Feld Hauptelement:

   max-width: 37%;
   margin-top: -1.5%;

4. Aktualisieren Sie die Einstellungen für das E-Mail-Feld (oder was auch immer das zweite Feld ist) auf der Registerkarte Erweitert mit dem folgenden benutzerdefinierten CSS im Feld Hauptelement:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Hinzufügen anderer Feldtypen

Dieses Tutorial ist hauptsächlich für normale Eingabefeldtypen gedacht, Sie können es jedoch problemlos in einen anderen Feldtyp ändern. Wenn Sie beispielsweise einen ausgewählten Dropdown-Feldtyp verwenden möchten, können Sie denselben Stil wie für die anderen Felder anwenden. Sie müssen diesem bestimmten Feld jedoch eine Hintergrundfarbe (#006ea5) hinzufügen, damit Sie die Optionen sehen können.

So würde ein Dropdown-Feld aussehen…

Abschließende Gedanken

Meiner Erfahrung nach können Inline-Kontaktformulare ein mächtiges Werkzeug für Ihr Unternehmen sein. Es gibt fortschrittlichere Plugins mit robusteren Optionen, aber wenn ein anderes Plugin nicht Ihr Ding ist und eine einfachere Lösung Sinn macht, probieren Sie es aus. Hoffe du magst es.

Ich freue mich von Ihnen in den Kommentaren zu hören.