How to Customize a HubSpot Form with CSS and JavaScript

Spread the love

Today I will teach you how to customize a HubSpot form with CSS and JavaScript, including jQuery.

Required Before Getting Started

Before getting started, you need to have a Hubspot pro account and have already created a form. Let me explain what type of Hubspot account you need.

Subscribed to a Hubspot Pro Account

Let's go to an article that HubSpot has made in their HubSpot Knowledge Base titled "Set up and style a HubSpot form on an external site." Which I will leave a link to in the description (1). When you click the heading "Style your embedded form with CSS in your external stylesheet " in the article's table of contents or when you scroll to the bottom. You will see a notice at the bottom of the page that Hubspot mentions. To style your Hubspot form in your external stylesheet, you first need to be subscribed to one of the following Hubspot plans:

Marketing Hub
or CMS Hub Professional
or Enterprise

So please make sure to be subscribed. Either to one of those Hubspot plans or to be in a trial of one of those Hubspot plans. I will leave a link to the web page of Products & Plans that Hubspot offers in the description of this video (2). Next, we will open a Hubspot form I created in my account.

Opening and Sharing a Hubspot Form

We do this by logging into our Hubspot account, going to the top menu, clicking the Marketing tab, hovering over the Lead Capture tab, and clicking on the Forms tab. We then click on one of the forms to open the Hubspot form editor or create a new form. In my case, I already made a form that I will now open, as you can see on the right-hand side of this form editor that we have open. You can see I have added several fields, one for the First name, a form field for an Email, and another to write a message.

Once you are satisfied with the fields and other content, such as text and logo, that you have added, we click on the Style & preview tab at the top of the page. We need to click the "Set as raw HTML form" toggle to switch it on. According to the Hubspot article we first read, this will: render the form as a "raw HTML element on your external page as opposed to inside an iframe, and any default HubSpot styling applied to the form will be removed." So that's what we want, without any Hubspot styling, and we can apply our styling on our site.

Embed the Hubspot Form on Your Website Page

We will then embed the form on one of my web pages by clicking on the Embed button on the top right and clicking on the Copy button at the bottom, which copies the HTML code of the form. I will go to one of the pages on my WordPress website and open the page to edit it. I'm going to log in, go to the Pages, and then click on the Sample Page to edit it. I will paste the copied HTML code of the Hubspot form. Let's quickly look at the page's front end to see the form. As you can see, the Hubspot form is now viewable on the front end but is missing the styling we will add with CSS. It's also missing the functionality we will add with JavaScript, explicitly using the jQuery framework.

Adding Styling to the Hubspot Form

To add our styling to the Hubspot form using CSS, we must add the style properties where WordPress will not stop the styling from being added to the HubSpot form. An ideal place is in the style.css file, which is at the root of your child theme. Another way to add our custom CSS for the HubSpot form is to add a style tag above the HubSpot script tag.

I will choose to add a style tag, and I must first minify the CSS properties before adding them. I need to do this before updating the page because the default WordPress WYSIWYG editor you see when editing every page and post will add a paragraph p tag around your CSS code. WordPress will wrap not only CSS code but also JavaScript code. So to avoid that, what you can do is minify the CSS and JavaScript code inside the default WordPress WYSIWYG editor.

I will copy the CSS properties I have written from a file and then paste them into a CSS autoprefixer. This one is called Autoprefixer CSS Online, and I will add a link to it in the description (3). Once you have prefixed the CSS properties so they may work on the various browsers that people use, I will copy the CSS and paste it into an online CSS minifier. I will add a link to it in the description (4). Now that I have minified the CSS code, I will paste it into the WYSIWYG page editor above the script tag inside a style tag. Let's save the page, visit the front end, and see if the form has styling. As you can see, the form now has styling.

Adding the Functionality to the HubSpot Form

To add JavaScript to the HubSpot form, I will add it inside the script tag of the WYSIWYG editor, specifically inside the HubSpot script. What we have been doing is customizing the embed code of the HubSpot form. One of the conditions to add JavaScript to the HubSpot form is to ensure the embed code is raw HTML which I already did. I will then add a configuration option to the JavaScript code that came with the HubSpot form. The configuration option is called "onFormReady," and it will have a callback function. You can find this information in a HubSpot article called "How to customize the form embed code," which I will leave a link to in the description (5). Inside this callback function is where I added my custom JavaScript with jQuery code.

All it does is move the label element of each field to the top of it whenever a user focuses on the area by clicking on it, and it does the reverse when a user unfocuses from the field area by clicking somewhere else. So let's add my JavaScript code to the form by copying and pasting it into a JavaScript minifier; I copy this code, paste it inside the script tag, and finally add all of the HTML to the HubSpot form. Let's look at the front end to see if the functionality is working now. Great! I have now finished adding the styling and functionality to the HubSpot form.

Conclusion

That is how you customize a HubSpot form with CSS and JavaScript. The steps are to:

Create a HubSpot form.
Set the HubSpot form to raw HTML when editing in HubSpot.
Add the embed code to your website, and
Add styling and functionality.

For the styling, remember to minify it if you've put it inside of a WordPress WYSIWYG editor. When adding JavaScript to a HubSpot form, it has to go inside the form script embed code using one of the configuration options HubSpot gives you. Thank you for watching this tutorial; remember to let me know what next topic you would like to learn. In the description of this video, I will leave links to all the sites I used as tools to help me and also links to all the code as minified and unminified. Remember to like this video and subscribe to my channel to get a notification of my newest web development video.