Hello,
I have placed an Umbraco Forms contact form at the bottom of a page, below other content. When the form is submitted the page re-loads however the browser shows the top of the page, not the form which is/was at the bottom. (ie it's scrolled to the Top) It's not immediately clear to the user that they need to scroll down to the form again to see the 'Thank You...' message, or the validation summary in the event of an invalid entry.
Does Forms have a way to handle scrolling to the location of the form after submitting or do I have to add DIY javascript to accomplish this?
Thanks!
Hello again, I've learned why the form was posting back when the entries were invalid but still don't know how to get the page to scroll to the 'thank you' message. Anyone have an idea? I suppose an alternative would be to re-direct to a 'Thank You' page. It's definitely not good as it is now.
Thanks, Steve
Chris, Yes, it seems like that approach would work. The client side validation (required references to the scripts noted in the link above) does prevent the post back and I ended up just pointing to a dedicated 'Thank You' page on successful submission. Was the easiest way to go. Thanks - Steve
Nicholas, Thanks. I'd like to do something like that but at this point not sure where to start. I'd also like to include an angularjs based cascading dropdown which is populated by a webapi (which we have built, but not yet integrated with Forms). However, I have no idea where to look for information on how to accomplish this. Just checked the umbraco documentation on creating forms based on datasources - got the "ooops, something broke message"... I really wish the Forms documentation was more thorough/reliable! /Steve
Umbraco Forms - scroll to form location on submit (or validation error)
Hello, I have placed an Umbraco Forms contact form at the bottom of a page, below other content. When the form is submitted the page re-loads however the browser shows the top of the page, not the form which is/was at the bottom. (ie it's scrolled to the Top) It's not immediately clear to the user that they need to scroll down to the form again to see the 'Thank You...' message, or the validation summary in the event of an invalid entry. Does Forms have a way to handle scrolling to the location of the form after submitting or do I have to add DIY javascript to accomplish this? Thanks!
Hello again,
I've learned why the form was posting back when the entries were invalid but still don't know how to get the page to scroll to the 'thank you' message.
Anyone have an idea? I suppose an alternative would be to re-direct to a 'Thank You' page. It's definitely not good as it is now.
Thanks, Steve
This approach seems to work as the forms are standard ASP.NET affair :)
https://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping
/Chris
Chris,
Yes, it seems like that approach would work. The client side validation (required references to the scripts noted in the link above) does prevent the post back and I ended up just pointing to a dedicated 'Thank You' page on successful submission. Was the easiest way to go.
Thanks - Steve
An alternative solution would be to use AJAX forms; however, that isn't easy with Contour/Umbraco Forms.
Nicholas,
Thanks. I'd like to do something like that but at this point not sure where to start. I'd also like to include an angularjs based cascading dropdown which is populated by a webapi (which we have built, but not yet integrated with Forms). However, I have no idea where to look for information on how to accomplish this. Just checked the umbraco documentation on creating forms based on datasources - got the "ooops, something broke message"... I really wish the Forms documentation was more thorough/reliable!
/Steve
is working on a reply...