Visual Builder Forms Automatically Scroll to Donation Button in Safari
under review
This post was marked as
under review
Angela Blake
We've investigated this issue and found that it only occurs with Multi-step and Two Panel layouts from the Visual Donation Form Builder.
There's no ETA yet for a fix, but a good workaround is to switch to the Classic layout in the Visual Donation Form Builder. You can change your form layout any time. We'll keep you updated as things progress.
Jeremias Steinmann
@robindelmundo from GiveWP suggests a temporary fix by using the legacy form builder:
This fix seems to work, but in my understanding, there is no way to add custom styles to the form with the legacy form builder.
I thought it might be solved by injecting a script that prevents Safari from automatically jumping to active form fields:
document.addEventListener("DOMContentLoaded", function() {
// Ensure no input elements are focused automatically
document.activeElement.blur();
});
At first, I had the impression it worked, but then it didn’t. Maybe it has to be implemented in the plugin itself, since it is an iframe and might not react to scripts due to cross-origin restrictions.
Now I found another alternative—a somewhat dirty—solution, which solves the problem with the new form designer at least for the time being, until GiveWP has fixed the bug:
Simply create a container with another instance of the form inside. I recommend using a shortcode so it does not consume too much space in the layout.
Then move it to the very top of each page, where the actual form is embedded.
Add a CSS class to the container, e.g., "dummy."
Add a custom CSS script to hide the container:
.dummy {
visibility: hidden;
display: none;
}
Thus the container is hidden and collapsed at runtime. But Safari thinks it’s still there and continues to jump to it. Since it is at the very top of the page, Safari does not jump to another position on page load anymore.
You can create a template element from the container with the shortcode, so it’s easier to throw it in.
I know it’s dirty, but it’s working like a charm. Tested on Safari Desktop and Mobile.
Correction: After intensive testing it turned out that this does not seem to reliably solve the problem on mobile, unfortunately. Lets just hope for a quick bugfix.
Alex Coleman
Merged in a post:
Page jumps to GiveWP Donate Form after Page load
Jeremias Steinmann
The page jumps to the donate form right after page load. This happens only on Safari, not on Chrome and Firefox.
Here is a screencast of the problem:
Jeremias Steinmann
Same here, desktop and iphone
M
Marc Hyde
same for me on all devices
Lucienne Broere
Hey, I have this problem to. It happens also on all the devices: desktop, ipad and mobile.