Form input field sizing

[MOutinen]

Is it possible to shorten the width of form input fields? We have a site that uses Gravity Forms and HS but are switching them to be strictly HS forms. The current form has the first name/last name fields as smaller width input fields and we would like to keep it that way(view image):

But it seems that without Gravity Forms integrated we can not do that? 

We already have to add more fields because there are limits to HS conditional logic so would be great if we don't have to bring another restriction of using HS to our client. 

[Anton · Accepted solution]

Hi @MOutinen,

changing the width of the inputs is definetely possible. 

Am I assuming right that you're embeding HS forms in a WordPress?

If so there are a few things to keep in mind:

• disabling the default CSS of the form might be helpful. This feature is only available in Pro and Enterprise. I'm putting a few more helpful embed code modifactions below
• Your WP theme is responsible for the form styling. So you'll need to apply changes in the WP Theme, not HubSpot
• Conditional logic fields are always full-width by default (CSS flex styling can be applied) in HS

Default form embed code:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "XXXXXXXX-XXXXXXXXX-XXXXXXX"
  });
</script>

exclud default CSS via modification:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "XXXXXXXX-XXXXXXXXX-XXXXXXX",
    css: ""
  });
</script>

you can add a custom class as well

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "XXXXXXXX-XXXXXXXXX-XXXXXXX",
    css: "",
    cssClass: "MY-CUSTOM-CLASS"
  });
</script>

Here's a doc about all embed-code modification options

best, 

Anton