Custom CSS for Stacked Form

Highlighted
Nouveau contributeur

Admittedly - I am more of a coding hack who knows enough about CSS to usually find what I am looking for online and make it work for me with simple edits.

 

I need to add a subscribe for a 1/3 column on my website.  Just using the new form styling works - but I would like more control over the spacing and button size so need to add custom CSS. 

Has anyone figured out how to make a stacking form when the form is set to 'Set as Raw HTML Form'? I have even tried copying the default CSS from the Hubspot tutorial and it still ends up side by side:

https://designers.hubspot.com/docs/cms/hubspot-form-markup#styling-forms

CSS
Répondre
0 Vote / Votes
3 Réponses
Highlighted
Gestionnaire de communauté

Hi @ericahelmer,

 

Thank you for reaching out to Community!

 

I myself don’t have experience with Stacked Form but I will ping @tjoyce and @Jsum to see if they have any advice for you. I’ve seen they have shared some great knowledge on forms and CSS so they might be able to share how they achieve this goal.

 

Natsumi

Highlighted
Esteemed Advisor | Partner

Hi @ericahelmer ,

 

Form structure is controlled using the drag and drop form editor interface. You can choose how many fields you want to display per row there, an reorganize existing fields also.

 

There are some things that you have to use custom css to accomplish. Chances are, you will find a css file attached to your page that contains form styles specific to your theme. You can also create a new stylesheet to attach to the template.

 

You can use your browsers inspector tool to look at the form markup and find classes to reference on th form elements. something like:

form.hs-form .input input[type="text"],
form.hs-form .input input[type="email"],
form.hs-form .input input[type="tel"],
form.hs-form .input input[type="num"]

form.hs-form .action input[type="submit"]

You want to be pretty specific with your targeting, so:

form.hs-form .input input[type="text"]

is better than:

input[type="text"]
- Jonathan Sumner
Highlighted
Top Advisor | Platinum Partner

@ericahelmer - can you provide us with a link and we can help you style your form.

Alternatively, you can try https://forms.belch.io/ to see if it can do what you are looking for.