Forums

Hi, I have a multipage form. Expecially on mobile device, when user click to go next step my page reloads and the second step of the form is loaded but the page is redisplayed at the top meanwhile the form stays bottom and this create such confusion bcause the user would expect to see the form instead of another part of the page that also do not contains the form.

How can I solve it so that when user go to next steps and the page reloads it always repositioning the user view on the top of the form instead of at the top ao the website page?

I don't want also to use ajax to submit the form

Any suggestion?

Hi deltafidesign,

I've no idea how you have this set up :-( Is the form in a module? That would explain why it re-displays.

Bob

Yes Bob, the form is inside a module and I must leave it there... any idea?

Hi,

You can try to disable the "relative url" setting under the "HTML" action, that would load the next page as the full page content, otherwise you will need some code to scroll the page when it loads.

Best regards,
Max

Disabling the "Relative URL" helped a bit but the better solution would be to have some code to scroll the page when it loads. I'm not able to made that code, could you please help me?

Thanks in advance.

Hi deltafidesign,

This StackOverFlow answer has some code to scroll to an HTML tag. You'd need to have it run when the page loads with the form on submit response.

Another solution to this would be to put a link or button in the module and have the form open in a modal window using an iFrame.

Bob

Hi Bob,

I've tryed with a Load Javascript in the On submit Setup:

<script>
$("#step1").click(function() {
    $('html, body').animate({
        scrollTop: $("#myformid").offset().top
    }, 2000);
});
</script>

<script>
$("#submit").click(function() {
    $('html, body').animate({
        scrollTop: $("#thankyou").offset().top
    }, 2000);
});
</script>

But seems not working. What should I check?

Hi,

it should be like this:

jQuery(document).ready(function($){
 $('html, body').animate({
        scrollTop: $("#myformid").offset().top
    }, 2000);
});

and you should replace myformid with the id of your form.

Best regards,
Max

Thanks Max,

I've added 2 javascript, one for each step (last step is a thank you message with a different id than the form id) and it works now.