Embed HubSpot Form in WordPress, Customize CSS, and Hide Fieldset Margins on Hidden Fields [code snippet]


Embed HubSpot Form in WordPress, Customize CSS, and Hide Fieldset Margins on Hidden Fields [code snippet]

When you embed a HubSpot form on an external site you can add css: ‘ ‘ to the embed code to remove the default form styles. If you have hidden fields the fieldset could have a margin or padding applied from your website stylesheet. This is common because you want a fieldset to have some space but not when the fieldset inputs are hidden. I added some javascript code to form embed snippet to hide any hidden fieldsets.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
 portalId: "[your portal id here]",
 // this removes the default CSS styling
 css:'',
 formId: "[your form id here]"
});

jQuery(window).load(function() {
  jQuery('.hbspt-form input[type=hidden]').closest('fieldset').hide();
});
</script>

 


Written by: Jake Lett
Jake Lett is a results-driven B2B marketing consultant with 15+ years of experience helping businesses boost online visibility, generate qualified leads, and increase sales. Specializing in SEO, HubSpot, and PPC campaign management, Jake leverages proven strategies to deliver measurable growth. As a Certified Google Ads Specialist and HubSpot Developer, he is committed to driving impactful results for his clients.

Related posts

Tags: , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter