topic Lead Form Defaults to Left Align in Lead Capture Tools

Lead Form Defaults to Left Align

KMcKeever — Wed, 26 Apr 2023 14:20:56 GMT

I embedded a lead form onto a Shopify website and the form defaults to a left alignment, I would like it to be centered. I had developers look into this and they said HubSpot would need to fix this since the embedded code HubSpot provides is a shortened version.

This is the code provided by HubSpot:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8726632",
formId: "8decf7de-5001-4d11-af43-102d8a8f301d"
});
</script>

Re: Lead Form Defaults to Left Align

LizaMischel — Thu, 28 Apr 2022 20:50:27 GMT

If you just want the form to be aligned center to the page, ask your developers to add this to the CSS:

div#hbspt-form-1651178357416-6542616659 { display: flex; justify-content: center; }

If you want to center it on the page and center the text:

div#hbspt-form-1651178357416-6542616659 { display: flex; justify-content: center; text-align: center; }

Then you need to center the button too:

.actions { display: flex; justify-content: center; }

Re: Lead Form Defaults to Left Align

Ben_M — Thu, 28 Apr 2022 23:02:17 GMT

A few things here. First, you are using Hubspot to style your form. If you click on Style & Preview in your form setup, you will have the option to Set as Raw HTML. If you do that, Hubspot will remove all styling and you can use your CSS on page for styling. This could allow your developers to do what they want with the form.

With regards to "centering" your form is centered with left aligned text. If you want to override the text labels and typing within the form fields you can do this within CSS, but depending on what you want to do it may be easier to use the Raw HTML option as opposed to trying to override the styles of Hubspot. Also note that your form has a max width of 590 pixels set to it (see image below). If you override that in your CSS to be 100% it will expand to the full width of 750px that you have set for your container.

Re: Lead Form Defaults to Left Align

KMcKeever — Thu, 12 May 2022 12:55:24 GMT

Where should that be added in the raw HTML?

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8726632",
formId: "4595dbc5-bede-4beb-9d38-a0a05b87eeb4"
});
</script>

Re: Lead Form Defaults to Left Align

KMcKeever — Thu, 12 May 2022 12:58:53 GMT

The raw html option is also left aligning. This is the raw code from hubspot. Is there a way to update this code below?

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8726632",
formId: "4595dbc5-bede-4beb-9d38-a0a05b87eeb4"
});
</script>