Form Success Message not showing in view

Design help General
1

Hi
I’m having a look at a clients site built by another designer. For some reason after submitting a form the success massage scrolls out of view to the bottom of the page.

Here is the site : Contact Us | NTS Tire Supply
Note: Fill in random info and submit form to see what happens.

Read only link: Webflow - NTS Tire Supply

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Chris,

I’d probably clone the page ( or site, depending ), then look for and remove anything that’s scrolling related. Interactions, scripts, hashtag section-scrolling links.

Remove them one at a time, publish and retest after each until you find it.

You can just clone the page if those impacts are limited to the page.
If you have site-wide code or class-level interactions, then it’s better to clone the site to avoid breaking anything.

I didn’t spot anything obvious, that scroll interaction should be targeted to mobile portrait only.

However I also clicked on something and a popup version of the contact form appeared, so you’ve got a fair bit of stuff going on in there.

There is a chance that it’s something happening internally in the form that Webflow has changed but I don’t think so. I’ve not seen the forms auto-scroll on submit, and it looks like it’s very clearly scrolling to the next section.

Do you have custom CSS with scroll snapping on?

3

I’m 90% certain it’s this code-
My working theory is that as webflow changes the visibility of the form panels on submit, This causes a momentary “disappearance” of part of your page, so when your scrollTo executes, top becomes the section following the form.

<script>
  // Function to scroll to the top of the page
  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  // Run the scrollToTop function after the form is submitted
  document.addEventListener('submit', function(event) {
    // Check if the form is on the specific page you want to target
    if (event.target.getAttribute('id') === 'contact') {
      scrollToTop();
    }
  });
</script>
4

Hi Michael,

So I added the code to try and override whatever was pushing the scroll down. But forgot to delete it. So the scroll down still happens even without the code

5

Hi Michael,

I don’t see any custom CSS with scroll but I will have a look again. I will also try your suggestions and let you know what happens.

Thanks.