Form fields not appearing in landing page

[YvonneBaer]

I have created the below landing page, but the form fields are not showing up when I view the landing page

http://silversoft-co-za-4847931.hs-sites.com/magnetic-request-a-demo

When I go into the form itself here: https://share.hsforms.com/1a31s4Jc8TEqWE-AdufdxkA2vwor  it does show up, so not sure where I am going wrong?

[jackcoldrick]

Hi @YvonneBaer,

The reason this is happening is due to the CSS stylesheet associated with the landing page you've included the form on. These CSS stylesheets contain rules to alter the look and feel of your forms so that you can create a fully tailored solution to meet your own needs. In this case there is a CSS rule that is hiding the labels. This rule specifically:

.landing_page_form_outer_wrap .hs-form .hs-form-field>label, .landing_page_form_outer_wrap .hs-form .hs-field-desc {
display: none;
}

To resolve I would recommend adding the following to the head html of your landing page as per this article: https://knowledge.hubspot.com/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of...

<style>
.landing_page_form_outer_wrap .hs-form .hs-form-field>label, .landing_page_form_outer_wrap .hs-form .hs-field-desc {
display: block;
}
</style>

This will override the CSS rule on that specific page. The longer term fix would be to update the rule in the stylesheet however just be mindful that if you do this it will apply to ALL pages using that stylesheet.

I hope this helps 🙂

Jack

[YvonneBaer]

Thank you @jackcoldrick , silly question - how to do I get to the html of the landing page?

I have gone to "advanced settings"... but struggling to find the form code...

[jackcoldrick · Accepted solution]

Hi @YvonneBaer ,

Apologies I didn't include the link that had instructions on how to do this. https://knowledge.hubspot.com/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of.... If you've gone into "Advanced settings" you should see an area titled "head html". If you copy the below in and save your form will look the way you want it to:

<style>
.landing_page_form_outer_wrap .hs-form .hs-form-field>label, .landing_page_form_outer_wrap .hs-form .hs-field-desc {
display: block;
}
</style>

Let me know if you've any problems at all.

Regards,

Jack

[YvonneBaer]

Fixed it! thank you @jackcoldrick , you have been a huge help.

[jackcoldrick]

Not a problem glad its resolved 🙂