![Embed HubSpot Form in WordPress, Customize CSS, and Hide Fieldset Margins on Hidden Fields [code snippet]](https://i0.wp.com/bootstrapcreative.com/wp-bc/wp-content/uploads/2020/08/code-snippet.png?fit=1024%2C1024&ssl=1)
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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!--[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> |
