COS-General

How can I prevent my site header from covering my form's thank you message?

Last updated: March 10, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

If you've noticed that the header on your HubSpot page is covering the thank you message for form submissions, you can fix this by editing your CSS stylesheet  and adding code to the thank you message itself (note: if you are not comfortable using CSS, it's recommended that you work with a designer to make changes to your stylesheet).

If you are using a fixed header that sticks to the top of your browser as visitors scroll, the header may cover your form's inline thank you message. To prevent this, add the following CSS to the stylesheet that's being applied to that page:

.hs_cos_wrapper_type_form{
display:block
}


You will also need to add some code to your thank you message itself. To do this:

  • Navigate to Content Landing Pages or Website Pages (depending where the form appears). 
  • Hover over the page where the form appears and click Edit
  • Click the form module to open the Options panel.
  • Click the source code icon.

  • Add the following code around your thank you message, substituting the pixel value of the padding so that it's equal to or greater than the height of your header. For example, if your header is 100px tall, the value would be 100px, as shown here:

    <div style="padding-top: 100px">Thank you for submitting the form.</div>

You can quickly find the height of your header by navigating to the live version of your page and right clicking anywhere. Select Inspect or Inspect element from the dropdown that appears. Hover your mouse over the header, making sure the entire element is highlighted, to see the dimensions.

Was this article helpful?