Custom Form Style

taylormaggi · ‎Jan 25, 2017

My team is considering transitioning our web forms from API integrations to Hubspot forms however, we need to understand what custom styling options we have in order to keep the branding of the form consistent with the other elements of the site. Can anyone point me in the right direction for custom styling?

Tom · ‎Jan 26, 2017

Hey Taylor,

A stylesheet is a page or pages attached to each of your web pages that are used to style elements on your pages. They can style everything from layout, to colour.

The language used for sylesheets would be CSS (Cascading Style Sheets). There is a setting for HubSpot forms to not include any css from HubSpot. This means the HTML of the form will pull through, but you can style the form using your own css rules on your wordpress stylesheet.

There is a helpful guide on the basics of stylesheets available from w3.org : https://www.w3.org/Style/Overview.en.html

Each website has their own stylesheets and each designer can set these up differently so there would be no general rule of where to find your stylesheet within Wordpress or what rules may be there already.

If you need to edit a form to match your branding, it may be best to reach out to your web designer as they would be familiar with your Wordpress setup.

View solution in original post

tjoyce · ‎Jun 5, 2018

If you're not familiar with CSS StyleSheets, you can use this tool. If you are familiar with CSS, you can modify the selectors HubSpot defines in their documentation.

Tom · ‎Jan 25, 2017

Hey @taylormaggi,

Are you embedding the form on an external site or on a HubSpot page?

If you are using it on an external site you can simply select "remove default styling" within the embed form. This will give the form no styling so you can style is any way you like on your stylesheet.

If this is within your HubSpot page you can add a custom class to the module itself and style it any way you like using your stylesheet.

Either way you shouldn't see any limitations in getting the colour and branding of your form to match the branding of your company. This can all be easily achieved through css and your stylesheet.

Aldo_Arriaga · ‎Apr 6, 2018

How come I don't have the "remove Hubsput styling" checkbox when I see the embed code? Is this not included in the free version?

DrFriedParts · ‎Apr 7, 2018

It's included, but HubSpot created a better (more precise) system for doing that. Then, they removed the checkbox (I guess).

So... you can remove Hubspot styling by modifying the embed code like this:

Don't touch this part of the embed code:

<!--[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({

Insert the following code here:

        css: '',

This will remove the some of the default styling from HubSpot. They will still restrict the form to 500px wide. They will still style the sizes and positions of the rows and columns of the inputs. But they will use browser default styling otherwise.

If you want to remove the styling from the error (validation) messages (again it will still style and position the text, just not apply fonts and such), you can use this one instead:

       css: '',
       cssRequired: '',

In all cases, this original embed code must follow your custom code:

       	portalId: "there will be numbers here... don't change them",
	formId: "there will be alphanumeric code here... don't change it"
});
</script>

To override HubSpot's form width, you need to add this CSS code to either your CSS stylesheet or into the <head> of your page:

<style>
.hs-form fieldset {
  max-width: none!important;
}
</style>

This will remove the form width set by HubSpot, then you can control the form width from it's parent or by replacing the "none" above with a value of your choosing.

savvy_solutions · ‎Nov 28, 2018

Hi there,

I tried your codes and many others and they just aren't working? I am wanting to remove the width like you have in the last css but it doesn't want to work. Do you have any other suggestions that I could try?

Thanks,

Liz

DrFriedParts · ‎Nov 28, 2018

Hi Liz,

Looks like Hubspot made an update that breaks some of the previous guidance. I'll take a look and update this post with the corrections in a few hours. Thanks for letting me know! 😃

ScottyT · ‎Jun 25, 2018

Really helpful @DrFriedParts, thank you.

TristanB · ‎Jul 24, 2018

I will chime in here.

I was shocked to discover that the "structural' styles that Hubspot refuses to not inject are not namespaced. This means that they can (and did) interfere with your own sites. CSS. Example:

Here the injected styles are styling a commonly used OSS component. This can break a clients site.

This is a bug, and it needs to be fixed.

taylormaggi · ‎Jan 25, 2017

Thank you for your response. This would be within an external website built in wordpress. I am not familiar with stylesheets. Can you provide more context?

Tom · ‎Jan 26, 2017

Hey Taylor,

A stylesheet is a page or pages attached to each of your web pages that are used to style elements on your pages. They can style everything from layout, to colour.

The language used for sylesheets would be CSS (Cascading Style Sheets). There is a setting for HubSpot forms to not include any css from HubSpot. This means the HTML of the form will pull through, but you can style the form using your own css rules on your wordpress stylesheet.

There is a helpful guide on the basics of stylesheets available from w3.org : https://www.w3.org/Style/Overview.en.html

Each website has their own stylesheets and each designer can set these up differently so there would be no general rule of where to find your stylesheet within Wordpress or what rules may be there already.

If you need to edit a form to match your branding, it may be best to reach out to your web designer as they would be familiar with your Wordpress setup.

FilamentWI · ‎Mar 23, 2018

I am confused, how are we supposed to style the form when the HTML is hidden? When I view source all I see if the JS. How can we style if we don't know the classes, ids and HTML elements in form?

DrFriedParts · ‎Apr 2, 2018

Put the embedded form in your site, visit the page (so your browser executes the script, calls HubSpots server, and downloads the form contents), then inspect the rendered HTML to find the elements, classes, id's, etc... (easy mode)

...or view the docs here (hard mode).

Tom · ‎Apr 3, 2018

You want to make sure you're using "inspect element" in dev tools to view the source and not just right clicking > view source. Inspect element shows the rendered page, "view source" will only show you the source html file of the page before it's rendered.

DrFriedParts · ‎Apr 3, 2018

EDIT: Removed. Original response was intended for a different forum topic. Typed in the wrong thread. You know Hubspot forums would work much better if the original thread wasn't hidden when you're writing a reply. 😉

UPDATE: Ok, this is getting complicated... ha!

First, I replied to the wrong thread

Then, @Tom replied to my wrong reply with a question, so I'll post his (now removed) response and answer it here:

Thanks for the insight @DrFriedParts . We do have certain default styling that will be injected into the html of the page through the embed script. You can remove these by adding the "css: '', line to your embed script or by clicking "remove default HubSpot styling" within your editor. I'm not sure I follow what you're referencing when you say we're promising the script works different on that link. What line specifically are you referencing here?

The docs claim that using an empty css: property on the JSON configuration object will be an...

Example of form with no styling...

But, actually, there will still be some styling. For example, the fieldsets will have a max width of 500px because Hubspot still sends a stylesheet... even though they promised they wouldn't.

Tom · ‎Apr 3, 2018

Thanks for following up @DrFriedParts you're completely right. The remove CSS rule removed the "default HubSpot styling". We don't claim this stops all css from being injected through the form embed, we do still have some structural styling which cannot be removed from the embed code (the max-width for example).

The first line on the page you linked doesn't outline that the only way to have complete control over the styling is to use an external form and send the submissions to HubSpot using our Forms API.

"If you need complete control over the styles and actions of your form, you will still want to use the Forms API. "

I completely understand that this isn't completely clear in the developers documentation, I'd definitely encourage you to submit feedback on this article through the "submit feedback" button on the bottom right of the page which can send feedback immediately to our technical writing team.

I hope this helps!

DrFriedParts · ‎Apr 3, 2018

@Tom... Yeah, but WHY? No styling means "no styling". Just don't send any styling #duh 😉 It's not a fix the docs problem, it's a fix the bug problem (which is a 2 minute fix, one more if statement).

Hubspot's configurable embed is the right solution. It is configured by the marketing team and optimized inside Hubspot, but appears as the dev/design guys want it on the site. It's perfect (if fully implemented). It divides concerns they way they should be, automatically stays current with the "growth stack", and doesn't duplicate any effort.

API is a silly answer that companies give when they don't understand their users or the use case of their product. It's basically, "here's our database, you build our app." API form interactions result in a lot of wasted effort. It means each Hubspot Forms user must develop (duplicate) the form UI and has to keep it synchronized -- which defeats the core mission of using Hubspot as a platform to enable code-free (or at least a lot less of it) innovation by marketers.

Tom · ‎Apr 3, 2018

I completely understand that no styling would definitely suit your needs here. However we are a widely used platform. Removing the "default HubSpot styling" has always been a removal of the default "designed" HubSpot styling and has always left certain structural styling within the form. This is why we've never phrased this as "remove all styling" .

We have had a discussion on removing all styling in the past. However we made the decision to keep the structural styling in place. You're right in that removing these styles from the rendered embed form would be a 2 minute technical change. However, this would affect every single form using our embedded forms and means that anyone who is relying on and expecting us to have these structural styles would have these removed on their page. While the technial aspect of this is a relatively simple change there would be a much larger fallout on our customers web pages and from our research into this removing this styling would at the moment have a negative affect that currently doesn't outweigh the positive affects to the majority of our customers using the forms embed.

I completely understand that this structural styling isn't something you require at the moment but I want to reiterate that this isn't something we're simply over looking or saying "well people can deal with it". We're constantly working to make our forms tools as intuitive, scalable and easy to use as possible, I'll definitely we sure to relay your feedback to the team and bear it in mind in our future discussions. However for the time being we've made the decision not to remove this structural styling.

DrFriedParts · ‎Apr 4, 2018

@Tom Allowing complete customization of the embed code is a huge win. Clearly smart people at Hubspot realized that when they decided to offer the feature (plus all the screaming users in the forums ;-). Offering the option to retain some defaults from Hubspot is also a smart move. That's why the configuration CSS options are not monolithic and divided as such:

To keep the "structural css" as you call it, make it another option "cssStructure" just like you did for "cssRequired". That's a perfect solution. In fact, given the frequent asks from users, it would make sense to add an explicit "cssWidth" option as well. Then you'd have your cake (simplicity / defaults) and could eat it too (supports complete and utter customization -- while retaining portions of the styling that do work for you = fastest dev time; easiest maintenance).

LCSKMiller · ‎Jan 25, 2017

Hi Taylor,

We also use Wordpress and have embedded forms into our site.

First, create the form you wish to use in HubSpot.

Then, under Embed you'll see the "Remove HubSpot Default Styling" as mentioned earlier. We've made our default styling match our website so any landing pages built in HubSpot look similar.

Now, copy the code under "Copy this snippet below onto your site". In Wordpress, switch your view so you can see the page code instead of visual on the page you wish to have the form. Paste the form code here. You will most likely need to do some additional styling to make it look better on the page.

We've created ours a little differently by creating a custom page template in Wordpress and on the webpage that should host the form, we simply have to type in the HubSpot form ID.

CMS Development