Styling a Hubspot form in Hype

1

I have a Hubspot form that I am hosting in a Hype project. I’d like to style the form, but Hubspot doesn’t have built in styling when making a form. After publishing the Hype project, I used ‘Inspect Element’ to see the form code in the html. When I open up the html for the Hype project, I can’t find the pieces that ‘Inspect Element’ pointed me to. Is there somewhere else I should look for html aside from the main exported html doc?

2

Where did you place the form in your Hype project? and How?

Inside a HTML widget or inside another element?

D

3

Hubspot is likely generating elements dynamically, so you would need to target elements with CSS by using their class or ID. If you’re placing your form within an HTML widget, make sure you add a

<style>...</style>

…section within your HTML widget to target your form correctly.

Related: Embed HubSpot Form in Hype

4

You can also use the same JS that creates the form and include the parameter CSS and a string with your style information.

<script>
 hbspt.forms.create({ 
   portalId: '437232',
   formId: 'ca666e2b-0c44-4ea1-91ed-5e9e8ebc5736',
   css: "",
   cssRequired: ""
 });
</script>

For more info on the customisations you can go here.

D

5

I reached out to HubSpot as well, and their support folks told me that to edit the styling of the form, I shouldn’t use the embed code and should style it in the css of my project. However, I’m not finding where Hype exports the css to - is this something I have access to?

6

You would have to create your own styles in the Head HTML of your project or the HTML widget. If you know what the ID’s or Classes are then you could write something like this:

<style>

#ID { /* This is where you would put your ID ex. #registration */
    color: red; /* this changes the font color */
}

.class { /* This is where you would put your class ex. .error */
    color: red; /* this changes the font color */
}
</style>

As I said, place this code in your Head HTML or HTML widget. I think you have to disable the default styling in your hubspot form before you do this.

Here’s another example to change one of the form’s tags (input)

<style>

input[type="submit"] {
    background: #ff0000;  /* this is to change the background color of your submit button */
}

</style>

D