Jan 24
2019

How to Style a Form for HubSpot in 3 Minutes or Less

Your website is built, pages are styled, you’ve made sure that your colors and font styles are right for your brand, and everything looks cohesive. As you go to add your contact form, you realize.. it doesn’t match your website and it’s kind of an eye sore. So you try to style it and you realize that your website’s CSS is not HubSpot's best friend.

Styling a form for an external website that is not fully integrated with HubSpot can be difficult and a hassle. You can adjust the style by writing code, yes - but who has the time for that? In cases like this, conflicting code not only leads to poorly styled forms, but can also be the reason a user doesn’t convert. You might be losing potential leads because of how your forms look.

What if we told you that with Belch, you can change this without any coding necessary and in under 3 minutes? Don’t have a Belch account? That’s no problem. We’ve created a free form styler for all HubSpot users that’s simple and easy to use. Here’s how you can build a form for HubSpot in 3 minutes or less:

  1. Log into HubSpot to create the skeleton of your form. Before styling, log into your HubSpot portal to create and customize the options and fields of your form. Make sure you know what you want to ask your audience before setting anything up, and where you want to direct them after they submit the form.

  2. Import your form from HubSpot to Belch. Go into Belch’s Free Form Builder and log into your Hubspot portal. From here, select the form you want to style from the drop down menu. You’ll see your form appear with all of the customized features you created in step 1.

  3. Style your form. Now that you’ve imported the basic form layout, you can start styling. Change the length or width of the form, colors, and shape. You can update fonts, sizes and border styles. Belch helps you to focus on even the smallest, yet most crucial details in real time so you can see what it looks like in real-time, without any coding.

Once you’re happy with your edits, click “Export This Form”, copy and paste the code into your website, and ta-da



 

Ready to get started? Start styling forms with Belch Form Builder here.

Alt text

About Helena Salvo