So erstellen Sie ein Kontaktformular bei Klick mit Divi

In diesem Divi-Tutorial zeigen wir Ihnen, wie Sie ein Kontaktformular erstellen, das nach dem Klicken auf eine Schaltfläche (als Overlay) angezeigt wird, indem Sie nichts anderes als Divi, etwas jQuery-Code und CSS-Code verwenden.

Dies ist eine großartige Möglichkeit, Ihre Website-Besucher auf die Aktion zu konzentrieren, zu der sie sich durch Klicken auf eine Schaltfläche verpflichtet haben. Es bringt sie nicht auf eine andere Seite, sondern sperrt sie in diese Aktion, bis sie fertig ist.

Unten können Sie sich einen kurzen Überblick über das, was wir erstellen werden, verschaffen und dann in das Tutorial einsteigen!

Ergebnis auf dem Desktop

Ergebnis auf Telefon & Tablet

Inspiration

Die Inspiration für diesen Beitrag stammt aus einer Kommentaranfrage und ist auf B3multimedia zu finden. Obwohl sie eine andere Methode verwenden, um dies zu ermöglichen, haben sie auch eine erstaunliche Möglichkeit, ein Kontaktformular per Klick zu erstellen. Schauen Sie sich das Ergebnis an:

Abschnitt mit Schaltflächenmodul erstellen

Normalerweise zeigen wir, wie man fast alles im Frontend Visual Builder von Divi macht. Im heutigen Beitrag werde ich jedoch den Backend-Builder verwenden. Aufgrund des Codes, den wir verwenden, ist es etwas einfacher. Das heißt, wenn Sie den Frontend-Editor genauso lieben wie wir, können Sie dieses Tutorial genauso einfach mit der Frontend-Skelettansicht abschließen.

Ok, lass uns in dieses Tutorial einsteigen!

Abonnieren Sie unseren Youtube-Kanal

Als erstes müssen wir einen neuen Abschnitt hinzufügen, in dem wir die Schaltfläche platzieren, mit der das Kontaktformular angezeigt wird. Fügen Sie einfach einen Standardabschnitt hinzu und wählen Sie eine einspaltige Zeile aus. Sobald Sie das getan haben, fügen Sie ein Button-Modul hinzu.

Sie können die Schaltfläche nach Belieben gestalten, aber Sie müssen sicherstellen, dass die Schaltflächen-URL mit '#' beginnt, gefolgt von etwas anderem. Sie können es nicht einfach leer lassen oder nur das Zeichen '#' verwenden. Durch Hinzufügen von '#' und etwas Text wird die Seite nicht verschoben, sobald Sie auf die Schaltfläche klicken. Wenn Sie es leer lassen, wird die Seite beim Klicken aktualisiert. Und wenn Sie nur '#' verwenden, werden Sie an den Anfang der Seite weitergeleitet.

Als nächstes müssen wir der Schaltfläche eine CSS-Klasse zuweisen. Wir werden diese CSS-Klasse später in diesem Beitrag im jQuery-Code verwenden, um sicherzustellen, dass das Kontaktformular nach dem Klicken angezeigt wird. Die Klasse, die wir dem Button zuweisen müssen, ist einfach 'button'.

Desktop-Kontaktformular per Klick erstellen

Als nächstes müssen wir das Desktop-Kontaktformular erstellen, das angezeigt wird, sobald jemand auf die Schaltfläche klickt, die wir im vorherigen Teil dieses Beitrags erstellt haben. Später in diesem Beitrag zeigen wir Ihnen auch, wie Sie die mobile Version erstellen.

Sie können grundsätzlich jedes gewünschte Design innerhalb einer Reihe erstellen und es als Popup erscheinen lassen, wenn Sie diese Methode verwenden. Wir geben Ihnen nur einen Vorgeschmack auf das, was Sie erreichen können, indem wir Ihnen zeigen, wie Sie das folgende Beispiel erstellen:

Neuen Standardabschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie arbeiten, einen neuen Standardabschnitt hinzuzufügen. Gehen Sie zum Tab "Erweitert" des gerade hinzugefügten Abschnitts und fügen Sie "Popup" zum Feld CSS-Klasse hinzu. Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie die folgenden CSS-Codezeilen in das Feld Vor der Unterkategorie Benutzerdefiniertes CSS ein:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Indem wir dies hinzufügen, stellen wir sicher, dass der Abschnitt die gesamte Registerkarte einnimmt. Sie können die Hintergrundfarbe im CSS-Code anpassen, um das gewünschte Hintergrund-Overlay zu erstellen. In diesem Fall verwenden wir die schwarze Farbe mit etwas Transparenz. Fügen Sie auf derselben Registerkarte auch die folgende CSS-Codezeile zum Hauptelement hinzu:

display: none;

Das letzte, was wir auf der Registerkarte Erweitert tun müssen, ist die Deaktivierung des Abschnitts für Telefon und Tablet in der Unterkategorie Sichtbarkeit.

Zweispaltige Zeile hinzufügen

Fahren Sie fort, indem Sie eine zweispaltige Zeile hinzufügen und zur Registerkarte Design wechseln. Beginnen Sie damit, die Breite der Zeile in der Unterkategorie Größenanpassung zu ändern. In diesem Beispiel haben wir eine benutzerdefinierte Breite von 1291 px verwendet.

Scrollen Sie auf der Registerkarte "Design" nach unten und verwenden Sie "30px" für den oberen, linken und rechten Abstand beider Spalten innerhalb der Unterkategorie "Abstand".

Beenden Sie den Vorgang, indem Sie auf die Registerkarte Erweitert gehen. Fügen Sie im Hauptelement die folgenden CSS-Codezeilen hinzu:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Erstes Textmodul hinzufügen

Nachdem Sie alle Änderungen an dem Abschnitt und der Zeile vorgenommen haben, ist es an der Zeit, die verschiedenen Module hinzuzufügen, die angezeigt werden sollen. Das erste, was wir hinzufügen werden, ist der Titel, der angezeigt wird. Fügen Sie zunächst ein neues Textmodul in die erste Spalte der Zeile ein, schreiben Sie den Text auf der Registerkarte Inhalt und gehen Sie zur Registerkarte Design. Auf der Registerkarte Design haben wir die folgenden Einstellungen für die Unterkategorie Text verwendet:

• Textausrichtung: Mitte
• Textschriftart: Hummer
• Schriftstil: Fett
• Schriftgröße des Textes: 37
• Textfarbe: #002282
• Textzeilenhöhe: 1.7em

Zweites Textmodul hinzufügen

Fahren Sie fort, indem Sie ein neues Textmodul hinzufügen und den Text eingeben, der auf der Registerkarte Inhalt angezeigt werden soll. Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Text gelten:

• Textausrichtung: Mitte
• Textschriftart: Arial
• Schriftgröße des Textes: 13
• Textfarbe: #002282
• Textzeilenhöhe: 1.7em

Social Media Follow-Modul hinzufügen

Im weiteren Verlauf werden wir auch das Social Media Follow Module zur ersten Spalte hinzufügen. In diesem Fall haben wir drei soziale Symbole ausgewählt; Facebook, Twitter und Instagram. Nachdem Sie diese sozialen Symbole auf der Registerkarte "Inhalt" hinzugefügt haben, ändern Sie die Linkform in der Unterkategorie "Symbole" in "Kreis".

Das letzte, was wir tun müssen, ist, diesem Modul auf der Registerkarte "Erweitert" einen linken Abstand hinzuzufügen. Fügen Sie dem Hauptelement die folgende CSS-Codezeile hinzu:

padding-left: 40%;

Kontaktformular Modul hinzufügen

Dann können wir zur zweiten Spalte der Zeile übergehen. In dieser Spalte platzieren wir als erstes das Kontaktformular-Modul. Für dieses Beispiel haben wir nur zwei Felder ausgewählt; den Namen und die E-Mail. Nachdem Sie das Kontaktformular-Modul hinzugefügt haben, gehen Sie zur Registerkarte Design des Kontaktformular-Moduls und nehmen Sie die folgenden Änderungen an der Unterkategorie Formularfeldtext vor:

• Schriftgröße des Formularfelds: 15
• Formularfeld Textfarbe: #002282
• Höhe der Formularfeldlinie: 1,7 em

Nehmen Sie auf derselben Registerkarte die folgenden Änderungen für die Unterkategorie Schaltfläche vor:

• Benutzerdefinierten Stil für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20
• Schaltflächentextfarbe: #FFFFFF
• Schaltflächenhintergrundfarbe: #0086c4
• Breite der Knopfleiste: 2
• Knopfradius: 3

Wechseln Sie zur Registerkarte Erweitert und fügen Sie eine obere Polsterung von 5% hinzu.

Blurb-Modul hinzufügen

Eine weitere Sache, die wir der zweiten Spalte hinzufügen müssen, ist ein Blurb-Modul. Das einzige, wofür wir dieses Modul benötigen, ist das Exit-Symbol oben rechts im Popup. Wählen Sie das folgende Symbol in der Liste der Symbole und lassen Sie alle anderen Dinge leer.

Gehen Sie weiter zur Registerkarte Erweitert und geben Sie als CSS-Klasse "close" ein. Fügen Sie auf derselben Registerkarte die folgenden Codezeilen zum Hauptelement der Benutzerdefinierten CSS-Unterkategorie hinzu:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Wenden Sie den Hintergrund mit Farbverlauf auf die Zeile an

Zu guter Letzt fügen wir der Zeile einen gut aussehenden Verlaufshintergrund hinzu. Öffnen Sie die Einstellungen und nehmen Sie die folgenden Änderungen vor, die für die Option Verlaufshintergrund gelten:

• Erste Verlaufsfarbe: #FFFFFF
• Zweite Verlaufsfarbe: #0c71c3
• Verlaufstyp: Linear
• Verlaufsrichtung: 124deg
• Startposition: 50%
• Endposition: 50%

Erstellen Sie ein Tablet- und Telefon-Kontaktformular auf Klick

Nachdem wir nun die Desktop-Version erstellt haben, wird die Version für Tablet und Telefon viel schneller. Die meisten Module, die wir für die Desktop-Version verwendet haben, sind die gleichen für die mobile Version. Das Endergebnis auf dem Handy sieht so aus:

Neuen Standardabschnitt hinzufügen

Beginnen Sie mit dem Hinzufügen eines weiteren Standardabschnitts. Dieser Abschnitt muss die gleichen Einstellungen haben wie der Abschnitt, den wir zuvor erstellt haben. Fügen Sie der CSS-Klasse 'popup' hinzu und fügen Sie die folgenden CSS-Codezeilen in das Feld Vorher ein:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Fügen Sie auch die folgende Zeile CSS-Code zum Hauptelement hinzu:

display: none;

Anstatt es für Telefon und Tablet zu deaktivieren, wie wir es für die Desktop-Version getan haben, werden wir es auf dem Desktop in der Unterkategorie Sichtbarkeit deaktivieren:

Zeile mit einer Spalte hinzufügen

Für das Telefon- und Tablet-Popup benötigen wir nur eine Spalte. Für diese Zeile verwenden wir keine benutzerdefinierte Breite. Wir werden jedoch die benutzerdefinierten Auffüllungen wie bei der Desktop-Version anwenden. 30px für den oberen, linken und rechten Abstand der Spalte.

Wir müssen auch sicherstellen, dass die folgenden CSS-Codezeilen zum Hauptelement in der Unterkategorie Benutzerdefiniertes CSS hinzugefügt werden:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Klonen Sie das Text-, Social-Media-Folgen- und Kontaktformular-Modul

Als nächstes müssen wir das erste Textmodul klonen, das wir für die Desktop-Version verwendet haben, zusammen mit dem Social Media Follow- und Kontaktformular-Modul. Nachdem Sie sie geklont haben, platzieren Sie sie in der einspaltigen Zeile des neuen Abschnitts, den Sie gerade erstellt haben.

Klonen Sie das Blurb-Modul und ändern Sie den CSS-Code in der Registerkarte "Erweitert".

Sie können auch das Blurb-Modul klonen, das für die Desktop-Version verwendet wurde, aber es muss eine kleine Änderung am CSS-Code vorgenommen werden. Anstatt den Code für den Desktop zu verwenden, verwenden Sie stattdessen Folgendes:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Stellen Sie sicher, dass die CSS-Klasse 'close' auch für das Blurb-Modul verwendet wird.

Wenden Sie den Hintergrund mit Farbverlauf auf die Zeile an

Für die mobile Version verwenden wir verschiedene Einstellungen für den Verlaufshintergrund der Zeile:

• Erste Verlaufsfarbe: #FFFFFF
• Zweite Farbverlaufsfarbe: #0c71c3
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 40%
• Endposition: 40%

jQuery-Code zu den Theme-Optionen hinzufügen

Das letzte, was wir für dieses Tutorial tun müssen, ist das Hinzufügen des jQuery-Codes. Sie können den Code über die Designoptionen oder über ein Codemodul hinzufügen, das Sie auf der Seite platzieren, an der Sie gerade arbeiten. In diesem Beispiel werden wir es einfach in die Designoptionen einfügen.

Gehen Sie dazu zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > Integration > und fügen Sie die folgenden Zeilen des jQuery-Codes in den Kopf Ihrer Website ein:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Ergebnis

Wenn Sie dem Beitrag Schritt für Schritt folgen, sollten Sie auf dem Desktop folgendes Ergebnis erzielen können:

Und folgendes Ergebnis auf Tablets und Smartphones:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie per Klick ein Kontaktformular erstellen. Die Verwendung dieser Methode, um mit Ihren Besuchern in Kontakt zu treten, ist subtil, aber effektiv. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen.

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von La1n / shutterstock.com