Form Field Character Limit

Okay, After so many years of people asking, and all the answers being scrubbed from the internet clean, how do you do it? All I want is a 300 character limit for a form on a page. Other than one person copying and pasting the answer to it on a post that has been deleted, not one person has been able to answer this questions Here is my Form:https://www.apcf.org/volunteer

I just want the character limit in the text area boxes

If anyone can genuinely help, please do.

I'm looking to do this as well. This is an important feature. I was able to input a very long text into a form free text input box and I can see this potentially being maliciously exploited.

I have the same issue. If you could edit the html it would actually be as simple as setting the maxlength parameter of the textarea. Instead I think it may be possible to do it in a roundabout way using javascript in a code injection to run a custom validation on the length that was entered. Link below where this is discussed for some different use cases. I can sort of hack may way through issues like this sometimes so will update if I get to a working solution...

On 9/19/2019 at 7:24 AM, AceTimberwolf said:

All I want is a 300 character limit for a form on a page

All you need is a line of JavaScript that identifies the form field that you want to affect, and then adds the following HTML to the input control: maxlength="300".

If someone posts a link to their form and specifies the form field that they want to restrict, one of us can post some code 🙂

 If this helps you, please click "Like" below  ⬇️

On 8/29/2020 at 12:54 PM, paul2009 said:

All you need is a line of JavaScript that identifies the form field that you want to affect, and then adds the following HTML to the input control: maxlength="300".

If someone posts a link to their form and specifies the form field that they want to restrict, one of us can post some code 🙂

 If this helps you, please click "Like" below  ⬇️

Hi Paul,

Thanks so much for the offer to help. My site isn't public yet so I can't post the link unfortunately. After reading your post I found the textarea id by inspecting element on the form (a product pop up form). I then pasted the below code into the header and footer sections within "code injection" but it hasn't worked:

<script>
  document.getElementById("textarea-yui_3_17_2_1_1594284193900_17624-field").setAttribute("maxlength",5) 
</script>

Are you able to help?

If your site isn't live yet, you can set a site password and then post a link and the password.

The JS will need a function that checks whether the page has fully loaded, otherwise it may attempt to set the attribute before the control is available. 

So I got this working by adding a code block on the page where the pop up form appears (thanks Paul2009 but wasn't comfortable sharing my website password yet). Use inspect element in google chrome to get the textarea id.

Inside the code block:

<script>
  
function limitTextArea(targetText) {
  targetText.setAttribute("maxlength",300) 
}
  
// set up the mutation observer
  var observer = new MutationObserver(function (mutations, me) {
// `mutations` is an array of mutations that occurred
// `me` is the MutationObserver instance
  var targetText = document.getElementById('textarea-yui_3_17_2_1_1594284193900_17624-field');
  if (targetText) {
    limitTextArea(targetText);
    me.disconnect(); // stop observing
    return;
  }
});

// start observing
observer.observe(document, {
  childList: true,
  subtree: true
});
  
</script>

Hi Paul,

Are you able to help me limit the number of characters on a custom checkout form?

https://onelifeonetree.com/checkout?cartToken=LAq7waQuHt4fTjI5WlyB8OEmAm0MsuITvno0dcma

The Field Title is "Please enter the name to be printed on the Sequoia Certificate (25 character limit)

On 5/10/2021 at 2:39 PM, joeonelifeonetree said:

Are you able to help me limit the number of characters on a custom checkout form?

It isn't possible to do this on a Custom Checkout Form. The checkout page - including forms - is locked down and cannot be customised with any code.

I am frequently asked about editing the checkout so here's my more detailed answer.

2 hours ago, paul2009 said:

It isn't possible to do this on a Custom Checkout Form. The checkout page - including forms - is locked down and cannot be customised with any code.

Hi @paul2009,

I've now created a form for this product as a test and means to implementing the character count.

Are you able to help with code for this particular form?

https://onelifeonetree.com/plant-sequoia/giant-sequoia-onepayment

Thanks,

Joseph

@paul2009 Can you set a character limit on a form text block on the checkout?

1 hour ago, Ian_H said:

Can you set a character limit on a form text block on the checkout?

No. Code would be required to do this but all types of code (HTML, JavaScript, CSS) are blocked on the checkout page.

Did this help? Please give feedback by clicking an icon below  ⬇️