Wohin gehen die BesucherInnen, nachdem sie ein Kontaktformular auf Ihrer Website ausgefüllt haben? Wahrscheinlich ist es ein wenig umständlich. Warum leiten Sie BenutzerInnen nicht auf eine andere Seite weiter? Dies ist Ihre Chance, die Aufmerksamkeit der User auf etwas anderes zu lenken, das Sie verkaufen oder über das Sie informieren möchten. Geht ganz einfach: Mit einem Button.
Was sehen Ihre User, wenn sie ein Formular ausgefüllt und abgeschickt haben, welches Sie mit dem Kontaktformular-Modul erstellt haben? So etwas:
Das ist keine sonderlich hilfreiche Ansicht. Da geht mehr.
Bearbeiten Sie doch zunächst Ihr Formularmodul und wechseln Sie auf den Tab «Erweitert», hernach auf «CSS-ID & Klassen» und fügen Sie im Textfeld «CSS-Klassen» die Zeile «contact-form-success-button» ein.
Dann wechseln Sie auf den «Inhalt»-Tab und fügen im Feld «Erfolgsmeldung» den gewünschten Text ein, der nach erfolgreicher Übermittlung angezeigt werden soll.
Anschliessend kopieren Sie das folgende Script. Platzieren Sie es im <head>-Bereich Ihrer Website. Im Backend unter Divi/Theme-Optionen/Integration. Optional können Sie das Script auch in ein Code-Modul einfügen, welches Sie auf der Seite mit dem Formular platzieren:
<script>
jQuery(document).ready(function () {
jQuery(".contact-form-success-button .et_pb_contact_submit").click(function () {
if (jQuery(".contact-form-success-button .et-pb-contact-message ul").length == 0) {
var x = setInterval(function () {
if (jQuery(".contact-form-success-button .et-pb-contact-message p").length == 1) {
jQuery(".contact-form-success-button .et-pb-contact-message").append("<a href='https://IHRE-DOMAIN.CH' class='success-button'>HIER IHR BUTTON-TEXT</a>");
clearInterval(x);
}
}, 200);
};
});
});
</script>Zwei Anpassungen sind nötig – beide betreffen Zeile 7 des Scripts:
- Achten Sie darauf, dass Sie Ihren eigenen Text für die Schaltfläche schreiben. Sie können den Teil des Codes, in welchem «HIER IHR BUTTON-TEXT» steht, mit Ihrem eigenen Call-to-Action-Text ersetzen.
- Ersetzen Sie die URL im Code, wo «IHRE-DOMAIN.CH» steht, durch die URL der Seite, auf die der Benutzer nach dem Absenden des Formulars weitergeleitet werden soll. Zum Beispiel die Homepage.
Nun können Sie den so entstehenden Link noch gestalten. Hier ein CSS-Beispiel, welches Sie in das Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen können:
/* Button der Übermittlungsbestätigung stylen */
contact-form-success-button a.success-button {
display: inline-block;
background: #59B14B;
color: #ffffff;
font-size: 22px;
border-radius: 10px;
padding: .7em 1.3em;
margin-top: 20px;
transition: all ease .3s;
}
/* Hover-Button der Übermittlungsbestätigung stylen */
.contact-form-success-button a.success-button:hover {
background-color: #ffffff;
color: #59B14B;
}Schon ist ein Button sichtbar. So ist’s ein gutes Stück aufschlussreicher.
Den Code können Sie freilich nach Ihrem Gusto anpassen – etwa die Farben auf den Zeilen4, 5, 14 und 15.
Werbung
Werbung
