Load section at top

Hello @muzicutza81,

Could you send me the link the webpage where the form is inserted, please?

Remember, that the elements in a page inherit the styles defined in the theme used by the website, and the forms are not an exception.

Best regards.

https://www.mea.coop/member-services/cost-estimator/ and the password is T3$+M3

Hello @muzicutza81,

I don’t understand exactly what do you mean, I’ve tested your form using different browsers, and the form look great in all of them, I’ve taken some screenshots, please, visit the following links:

Chrome:

https://wordpress.dwbooster.com/customdownloads/2018/06/05/screenshot_chrome.png

MiscroSoft Edge:

https://wordpress.dwbooster.com/customdownloads/2018/06/05/screenshot_ms_edge.png

Firefox:

https://wordpress.dwbooster.com/customdownloads/2018/06/05/screenshot_firefox.png

Best regards.

The issue is actually shown in all screenshots. We need the cursor to be all the way at the top after each Next button click. As is, if the browser window is too small, the user would have to scroll up (especially after the last Next button click where the final information is provided) to view the entire section. I hope that makes sense.

Hello @muzicutza81,

I’ve understood now what do you mean. Actually the form is working fine, because, the plugin set the focus in the focusable element of new page, and then, scroll the page to display the top section, but in your website the theme includes a floating frame at top that hides part of the form.

An alternative would be insert a “HTML Content” field in the form, and enter the following piece of code as its content:

<script>
fbuilderjQuery(document).on('click', '.pbNext,.pbPrevious', function () {
	if (fbuilderjQuery(this).closest('form').validate().checkForm())
		setTimeout(function () {			fbuilderjQuery(window).scrollTop(fbuilderjQuery(window).scrollTop()-150);
		}, 500);
});
</script>

Best regards.

Unfortunately, I tried that, and a few variations of it, and I am experiencing the same issue in Chrome, Edge, and Firefox. With IE, most pages look good with the exception of last one, which is actually the most important.

Hello @muzicutza81,

In this case my recommendation is always scroll the page at beginning. Replace the piece of code I sent you previously with this one:

<script>
fbuilderjQuery(document).on('click', '.pbNext,.pbPrevious', function () {
setTimeout(function () {fbuilderjQuery(window).scrollTop(0);}, 500);
});
</script>

and that’s all.
Best regards.

Thanks for all the help. Unfortunately that didn’t work either. It might be because, as you said, the plugin is set the focus in the focusable element of the new page, and in the case of the last page that element is probably the estimate value (I’m guessing).

Hello @muzicutza81,

The code I sent you in the previous email is not working because you are not using the common “next” and “previous” buttons of the plugin, you are emulating the process with button fields. Please, replace my previous code with the following one:

<script>
fbuilderjQuery(document).on('click', '#fbuilder [type="button"]', function () {
setTimeout(function () {fbuilderjQuery(window).scrollTop(0);}, 100);
});
</script>

Best regards.

@codepeople, you are just awesome!!! Couldn’t ask for better support! That makes perfect sense. Thank you so much for your time!!!