Customising an embedded form in HubSpot

dan_thomas — Thu, 23 Aug 2018 15:55:32 GMT

Hi,

I am trying to customise the CSS in an embedded HubSpot form, however i am not having much luck!

As you can see from the screenshot below, the is automatically set to max-width: 500px;. This means the form only covers half the container, i am trying to extend the width so that it fills 100% of the width of the container.

I have read through the developer documentation listed below;

https://developers.hubspot.com/docs/methods/forms/advanced_form_options
https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms
I have tried removing the default styling by adding css: "" to the

None of these have worked for me. I know it compiles on load, however it just isn't picking up any CSS classes i am trying to reference - I'm not even able to over-ride the existing classes by using !important.

I am not a javascript expert - so may be getting this completely wrong - any help would be greatly appreciated.

Thanks
Dan

Re: Customising an embedded form in HubSpot

dan_thomas — Thu, 23 Aug 2018 15:59:18 GMT

Sorry - some of my text has gone missing in my post.

After the links, it originally read...

I have tried removing the default styling by adding css: "" to the script, then referencing the class in my stylesheet.
I have tried referencing a CSS class in my stylesheet by using cssClass:"".
I have now tried entering the CSS into the script, as shown below...

	hbspt.forms.create({
		portalId: "XXXXXX",
		formId: "XXXXXX",
		css: ".hs-form fieldset.form-columns-2 { max-width: 2000px !important; }"
	});

Thanks
Dan

Re: Customising an embedded form in HubSpot

Tim_Joyce_Belch — Fri, 24 Aug 2018 11:53:30 GMT

Hi @dan.thomas - Have you tried the Belch Form Designer for embed codes to style your form? Also, if you are a HubSpot free user, you won't be able to change the form CSS without using Belch and making sure you connect your HubSpot portal to pull in the forms

Re: Customising an embedded form in HubSpot

dan_thomas — Fri, 24 Aug 2018 12:40:31 GMT

Hi Tim,

I had never heard of it - thanks for contributing. I have had a go, and it has certainly improved my current form!

I'm not sure it gives me the full functionality i need. I have had a look at editing the Beltch form CSS - if you edit it, it returns to the default HubSpot style.

I am using the Marketing Hub Starter - will this allow me to edit the CSS?

Thanks
Dan

Re: Customising an embedded form in HubSpot

Tim_Joyce_Belch — Fri, 24 Aug 2018 12:45:37 GMT

Hey @dan.thomas, can you jump intoour slack channel and I can walk you through it?

Re: Customising an embedded form in HubSpot

Derek_Gervais — Tue, 28 Aug 2018 20:48:38 GMT

Hi @dan.thomas,

Don't have much more to add here other than to confirm what Tim said; HubSpot Marketing/CRM Free portals are not able to customize their form styling by default.

Re: Customising an embedded form in HubSpot

gruya — Wed, 11 Mar 2020 18:51:45 GMT

Hi Tim,
I tried following everything in BELCH.io under (experiments.forms.belch.io) to get my form up and running but once I created the form and copied the code and pasted it in my site, nothing happened. It was blank.
.....
This is the code
.....
<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");.embed-form-super-wrapper .hs-form {max-width:100%;margin: auto;}.embed-form-super-wrapper .hs-form input[type=date],.embed-form-super-wrapper .hs-form input[type=datetime], .embed-form-super-wrapper .hs-form input[type=datetime-local], .embed-form-super-wrapper .hs-form input[type=email], .embed-form-super-wrapper .hs-form input[type=month], .embed-form-super-wrapper .hs-form input[type=number], .embed-form-super-wrapper .hs-form input[type=password], .embed-form-super-wrapper .hs-form input[type=range], .embed-form-super-wrapper .hs-form input[type=search], .embed-form-super-wrapper .hs-form input[type=tel], .embed-form-super-wrapper .hs-form input[type=text], .embed-form-super-wrapper .hs-form input[type=time], .embed-form-super-wrapper .hs-form input[type=url], .embed-form-super-wrapper .hs-form input[type=week], .embed-form-super-wrapper .hs-form fieldset.form-columns-1 textarea.hs-input, .embed-form-super-wrapper .hs-form fieldset.form-columns-1 .input select, .embed-form-super-wrapper .hs-form .input textarea, .embed-form-super-wrapper .hs-form .hs-input textarea, .embed-form-super-wrapper .hs-form textarea, .embed-form-super-wrapper .hs-form .input select, .embed-form-super-wrapper .hs-form .hs-input select, .embed-form-super-wrapper .hs-form select {border: 1px solid #d6d6d6;width: 100%;padding: 9px 14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.embed-form-super-wrapper .hs-form ul {list-style-type: none;margin-left: 0; padding-left: 0;}.embed-form-super-wrapper .hs-form fieldset.form-columns-1 .hs-input{width: 100% !important;}.embed-form-super-wrapper .hs-form fieldset.form-columns-1 input[type="checkbox"], .embed-form-super-wrapper .hs-form fieldset.form-columns-1 input[type="radio"] {width: auto !important;margin-right: 15px !important;margin-top: -2px;}.embed-form-super-wrapper .hs-form label {color: #606060;}.embed-form-super-wrapper .hs-form fieldset {max-width: 100% !important;}.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {width: 33.333% !important;}.embed-form-super-wrapper .hs-form fieldset {margin-bottom: 0 !important;}.embed-form-super-wrapper .hs-form .hs-form-field {margin-bottom: 15px;}.embed-form-super-wrapper .hs-form label {font-weight: normal;letter-spacing: 1px;}.embed-form-super-wrapper .hs-form ul li {margin-top: 4px;margin-bottom: 4px !important;float: left;width: 100%;}.embed-form-super-wrapper .hs-form fieldset textarea.hs-input {min-height: 200px;}.embed-form-super-wrapper .hs-form select{-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 5px;border-radius: 0;} .embed-form-super-wrapper .hs-form button, .embed-form-super-wrapper .hs-form input[type=button], .embed-form-super-wrapper .hs-form input[type=reset], .embed-form-super-wrapper .hs-form input[type=submit] {background:#606060;color: white;padding: 7px 45px;font-weight: bold;font-size: 20px;text-transform: uppercase;letter-spacing: 2px;margin-top: 15px;}.embed-form-super-wrapper .hs-form fieldset.form-columns-2 .hs-form-field { width: 50%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field, .embed-form-super-wrapper .hs-form fieldset.form-columns-2 .hs-form-field {float: left;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.embed-form-super-wrapper .hs-form fieldset .hs-form-field {padding: 0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;}.hs_cos_wrapper.form-title {display: none;}@media screen and (max-width:400px) {.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {width: 100% !important;}}.embed-form-super-wrapper { -moz-box-sizing:border-box;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;background: #ffffff;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;border-radius: 16px !important;-moz-border-radius: 16px !important;-webkit-border-radius: 16px !important;border-color: #fff !important;border-style: dashed !important;padding-top: 0px !important;padding-bottom: 0px !important;padding-left: 14px !important;padding-right: 14px !important;margin: 0 auto;}.embed-form-super-wrapper .hs-form label, .embed-form-super-wrapper .hs-form label span {font-family: 'Montserrat', Arial !important;color: #636363 !important;font-size: 14px !important;letter-spacing: 0px !important;font-weight: 500 !important;margin-bottom: 6px;}.embed-form-super-wrapper .hs-form label {width: 100% !important;float:left !important;text-align: left !important;padding-left: 0px !important;padding-right: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}.embed-form-super-wrapper .hs-form input[type=date], .embed-form-super-wrapper .hs-form input[type=datetime], .embed-form-super-wrapper .hs-form input[type=datetime-local], .embed-form-super-wrapper .hs-form input[type=email], .embed-form-super-wrapper .hs-form input[type=month], input[type=number], .embed-form-super-wrapper .hs-form input[type=password], .embed-form-super-wrapper .hs-form input[type=range], .embed-form-super-wrapper .hs-form input[type=search], .embed-form-super-wrapper .hs-form input[type=tel], .embed-form-super-wrapper .hs-form input[type=text], .embed-form-super-wrapper .hs-form input[type=time], .embed-form-super-wrapper .hs-form input[type=url], .embed-form-super-wrapper .hs-form input[type=week], .embed-form-super-wrapper .hs-form .input textarea, .embed-form-super-wrapper .hs-form .hs-input textarea,.embed-form-super-wrapper .hs-form textarea, .embed-form-super-wrapper .hs-form .input select, .embed-form-super-wrapper .hs-form .hs-input select, .embed-form-super-wrapper .hs-form select {text-align: left !important;font-family: 'Lato', Arial !important;letter-spacing: 0px !important;font-weight: 300 !important;font-size: 20px !important;border-color: #e2e2e2 !important;color: #000000 !important;background-color: #f8f8f8 !important;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;border-style: solid !important;border-radius: 4px !important;-moz-border-radius: 4px !important;-webkit-border-radius: 4px !important;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-top-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;border-right-width: 1px !important;height:auto !important;}.embed-form-super-wrapper .hs-form input::-webkit-input-placeholder, .embed-form-super-wrapper .hs-form select::-webkit-input-placeholder{color:#a1a1a1 !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input::-moz-placeholder, .embed-form-super-wrapper .hs-form select::-moz-placeholder{color:#a1a1a1 !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input:-ms-input-placeholder, .embed-form-super-wrapper .hs-form select:-ms-input-placeholder{color:#a1a1a1 !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input:-moz-placeholder, .embed-form-super-wrapper .hs-form select:-moz-placeholder{color:#a1a1a1 !important;text-align: left !important;}.embed-form-super-wrapper .hs-form button, .embed-form-super-wrapper .hs-form input[type=button], .embed-form-super-wrapper .hs-form input[type=reset], .embed-form-super-wrapper .hs-form input[type=submit] {font-family: 'Lato', Arial !important;letter-spacing: 2px !important;font-weight: 800 !important;font-size: 16px !important;color: #ff6741 !important;background: #ffffff !important;border-top-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-right-width: 2px !important;border-radius: 75px !important;border-style: solid !important; border-color: #ff7a59 !important;border-radius: 75px !important;-moz-border-radius: 75px !important;-webkit-border-radius: 75px !important;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding-top: 20px;padding-bottom: 20px;padding-left: 40px;padding-right: 40px;-webkit-transition: all .2s linear;-o-transition: all .2s linear;-moz-transition: all .2s linear;-ms-transition: all .2s linear;transition: all .2s linear;-khtml-transition: all .2s linear;}.embed-form-super-wrapper .hs-form .hs-submit {display: inline-block;width: 100%;}.embed-form-super-wrapper .hs-form .hs-submit .actions {width: 100% !important;float: left !important;clear: both !important;text-align: left !important;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding-left: 11px !important;padding-right: 17px !important;}@media screen and (max-width:767px){.embed-form-super-wrapper .hs-form .form-columns-2>div.hs-form-field,.embed-form-super-wrapper .hs-form .form-columns-3>div.hs-form-field,.embed-form-super-wrapper .hs-form .form-columns-4>div.hs-form-field{width: 100% !important;}}.embed-form-super-wrapper .hs-richtext{float: left !important;width: 100% !important;padding-top: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;padding-right: 20px !important;color: #666666 !important;font-weight: 600 !important;letter-spacing: 1px !important;font-size: 12px !important;font-family: 'Lato' !important;}.embed-form-super-wrapper .hs-form .hs-submit .actions {text-align: center !important;}.embed-form-super-wrapper .hs-form .hs-error-msgs label, .embed-form-super-wrapper .hs-form .hs-error-msgs label span {font-family: 'Lato', Arial !important;letter-spacing: 1px !important;font-weight: 300 !important;font-size: 12px !important;color: #ff7373 !important;}.embed-form-super-wrapper .hs-form button:hover, .embed-form-super-wrapper .hs-form input[type=button]:hover, .embed-form-super-wrapper .hs-form input[type=reset]:hover, .embed-form-super-wrapper .hs-form input[type=submit]:hover {background: #ff7a59 !important;color: #ffffff !important; border-color: #ff6640 !important;}.grecaptcha-badge {width: auto !important;height: auto !important;box-shadow: none !important;}.embed-form-super-wrapper .hs-form input[type="checkbox"]{margin-right: 10px;margin-top: -2px;}.center-the-form form, .center-the-form form input {text-align: center;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/reqwest/2.0.5/reqwest.min.js"></script><script>reqwest({url: "//js.hsforms.net/forms/v2.js",method:"get",dataType:"script",type:"script",success:function(resp){var ns = resp.response;var nsn=ns.replace("(null!=r&&null!=(p=r.scopes)?!p.renderShell:!0)||e.shell||e.noShell||l.isCos(e)", "1==1");window.eval(nsn);hbspt.forms.create({target:".Belch-X9GXF6AHJlcWF4bMMUE9", portalId: "6037213",formId: "d8dc9511-a1ca-4a1f-9996-5ad03ce7ac56",css: ""});}});</script><div class="embed-form-super-wrapper Belch-X9GXF6AHJlcWF4bMMUE9"></div>

topic Re: Customising an embedded form in HubSpot in APIs & Integrations

Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot

Re: Customising an embedded form in HubSpot