CMS Development

MOutinen
Member

Form input field sizing

SOLVE

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):

MOutinen_0-1709211738544.png

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

MOutinen_1-1709211806470.png

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. 

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Form input field sizing

SOLVE

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

Anton Bujanowski Signature

View solution in original post

0 Upvotes
1 Reply 1
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Form input field sizing

SOLVE

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

Anton Bujanowski Signature
0 Upvotes