Elementor Multistep Formular nach oben scrollen nach jedem Schritt

Hendrik Poddig

Hendrik Poddig

hendrik.poddig@p1commerce.de

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 1

Dann geben Sie folgenden Code in die functions.php Ihres Theme 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 type="rocketlazyloadscript">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.