Prevent Form from Getting Covered by a Sticky Menu Bar

By default, Convert Forms uses AJAX-based submissions. Upon submission, a thank-you or error message appears at the top of the form. To enhance user experience, the form automatically scrolls to the message.

However, if the website has a sticky header (such as a fixed navigation bar), it may overlap and obscure the thank-you or error message. As a result, users might not see the message clearly, causing confusion.

This happens because the browser scrolls to the top of the form without accounting for the height of the sticky header.

When does this problem occur?

1. After submitting a form successfully, the thank-you message is hidden behind the sticky header.
2. When there is a validation error, Convert Forms displays the error message at the top while focusing on the first invalid field, which may not be visible.

Solution

The easiest way to fix this issue is by adding a simple CSS rule that tells the browser to leave space for the sticky header when scrolling to an element.

html {
   /* Adjust based on your sticky header height */
   scroll-padding-top: 300px;
}

Steps to implement

1. Edit your form
2. Go to the Advanced tab
3. Place the CSS snippet in the Custom CSS option
4. Adjust the 300px value to match the height of your sticky header.
5. Save and test your form to ensure messages appear correctly.

Alternatively, you can add the CSS rule to your website's global stylesheet or inside the Custom CSS field in your template settings.