Custom css style to hubspot form coming from shortcode in wordpress

Develop, Build & Integrate CMS Development
1

Sir i need to custom style my hubspot forms i made via “HubSpot All-In-One Marketing – Forms, Popups, Live Chat – WordPress plugin | WordPress.org” this plugin an iframe is generated by its shortcode and i am not able to change css of forms can you please help me to fix this thanks

2

Hi @RudraLounce,

never really worked with the WordPress Plugin - but - there are a few ways what you can try:

  1. Disable the default HubSpot form styling in the form.
    To do this navigate to the “Style & preview” tab of the form and enable the function. This should give you the form in plain HTML an it should get the styling informations from your WordPressfor
  2. Embed the form directly with disabled styling directly into your WordPress page
  3. There shoudl be plenty of other solutions out there - I got the best experience with those two.

For 2:

How to get the embed code:
Go to your form in HubSpot and click on “embed” in the top right corner. This will open an window where you can click on “embed code”. It will look something like this:

<!--[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({
	region: "na1",
	portalId: "XXX",
	formId: "XXX-XXX-XXX"
});
</script>

Copy this whole code block

Open your WordPress page and place this code in a code module(if your WordPress Theme got one). A source code view of a (rich-)text module could work too but I would use a code module.

Paste your copied code into the module.

Modify it slightly to this:

<!--[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({
	region: "na1",
	portalId: "XXX",
	formId: "XXX-XXX-XXX",
 css:''
});
</script>

so the only thing that needs to be done is adding a " css: ‘’ " to it (don’t forget the comma at the end of the formId row).

hope this helps

best,

Anton

3

Hi @RudraLounce ,

In WordPress, you can embed a custom code widget of form, if you are using an elementor and then add a custom div with the id or class at the top. After this, you can style your form by taking the reference of the class or id.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.