CMS Development

MOutinen
メンバー

Form input field sizing

解決

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 いいね!
1件の承認済みベストアンサー
Anton
解決策
ソートリーダー | Solutions Partner
ソートリーダー | Solutions Partner

Form input field sizing

解決

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 いいね!
1件の返信
Anton
解決策
ソートリーダー | Solutions Partner
ソートリーダー | Solutions Partner

Form input field sizing

解決

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 いいね!