How do I prevent the success message from scrolling out of view to the bottom of the page after submitting a form on a site built in Webflow?

When a form is submitted in Webflow, the success message may appear low on the page—especially if the form was far down—causing it to scroll out of view. You can fix this by making sure the page auto-scrolls to the form’s location or positions the success message more predictably.

1. Use Anchor or Scroll-to-View Behavior

• Wrap the form block in a div and give that div a unique ID (e.g., form-wrapper).
• After successful form submission, use custom JavaScript to scroll to this wrapper. You can add this script in the Page Settings > Footer Code section.
• Example (just for inline reference):
  document.addEventListener("DOMContentLoaded", function() { Webflow.push(function() {$('.w-form-done').on('display', function() { $('html, body').animate({ scrollTop: $('#form-wrapper').offset().top }, 500); }); }); });
• This ensures the page scrolls back up to the form wrapper when the success message becomes visible.

2. Position the Success Message Above the Form

• Reposition the success message block (w-form-done) to appear above the form elements within the form block.
• In the Navigator panel, drag the success message above the input fields and submit button.
• This way, when it appears, it's more likely to stay in view, especially on smaller screens.

3. Set the Form in a Shorter Section

• If your form is placed at the bottom of a very tall section, try creating a dedicated, shorter section for the form so that users don’t have to scroll as far.
• You can also add padding above the form so the form isn't too close to the page bottom, giving the success message space to appear without scrolling.

4. Use Webflow’s Built-In Interactions (Optional)

• You can create a page interaction triggered by the success message becoming visible:
• Go to Interactions panel.
• Choose Element Trigger > When Display > Block for the success message.
• Set an action to Scroll To a specific element like the form-wrapper.

Summary

To prevent the success message from scrolling out of view, either auto-scroll the page to the form using JS, reposition the success message block above the form, or use interactions to control scroll behavior. These ensure the user always sees the confirmation clearly after submission.