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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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. 

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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
  • 1 year later...
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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.