APIs & Integrations

TaylorGrace
Member

Limit character count on an embedded form

Hi all

Trying to limit the character count on 3 specific text-fields, however whenever I add in the character limits the form dissapears on it's embedded page, can anyone see any errors?

 

 

<!-- [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({
portalId: "XXX",
formId: "XXXXXX”,
css: "",
onFormReady: function($form) {
$('textarea[name="what_value_does_your_brand_bring_to_the_world_"]').attr('maxlength','300').change();
$('textarea[name="why_is_it_important_for_you_to_revamp_your_brand_now_"]').attr('maxlength','300').change();
$('textarea[name="what_does_your_organisation_do_"]').attr('maxlength','300').change();
}
});
</script>

 

 

1 Reply 1
Willson
HubSpot Employee
HubSpot Employee

Limit character count on an embedded form

Hey @TaylorGrace,

 

Taking a look at the form here, it appears as though the inclusion of the CSS class attribute threw this off - you only included CSS instead of:

cssClass: ''

I went ahead and exported the form embed code and re-inserted the onSubmit() function for you. When testing via Codepen.io, this now correctly renders for me:

<!--[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({
    portalId: "xxxx",
    formId: "xxxx",
    onFormSubmit: function($form) {
      $('textarea[name="what_value_does_your_brand_bring_to_the_world_"]').attr('maxlength', '300').change();
      $('textarea[name="why_is_it_important_for_you_to_revamp_your_brand_now_"]').attr('maxlength', '300').change();
      $('textarea[name="what_does_your_organisation_do_"]').attr('maxlength', '300').change();
    }
  });
</script>

Here's the working version with the cssClass attribute included:

<!--[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({
    portalId: "4410588",
    formId: "fe761778-8f57-4cc0-ae2b-00a5eb34b604",
    cssClass: '',
    onFormSubmit: function($form) {
      $('textarea[name="what_value_does_your_brand_bring_to_the_world_"]').attr('maxlength', '300').change();
      $('textarea[name="why_is_it_important_for_you_to_revamp_your_brand_now_"]').attr('maxlength', '300').change();
      $('textarea[name="what_does_your_organisation_do_"]').attr('maxlength', '300').change();
    }
  });
</script>

I hope this helps!

Product Manager @ HubSpot
0 Upvotes