Jump to content

Form Field Character Limit

Recommended Posts

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.

Edited by AceTimberwolf
Initial Revision
Link to comment
  • 5 months later...
  • 5 months later...

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...

 

Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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?

Link to comment

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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

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>

Edited by Pigeon888
Link to comment
  • 7 months later...

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)

*"
 
Any help would be hugely appreciated.
 
Thanks,
 
Joseph

Screenshot 2021-05-10 at 14.38.26.png

Link to comment
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.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.