Lead Form Defaults to Left Align

[KMcKeever]

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: 

<!--[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: "8726632",
formId: "8decf7de-5001-4d11-af43-102d8a8f301d"
});
</script>

[LizaMischel · Accepted solution]

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;
}

[Ben_M · Accepted solution]

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.

  

[KMcKeever]

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

<!--[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: "8726632",
formId: "4595dbc5-bede-4beb-9d38-a0a05b87eeb4"
});
</script>

[LizaMischel · Accepted solution]

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;
}

[KMcKeever]

Where should that be added in the raw HTML?

<!--[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: "8726632",
formId: "4595dbc5-bede-4beb-9d38-a0a05b87eeb4"
});
</script>