What is causing the issue where new pages load at the bottom instead of the top on the contact form in Webflow?

Published on
September 22, 2023

When a new page loads at the bottom instead of the top on the contact form in Webflow, it is likely caused by a few different factors. Here are some of the potential causes and solutions to address this issue:

  1. Missing or incorrect page Section ID: Each section on a page in Webflow should have a unique ID assigned to it. If the contact form section does not have an ID or if the ID is improperly set, it can cause the page to scroll to an incorrect location. To fix this, follow these steps:
  • Select the section with the contact form.
  • In the Element Settings panel on the right, scroll down to the "ELEMENT ID" field.
  • Add a unique ID for the section, such as "contact" or "contact-form".
  • Publish the site and test if the issue is resolved.
  1. Scroll Restoration: Webflow has a built-in scroll restoration feature that remembers the scroll position when navigating between pages. Sometimes, this feature can cause pages to load at the bottom instead of the top. To disable this feature, you can follow these instructions:
  • Go to the Project Settings in your Webflow dashboard.
  • Select the "Hosting" tab.
  • Scroll down to the "Advanced" section.
  • Toggle off the option "Scroll Restoration."
  • Publish the site and test if the issue is resolved.
  1. External JavaScript conflict: If you have added custom JavaScript code or embedded widgets on your site, it's possible that one of those scripts is conflicting with the page load behavior. To troubleshoot this:
  • Temporarily remove any custom JavaScript code or embedded widgets from the contact form page.
  • Publish the site and test if the issue is resolved.
  • If the issue is resolved, add back the custom code or widgets one by one, testing after each addition to identify the conflicting script.
  1. CSS positioning: Improper CSS positioning for the contact form section can also cause it to load at the bottom of the page. Ensure that the CSS properties for the section, such as position, top, and left, are correctly set to position it at the desired location on the page.

By following these troubleshooting steps, you should be able to identify and resolve the issue where new pages load at the bottom instead of the top on the contact form in Webflow.

Additional questions that users may use to search for this answer:

  1. How do I fix the issue where new pages load at the bottom instead of the top on Webflow?
  2. Why is my Webflow contact form loading at the bottom instead of the top?
  3. How can I make Webflow pages load at the top instead of scrolling to the bottom?