Standardmäßig ist es bei Elementor-Formularen so, dass nachdem der Besucher der Webseite ein Formular ausgefüllt hat und auf den Absenden-Button klickt, einfach unterhalb des Formulars eine Nachricht mit einem beliebigen Text à la „Vielen Dank! Ihre Nachricht wurde abgeschickt.“ erscheint und die Eingaben verschwinden.
Das funktioniert zwar, aber hat aus meiner Sicht ein kleines Problem:
Hin und wieder passiert es – und das merke ich auch selbst auf anderen Websites – dass diese Nachricht unterhalb des Formulars leicht übersehen wird – je nachdem wieviel anderer Inhalt noch auf der Webseite ist und man sich dann fragt „Wurde das jetzt sicher abgesendet? Oder muss ich es nochmals ausfüllen?!“
Daher wäre aus User-Experience Sicht optimaler, das Formular nach dem erfolgreichen Versand auszublenden und nur die Danke-Meldung anzeigen zu lassen.
Leider ist das mit Elementor von Haus aus nicht möglich. Elementor kann sehr viel, aber leider nicht alles 😁 und daher hab ich mir ein kleines Script dafür geschrieben:
<script>
jQuery(document).ready(function($) {
$(document).on('submit_success', '.elementor-form', function() {
$(this).find('.elementor-form-fields-wrapper').addClass('hide-form');
$('.hide-after-submit').addClass('hide-form');
});
});
</script>
<style>
.hide-form {
display: none !important;
}
</style>
Im folgenden Video zeige ich dir, wie ich ein Kontaktformular mit Elementor Pro erstelle, und es mit einem kleinen eingefügten Code nach dem erfolgreichen Versand ausblende:
