Hi,
I have a form in footer styled with hubspot and displayed on site via iframe.
How do I best style button… everything else is great…
When I used raw html I lost all styling…
I need to style button only
hs-button.large.primary {
background-color: #142263!important;
border-width: 6px!important;
border-color: #142263!important;
border-radius: 30px!important;
font-weight: bold!important;
font-style: normal!important;
text-transform: none!important;
text-decoration: none!important;
letter-spacing: 1px!important;
}
I have this code so far…
Any ideas?
@pablogt , any change you could show us a page with this form on it?
@albertsg might be able to help with that additional information
system
June 21, 2021, 9:49am
3
Hi @pablogt ,
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Hi all…
Please see page here: https://open2communications.com/contact/
I have 3 buttons… too many I think but all are different… I need to change the two hubspot buttons.
@webdew I did not understand the solution… but I will look into it to analyse it in depth…
thanks
Pablo
@webdew I tried this with no luck… in fact not sure which is the parent…
I find myself with smae problem with input text color … I have the right code but does nothing…
Not sure what to do…
Please help
input .hs-input {
color: #FFFFFF!important;
color: -internal-light-dark(black, white);
}
…
Hi all,
I used parent class with no change:
hbspt-form hs_submit hs-submit hs-button {
background-color: #142263!important;
border-width: 6px!important;
border-color: #142263!important;
border-radius: 30px!important;
font-weight: bold!important;
font-style: normal!important;
text-transform: none!important;
text-decoration: none!important;
letter-spacing: 1px!important;
}
hbspt-form input .hs-input {
color: #FFFFFF!important;
color: -internal-light-dark(black, white);
}
This did not work…
What is the best way to style a form from hubspot?
@pablogt , the link to your example page doesn’t work for me
Sure…
My footer had a blue background and we could not see the input text…
and finally I changed the button color with hubspot…
and since I had to go live with this version which I hope is temporary…
New url is Contactez-nous | Agence Relation Presse Paris | Open2Europe
I need to change the radius of the button and the input color to go back to dark blue footer…
thank you for taking the time…
Pablo
@pablogt
Ok. Looks like you are using the embed as an iframe option. If you want full control over the styling, you will need to set the form to us raw html. Then you will have complete control over the style.
Seeming this is live, I would clone it and add the clone to a test page and mess around. You probably knew that already
On this page is a reference to the raw html option (it is far down on the page)
Ok, thank you… I will try that…
and for the parents do I use this CSS?
hbspt-form hs_submit hs-submit hs-button {
background-color: #142263!important;
border-width: 6px!important;
border-color: #142263!important;
border-radius: 30px!important;
font-weight: bold!important;
font-style: normal!important;
text-transform: none!important;
text-decoration: none!important;
letter-spacing: 1px!important;
}
hbspt-form input .hs-input {
color: #FFFFFF!important;
color: -internal-light-dark(black, white);
}
@pablogt , make sure you add a . before your class names. eg .hbspt-form
. Could you post a new link?