CMS Development

shanakos
Membro

Building a non stacked form in Hubspot

I need to create a form that is horizontal for our website. I've read these two articles (https://knowledge.hubspot.com/forms/how-do-I-style-my-embedded-form?KBOpenTab andhttps://developers.hubspot.com/docs/methods/forms/advanced_form_options?_ga=2.97622171.523942341.159...) and I seem to be missing something...

 

I created the raw form. Put it in the website. I tryed editing the class in the css connected to our website. Should I be doing that in the css of Hubspot? Or is it possible my css code is wrong to actually get it unstacked? Any help would be great! Thanks!

5 Respostas 5
Anton
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Building a non stacked form in Hubspot

Hi @shanakos & @nlafakis,

if you want to disable the automaticly styled form on an (external) page modify your form embed code as following:

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "XXXXXXX",
	formId: "XXX",
        css:""
});
</script>

 

so just add

 

css:""

 

after the form-id (and don't forget the comma after the id). 

 

This will embed the form without any HubSpot styles and if your page you're embedding it has regular form styles - they most likely will match to a good amout. You'll most likely will need to apply some custom stylings or the HubSpot classes to your existing CSS file.

 

 

best, 

Anton

Anton Bujanowski Signature
nlafakis
Top colaborador(a) | Parceiro Elite
Top colaborador(a) | Parceiro Elite

Building a non stacked form in Hubspot

@Anton 
This worked perfectly thanks! I'm now able to edit the CSS of the form via the panel within unBounce, however, the problem I face now is that using the custom CSS breaks the reCaptcha. Is there a way around this?

0 Avaliação positiva
nlafakis
Top colaborador(a) | Parceiro Elite
Top colaborador(a) | Parceiro Elite

Building a non stacked form in Hubspot

Really wish there was an answer to this problem. I have the exact same issue and I'm wondering where/if/how a digital designer would be able to edit the look/feel of the form through CSS or Inline-HTML styling. I don't see anything anywhere in the form edit options to do this. Do I have to make a new form in order to custom style it? 

0 Avaliação positiva
Kevin-C
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

Building a non stacked form in Hubspot

Hey @shanakos 

 

Have you got a live link we can look at?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
shanakos
Membro

Building a non stacked form in Hubspot

I don't. I'm not sure how to do that. 😞

0 Avaliação positiva