The visual builder Multi-Step design should always scroll to the top of the next step
complete
This post was marked as
complete
This post was marked as
in progress
This post was marked as
planned
Matty Tilbrook
SIX months later and this is still an issue....
John Hibbs
This is a real issue on mobile as the whole form can ‘disappear’ and unless the donor scrolls they could think it’s crashed.
J
Jimmy Revillini
Fix:
add_action('init', function () {
add_action('givewp_donation_form_enqueue_scripts', function () {
$handle = 'givewp-jrevillini-fix';
ob_start();?>
document.addEventListener('DOMContentLoaded', function() {
// Log that the DOM is loaded
console.log('DOM is loaded');
// Set up event listener for click events on the document
document.addEventListener('click', function(event) {
// Check if the clicked element has the class "givewp-donation-form__steps-button-next"
if (event.target.classList.contains('givewp-donation-form__steps-button-next')) {
// Log that the next button was clicked
console.log('Next button was clicked');
// Scroll the window to make the top of #root-givewp-donation-form in view
document.getElementById('root-givewp-donation-form').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Access the parent window
var parentWindow = window.parent;
// Check if the parent window exists and has the element with class "root-data-givewp-embed"
if (parentWindow && parentWindow.document.querySelector('.root-data-givewp-embed')) {
// Scroll the parent window to make the element in view
parentWindow.document.querySelector('.root-data-givewp-embed').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});
<?php
$inline = ob_get_clean();
wp_register_script( $handle, '' );
wp_enqueue_script( $handle );
wp_add_inline_script( $handle, $inline );
});
});
Matty Tilbrook
Jimmy Revillini - does this work? would I upload it as a code snippet or to the form's CSS?
Lisa Spangler
I just wanted to add one more comment here -- we've been using legacy forms and added the phone number as a custom field with the Form Field Manager plugin. We need the phone number to be sent to our CMS but can't switch to the new form builder until the scrolling is resolved. It caused too much confusion with our donors.
Lisa Spangler
I second this! I think it's really going to confuse people. On one of my browser tests it scrolled past the first name field which is a required field, so people wouldn't even see it. Thanks!