startover909

Yes it works fine for me.

Hi Guido,

I apologize for not testing thoroughly and misunderstanding your previous response, but I think I figured it out.

First of all, the path needs to be relative (action=”./#xxx”). Because I set up the form on a front page it worked the same with absolute path /#, but I realized that the form could be on any page and the relative path ./# is required.

Second, action =”./#vscf” only works if error occurs, but doesn’t work if message is sent successful because on the subsequent page the <form> element no longer exists (it’s replaced by your thankyou message), so the ID vscf doesn’t exist either, that’s why it won’t scroll. Using #vscf-info would be the opposite (thankyou works but error doesnt). It’s easily fixed if the entire form element is wrapped in a <div> container and given an id, such as vscf-contact-form, and use that as the action instead, so action=”./#vscf-contact-form”

I set up a test form at the bottom of the page here:

https://www.liujack.me/testvscf

Scroll down to see the form. The form was wrapped in <div id=”vscf-contact-form”> and the script was set to action=”./#vscf-contact-form” . Submitting the form either with error or success message now scrolls back to the form as intended.

What do you think?

• This reply was modified 8 years, 8 months ago by startover909.
• This reply was modified 8 years, 8 months ago by startover909.

Hi Guido,

I believe showing the thank you message and hiding the form itself after submission is a good thing? That’s the default setup for many other forms I’ve used. This is a contact form which typically is only submitted once per user. If the user really wants to submit it again, the next time he comes back to the site the form is available again anyway. But I would completely respect it if you see it differently and implement it such that the form still shows along side the thank you message. To me either way is fine.

By the way I didn’t even realize that wasn’t the default behavior here after successful submission, as the first time I tested the form I purposely omitted fields to see the error validation, and that’s when I realized the page was scrolled back top. So with the action attribute added, the user will be brought back to the form section with the red error messages, and this in my opinion is the important thing (so that the user doesn’t miss them and mistakenly believes that the form was submitted successfully).

Thanks.