How can i add my personal css into forms and websites

[reto-ulrich]

Hi Everyone, I just wanted to try out if it is possible to use custom CSS in Hubspot for forms and websites. I found the following instructions for this: https://knowledge.hubspot.com/de/forms/how-do-i-style-my-embedded-form

My problem now is that I can't find the setting "Set as raw HTML form". We have a Professional account. Can anyone tell me where I can implement a custom CSS that will grab on the forms? And does anyone know if it is possible to customize the standard hubspot css so that I can adapt all existing elements to the company's corporate design?

Thank you for your support. Cheers Reto

[miljkovicmisa · Accepted solution]

Hello @reto-ulrich and thank you for writing in the forum.

First off the row html trigger is located in the style tab as shown in the screenshot below:

When you set it on your form will be raw html ready to get styled!

 

As with all my answers, I'll take the step to dive a bit deeper into the topic to introduce you to some more advanced options, hubspot gives.

Option 1:

Create a form on your website and post its data to the hubspot form.
1. Create a form on your website with simple html and css as you would normally do without hubspot.

2. Create a form on your hubspot account, without worrying about styling and code. (You have probably already created the form).
3. Then use javascript to get the data from the form of your website on submit. More info about the onSubmit event here. You can find more info on how to get the data from your form here.
4. Finally use the forms API with some javascript to send that form to hubspot. You can find details in here for the forms API.

I will be posting the API implementation if you are interested in this approach.

Option 2:

Create a hubspot form with pure javascript (This is basically how hubspot creates a form with the code you copy, this is the manual method).
You can find all the steps right here in this link.

All in all, the approach you are trying is a bit tedious, but it is just fine, the only downside is that you will have to inspect all the elements in the form and check the id's and class names from the generated form to get the styling right. I have also done it this way once and it's ok, probably the browser inspect tool will become your best friend, if it isn't already. 😛

I hope my answer is helpful, if so consider marking it as a solution!

[miljkovicmisa · Accepted solution]

Hey @reto-ulrich , just checking to see if you had any luck in resolving your issue? Was my answer any helpful?

[reto-ulrich]

Yes, the answer was helpful. Thank you so much.

[miljkovicmisa · Accepted solution]

Hello @reto-ulrich and thank you for writing in the forum.

First off the row html trigger is located in the style tab as shown in the screenshot below:

When you set it on your form will be raw html ready to get styled!

 

As with all my answers, I'll take the step to dive a bit deeper into the topic to introduce you to some more advanced options, hubspot gives.

Option 1:

Create a form on your website and post its data to the hubspot form.
1. Create a form on your website with simple html and css as you would normally do without hubspot.

2. Create a form on your hubspot account, without worrying about styling and code. (You have probably already created the form).
3. Then use javascript to get the data from the form of your website on submit. More info about the onSubmit event here. You can find more info on how to get the data from your form here.
4. Finally use the forms API with some javascript to send that form to hubspot. You can find details in here for the forms API.

I will be posting the API implementation if you are interested in this approach.

Option 2:

Create a hubspot form with pure javascript (This is basically how hubspot creates a form with the code you copy, this is the manual method).
You can find all the steps right here in this link.

All in all, the approach you are trying is a bit tedious, but it is just fine, the only downside is that you will have to inspect all the elements in the form and check the id's and class names from the generated form to get the styling right. I have also done it this way once and it's ok, probably the browser inspect tool will become your best friend, if it isn't already. 😛

I hope my answer is helpful, if so consider marking it as a solution!