Elementor multistep formular nach jedem schritt hochscrollen p1 commerce

Elementor Multistep Formular nach oben scrollen nach jedem Schritt

hendrik poddig
Hendrik Poddig
info@p1commerce.de

Das Problem mit dem Elementor Multistep Formular

Wenn Sie das Elementor Multistep Formular benutzen, wird Ihnen sicherlich aufgefallen sein, dass sich die Scrollhöhe nach klicken auf „weiter“ oder „zurück“ nicht ändert. Auf dem Desktop oder auf dem Tablet stellt das meist kein so großes Problem dar. Auf der Mobilversion zeigt es sich allerdings deutlicher. Um sich im Formular vor oder zurück zu orientieren, muss man nach unten scrollen und wenn man dann auf weiter klickt, landet man nicht wieder am Anfang des nächsten Schrittes.

Die Lösung

Fügen Sie dem Form-Widget eine CSS ID hinzu und merken Sie sich diese.

multistep formular p1 commerce

Dann geben Sie folgenden Code in die functions.php Ihres Themes ein oder benutzen das Plugin Code Snippets und fügen den Code dort in ein neues Snippet ein.

				
					<?php
add_action( 'wp_footer', function() {
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
?>
<script>window.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('body').on('click', '#formular .e-form__buttons__wrapper__button-next', function () {
$('html, body').animate({scrollTop:$('#formular').offset().top}, 'fast');
});
});
	
jQuery(function($) {
$('body').on('click', '#formular .e-form__buttons__wrapper__button-previous', function () {
$('html, body').animate({scrollTop:$('#formular').offset().top}, 'fast');
});
});
});</script>
<?php
} , 21
);
				
			

An den Stellen, wo im oberen Code „#formular“ steht, fügen Sie den Namen ein, den Sie in das CSS ID Feld geschrieben haben mit dem „#“ davor. 

Eine Antwort

  1. Hi, mit dem Plugin von dynamic.ooo funktioniert das auch. Allerdings leider sind beide Lösungen nicht für Formulare in Popups geeignet.

    Viele Grüße
    Dirk

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert