Form styling - remove required asterisk with hubspot default CSS

Develop, Build & Integrate CMS Development
1

Hi Everyone,

I’m new to hubspot and this community and I hope someone will be able to help me out.

I’m replacing the forms we have on our website with hubspot forms and although I’m happy with the way they look, I would like to have one little change, removing the asterisk on a required field as we’re not using a label for these fields.

I found some answers on this forum requiring to create a CSS file and adding some code there but I was wondering if there would be a way to get to the same result only by adding some extra element to the embed code?

If not, since we like the way our forms look with the hubspot CSS, is there a way I can copy this CSS, make it my own and tweek it a little so that the asterisk wouldn’t show?

Thanks already for your answer!

Kind regards,

Seb

2

Can you link us to a preview link of a page that the form is on?

3

Thanks for your quick answer!

The form is live here: http://www.duomedia.com/news

4

@Seblr - That form is rendering in an iframe which generally means you are on a HubSpot free account. You won’t be able to change the styling of the form, if that’s the case.

5

@tjoyce We are using a paid version and I do have acess to styling as far as I can see. I could however not find any option to edit the CSS.

6

@Seblr - go to your form and go to the settings. There might be a checkbox to render the form in an iframe (this is a new feature HS rolled out)

7

@tjoyce Sorry, I’m not seeing this. I see I can use an unstyled form, but nothing about rendering it in an iframe. Where would it be?

8

Sorry, I thought that feature was rolled out, maybe it’s not out yet. You might want to contact support since the iframe is generally controlled by the HS plan you’re on.

If you could report back your findings, that would be a huge help to future questions like yours.

9

@tjoyce OK, thanks for your time. Will certainly do.

10

@tjoyce In the end I used Belch.io to redesign the form scratch and added the following to the code to get rid of the asterisk:

.hs-form-required {display: none;}

11

As co-founder of Belch.io, I’m glad to hear that :grinning_face_with_smiling_eyes: