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>

 

About the Author

Jacob Lett is the founder of Bootstrap Creative, a digital marketing consultancy that helps Michigan manufacturers generate qualified leads through HubSpot, technical SEO, and Google Ads. With over a decade of hands-on experience, he acts as a direct partner for B2B companies seeking measurable ROI from their marketing investment.



Related posts

Tags: , ,

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter