Bootstraphunter

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

• John Brown
• July 14, 2021

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>

The post Embed HubSpot Form in WordPress, Customize CSS, and Hide Fieldset Margins on Hidden Fields [code snippet] appeared first on Bootstrap Creative.