Hello,

I created a multi-page form and used the source code to include it on my website. Everything is great a part from one thing. When I click next to go to the next part of the form, the browser automatically jumps/scrolls so that the form is now at the top of the browser. I hope I am making myself clear. It's as if the form has jump to anchors in so when ever I press anything the form jumps to the top of the page.

I don't like this, as it is confusing to users and it looses their concentration on the form. They then have to look around to see where the form has gone and divert their eyes to the top. It makes it seem like the form is unpredictable and they will likely not compelete it.

So it would be great if the form could just stay where it was.

I have tried some trial and error, such as removing some id tags, thinking it may be jump to anchors. But no luck.

Any help would be great and thanks in advance,

Steven

This sounds like the same problem I am now having. Did you find a solution?

Jim - victorsfood

Hello, I believe this will work, but if not, let us know and I'll get Cedric to take a look.

Drew.

Add the following to your custom code block:


<script>
/** On submit advance the page instead, until the last page. */
wFORMS.behaviors.paging.instance.prototype.onSubmit = function (e, b) {
if (!wFORMS.behaviors.paging.isLastPageIndex(b.currentPageIndex)) {
var currentPage = wFORMS.behaviors.paging.getPageByIndex(b.currentPageIndex);
var nextPage = b.findNextPage(b.currentPageIndex);

// validate and advance the page
var v = wFORMS.getBehaviorInstance(b.target, 'validation');
if (v.run(e, currentPage)) {
b.activatePage(b.currentPageIndex + 1,false); // Changed from http://code.google.com/p/wforms/source/browse/trunk/wforms_paging.js#230

// focus the first form element in the next page
var first = base2.DOM.Element.querySelector(nextPage, 'input, textarea, select');
if (first) {
first.focus();
}
}

e.stopPropagation();
e.preventDefault();
e.pagingStopPropagation = true;
}
else {
if(window.onbeforeunload) {
window.onbeforeunload = null;
}
}
}
</script>

This should prevent the 'scrolling into view' effect when changing a form page.

Or, if you just need to see the form: http://www.tfaforms.com/141986

I think we are seeing the same thing differently, but the screencast you linked (nice feature by the way!) showed the problem I am experiencing. For example, after completing the 2nd page (Event Details), and clicking Next Page, the 3rd page (The Event) appears with the bottom of the screen visible & not the top. The way I see it, instead of loading the new page so the top of the page is visible as normal, it "scrolls" so that the bottom of the page is visible and the top of the page is off the screen. This is confusing for users as they don't know where they are & have to scroll up to complete the form, as you had to do.

Hello,

Sorry for dropping the ball on this one, but we don't get auto reminders from the forum like we do with support requests.

So, after the addition of the code I provided, did any behavior change? Can you setup a copy of your form on your site with the original code as well? I'd like to compare the behaviors.

Happy to help,
FA Support.

Hello,

I think part of the issue is having your header have a fixed position on the page. The form's scroll into view is behaving how we designed, but the absolution position for your header means the header is displayed over the form. Try adding this to your form code to override your header:

<style>
body > div#headerwrap {
position: absolute !important;
}
</style>

or

<style>
body > div#headerwrap {
position: none !important;
}
</style>