topic Re: Landing Page Scroll Up after Form Submitted in Blog, Website & Page Publishing

Landing Page Scroll Up after Form Submitted

LSiesto — Fri, 06 Jan 2023 21:24:40 GMT

I'm sure there is a way to do this. How can I force the Landing Page to scroll back to top (where the Thank You is) after a form is submitted? Please assist. Thank you!

Lori

Re: Landing Page Scroll Up after Form Submitted

TitiCuisset — Mon, 09 Jan 2023 09:40:42 GMT

Hi @LSiesto

Thank you for reaching out.

I want to tag some of our experts here - @crispyGTM @Jnix284 do you have some advice for @LSiesto on this?

Thank you!

Best

Tiphaine

Re: Landing Page Scroll Up after Form Submitted

Jnix284 — Mon, 09 Jan 2023 15:11:54 GMT

Hi @LSiesto and happy to help @TitiCuisset 🙂

If I am understanding correctly, it sounds like your form is a bit longer, so when it is submitted on the landing page and you use the option to include a message upon form submit, the message is appearing higher on the page than the portion of the page the user is seeing once submitted?

I have seen this from time to time with longer forms and I haven't found an elegant way to scroll back to the top that doesn't require the user to interact in some way.

As a best practice, I would recommend using the "redirect to another page" option instead of the "Display an inline thank you message" because it gives you the opportunity to present relevant, helpful information related to their form submission and keep them on your website.

Just my two cents - even if you use a very basic Thank You LP, I think it provides a better UX than the inline message.

@Anton do you know a way to make the page scroll to the top after form submit so that the top of the form area is in focus where the inline thank you message appears? I've tried a few things with JS, but it's a little outside of my technical expertise with code and thought you might have an idea 🙂

Re: Landing Page Scroll Up after Form Submitted

crispyGTM — Tue, 10 Jan 2023 07:18:19 GMT

@TitiCuisset Thanks for the tag!

I agree with everything that @Jnix284, the only other thing that comes to mind would be anchor linking to the Thank You message at the top after the form is submitted. This would take a custom code ninja but it's definitely possible.

If this post helped to solve what you were looking for, please mark this as an accepted solution. Happy HubSpotting!

Re: Landing Page Scroll Up after Form Submitted

LSiesto — Tue, 10 Jan 2023 16:00:21 GMT

Thank you @TitiCuisset for helping direct my inquiry, and thank you @Jnix284 and @crispyGTM for your suggestions. I'm not a coder by nature, but I'm sure my team can implement something. In the meantime, the idea of redirecting them to a Thank You page seems like the best solution and will work just fine for our needs.

Thanks again!

Lori

Re: Landing Page Scroll Up after Form Submitted

Jnix284 — Tue, 10 Jan 2023 16:03:34 GMT

Hi @LSiesto , I'm glad the redirect will work for now!

You might also add it to the Ideas discussion here as an improvement to the inline message feature. It seems like this would impact all customers and benefit everyone if the page did this automatically.

Re: Landing Page Scroll Up after Form Submitted

DevenD — Wed, 29 May 2024 06:05:34 GMT

I know it's been a while, but for others who might come accross this while hunting down solutions:
[From the perspective of a code ninja/monkey - (some explanation/caveats after)]

To start, this script can be added anywhere but I've usually found it best to add it to the 'Footer HTML' section of the page settings or in a template with a locked form module as it will only work for the specified form ID.

**You COULD generalize by simply removing the "[data-form-id="{{ formID }}]" from the top querySelector to leave "form .hs_submit" and swapping the bottom one to .dnd-section:has(div[data-hs-forms-root="true"]) but if you have any other forms on the page (visible or not) this will cause an error.

Next, some "justify yourself you verbose-frankencoder-fiend" explanation. This nasty double-timeout-even-AFTER-waiting-for-DOMContentLoaded does have some rationality behind it, I swear... (though there is undoubtedly a bit of bloat)

So first off, this starts by using hubl to save the form ID for ease of use and also so we don't affect unintended forms. You can find this in the hubspot forms tool, just go to edit your form in the editor and check the url. You'll see the id --> forms/[your account ID]/editor/[Form Id will be here]/... If you have multiple re-occurances of the same form on the same page, you might need an extra selector class or ID on a wrapper to help further specify the target (such as "document.querySelector("#someWrapperID #form_{{ formID }} .hs...." etc which would also need to be added inside the ":has(HERE #form_{{..." as well).

Next, we wait... no.. for real. The hubspot form renders separately from the rest of the dom (page content) so to avoid asking for an element that doesn't yet exists (usually computers are not fans of this), we wait 1 to 2 seconds. This is usually plenty of time so long as your page isn't some abomination of SEO with 12 prerendered 8k videos.

Next, we add an event listener to the submission button that will wait one second (1000 miliseconds) to make sure the form submission has finished and the section has resized to accomodate the new inline thank-you text. With that ready, it then scrolls up until the END of that section is at the bottom of the screen. You could also just swap this to block: "start" instead to line up the top of the section to the top of the screen, but I've found that more often than not, the inability to add an offset makes the spacing tight, and this also doesn't account for any sticky headers or notification banners that will then cover up the top of the section. You could just add padding to the top to accomodate these, but then your being forced to reformat the page just to accomdate this. Instead, I just use the end, as the short inline thank you messages are rarely (if ever) long enough to take up the full screen height.

*One last disclaimer: as you might have noticed, this is based on being used on using the drag and drop page editor sections, not the older template editor. But this can easily be adapted for those old template editors which have a CSS ID option on all of the module groups. Just add an ID (no spaces) and then replace the ".dnd-section" in the code up above with your "#newIdOrWhatever". Just be sure to use that leading hash '#' if its an ID or a period '.' if its a class.

Best of Luck!

Re: Landing Page Scroll Up after Form Submitted

forb1ch — Tue, 15 Oct 2024 13:25:49 GMT

The issue is too old, but anyway i will left my fix for it.

1. Create the anchor on the top of the form.
2. Add HubSpot event - onFormSubmitted and add the scroll functionality to the anchor.

P.s. if u have fixed header, u need to change the - topPos variable.

let topPos = element.getBoundingClientRect().top + window.pageYOffset - $headerHeight;

Example:

<div id="hs-form-anchor"></div> <script charset="utf-8" type="text/javascript" src="source of the form"></script> <script> hbspt.forms.create({ region: "region-example", portalId: "portalId-example", formId: "formId-example", onFormSubmitted: function($form) { const element = document.querySelector('#hs-form-anchor'); let topPos = element.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: topPos, behavior: 'smooth' }) } }); </script>