Limit character count on an embedded form

[tommifin]

Hi,

I'm trying to set a character count limit on a text field on an embedded HubSpot form. I found a jQuery example which I've added to my code but it doesn't seem to work. Any ideas what's wrong?

The form loads and submits just as it should. The character limit just doesn't work. There are no console errors on form submission either. 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "XXXXXX",
	formId: "ZZZZZZZZZZZZ",
        css: "",
        submitButtonClass: "my-submit",
        target: ".hubspot-form",
        onFormReady: function($form) {
$('input[name="short_description_for_integration_listing"]').attr('maxlength','300').change();
}
});
</script>

<div class="hubspot-form"></div>

[WTariq]

Hi All, 

I figured this out this way:

hbspt.forms.create({
        portalId: "123456",
        formId: "abcd-efg-hijk=lmno",
        onFormReady: function($form) {
          $form.find('textarea[name="what_are_you_planning"]').attr('maxlength','150');
        },
  });

[IsaacTakushi · Accepted solution]

Hi, @tommifin.

Properties with the Multi-line text field type render as <textarea> objects instead of <input> objects. Try this selector:

$('textarea[name="short_description_for_integration_listing"]').attr('maxlength','300').change();

[tommifin]

Hi Isaac,

Thanks for your response. I should've noticed that the field is different!

I corrected the code but for some reason, the maxlength attribute is not added to the HTML tag when I check it on browser developer tools (Firefox). Is it possible that some of the new form styling options on HubSpot are affecting this?

Rendered textarea HTML:

<textarea id="short_description_for_integration_listing-a81fabe5-ff11-42d0-91e7-1dce25f6cd47" class="hs-input" name="short_description_for_integration_listing" required="" placeholder="" data-reactid=".hbspt-forms-0.1:$5.1:$short_description_for_integration_listing.$short_description_for_integration_listing.0"></textarea>

[IsaacTakushi]

Hi, @tommifin.

It's possible. Could you DM me a link to your form and/or landing page so I can take a closer look?

P.S I will be out of office from April 30 - May 8, so if you need an answer more quickly, please feel free to create another post citing this one or contact HubSpot support.

[bilob]

Hey Isaac, 

I'm having a similar issue, I tried adjusting the code to match a textarea field, would you mind if I message you too please? 

I'm using:

hbspt.forms.create({
target: ".Belch",
portalId: "XXXXX",
formId: "XXXXXXXXXXX",
css: "",
onFormReady: function($form) {
$('textarea[name="message"]').attr('maxlength', '255').change();
},
});

Thank you!

[EPIWeb]

Hi bilob,

Have you had any success with character limit on your text field? I am having the same issue. 

[bilob]

No luck on my end, hoping @IsaacTakushi might be able to help us @EPIWeb !

[IsaacTakushi]

Hi, @bilob and @EPIWeb.

Apologies for the delayed response; I have been out of the office.

That snippet is still working for me. Have you set your forms to use raw HTML?

If the forms render in an iframe, as they do with the built-in themes, you won't be able to modify them with jQuery.

[mansi_govani]

Hello @IsaacTakushi,

I am not embeding the form. Is it possible to do the same with regular forms? 

Thank you in advance for your help!
Mansi

[IsaacTakushi]

Hi, @mansi_govani.

Sincere apologies for the delayed response. Since leaving Developer Support, I check the Community less frequently.

While it is not possible to impose a character limit on multi-line text fields in HubSpot's forms editor, as long as the form element is not rendered in an iframe (as with Free or Starter subscriptions), you can modify the form using HubSpot's global form events and the JavaScript discussed above.

Said differently, you do not have to modify the form's embed code to use the onFormReady global event to trigger custom JavaScript validation.