Limit Character Count on Forms

Please see Form Text Field Max Length.

The dialog you show in your post is not available for easy modification (it's not on the DOM initially) so we have to use a MutationObserver to watch for the dialog to become available. Once it is available we can add the maxlength attribute to the text field to limit the number of characters to 250.

Let us know how it goes.

@creedon Hi there, thanks for trying this with me. I entered this code into Page Header Code for the Card Page and it didn't limit the character count 😕

I've since deleted the code from the header.

If this is not possible, is it possible to add a character count limitation on the checkout page? (I added a custom form to that page)

7 minutes ago, kindandbrave said:

is it possible to add a character count limitation on the checkout page?

No, this is not possible. 

Please give it a go again. I fixed a syntax error in the code. I've run the code locally several times now and it can work! 🙂

Creedon I had a similar issue and your code worked perfectly!  Thanks!

@creedon YES! Just tried it again and it is working perfectly as far as I can tell. Thank you sooo much!

@kindandbrave

Glad its working.

I made some minor changes to the script. Made it a little more user configurable friendly and I replaced the forEach with $.each.

No real change to it's function though.

Hi Creedon, would you be able to help me limit the number in a form field? - ie rather than a character account, the entry I'd like to limit is a number value - ideally 250 being the maximum number. Here's my site and the page that I'd like the code to apply to:

adventureoban.org/one-million-miles-demodemo

The field entry in question asks 'How many miles did you clock up in today's session?'

Many thanks,

Ben.

On 3/4/2021 at 1:46 AM, bunj said:

adventureoban.org/one-million-miles-demodemo

I'm happy to try and help but the URL doesn't exist.

Hi @creedon!

Where/how could a 250 character limit be applied to the "Message" field on this form: https://kellyedwards.co/contact?

TIA!

On 11/21/2020 at 7:53 PM, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    // set lightbox dialog first text field max characters
    
    const formTitle = 'Card Personalization';
    
    const maxLength = 250;
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    if ( ! 'MutationObserver' in window ) return;
    
    const observer = new MutationObserver ( function ( mutations ) {
    
      $.each ( mutations, function ( ) {
      
        if ( ! this.addedNodes.length ) return;
        
        let $e = $( this.addedNodes [ 0 ] );
        
        if ( ! $e.hasClass ( 'sqs-modal-lightbox' ) ) return;
        
        if ( $( '.form-title', $e ).text ( ) != formTitle ) return;
        
        $( 'textarea:first', $e )
        
          .attr ( 'maxlength', maxLength );
          
        } );
        
      } );
      
    // starts listening for changes in body
    
    observer.observe ( document.body, {
    
      childList: true
      
      } );
      
    } );
    
  </script>

This is for a v7.1 site.

The dialog you show in your post is not available for easy modification (it's not on the DOM initially) so we have to use a MutationObserver to watch for the dialog to become available. Once it is available we can add the maxlength attribute to the text field to limit the number of characters to 250. I've made some assumptions with the code. I check that the dialog contains "Card Personalization" and that the first text field is the one that you want to limit to 250 characters.

Let us know how it goes.

Hello Creedon, just wondering if anything needs to be adjusted in order for this to possibly work on our website which is version  7.0– Brine family (Marta template). 

@WillowCo

I think it could be adapted to v7.0 using the Brine template family.

Please post the URL for the page on your site where the form is located.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

I can then take a look at your issue.

1 hour ago, creedon said:

@WillowCo

I think it could be adapted to v7.0 using the Brine template family.

Please post the URL for the page on your site where the form is located.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

I can then take a look at your issue.

https://www.willowflowercompany.ca/flowers/seasonal-hand-tie-bouquet 

sorry we are not super familiar working with codes and such.. hopefully this is helpful, please let us know if you require additional information! thank you thank you!!

@WillowCo

I have updated my code post.

Let us know how it goes.

4 hours ago, creedon said:

@WillowCo

I have updated my code post.

Let us know how it goes.

Hello Creedon, I cannot seem to get the code to work for our "card message"  text space

@WillowCo

You need to fill in the values for formName, maxLength, and textAreaLabel in the code.

A note on the max length. It is character based not word based.

Hello Creedon, 

Thank you so much for your help and patience, It's not quite working, but I think we are so close, I have entered the relevant information should it read as such?:  

const formName = 'details';
    
const maxLength = 15;
    

 const textAreaLabel = 'cardMessage';
    

Thanks so much, 

@WillowCo

I have updated the instructions for filling in the values in the code.

You'll want the following values.

    /* for formName copy the value from the form editor Form Name field. you
       only need exactly what can be selected from the field */
    
    const formName = 'Details';
    
    const maxLength = 128;
    
    /* for textAreaLabel copy the value from the form Text Area field editor
       LABEL field. you only need exactly what can be selected from the field */
    
    const textAreaLabel = 'Card Message';
    

I strongly suggest that you use a maxLength around 128 characters. As I mentioned the code does not restrict based on words but characters.

Would it be possible to limit the number of characters for a text line in a form? This is our website: https://ourladyoftheisland.squarespace.com/shop/p/praying-hands

@shrineofourladyoftheisland

I think it is possible but a bit tricky because of variants. When variants are present the code needs to be dynamic and adjust the max length values when the variants are selected.

I'm willing to give the code a go but before I do I suggest that you recreate the form in the form tab of the product editor.

As it is now the form you have in additional info will not attach the requested info to the product order. In other words the order and the text would come in two different emails and you'd have to link them up manually.

If you make the suggested change, let me know and I'll give the code a go.

22 minutes ago, creedon said:

@shrineofourladyoftheisland

I think it is possible but a bit tricky because of variants. When variants are present the code needs to be dynamic and adjust the max length values when the variants are selected.

I'm willing to give the code a go but before I do I suggest that you recreate the form in the form tab of the product editor.

As it is now the form you have in additional info will not attach the requested info to the product order. In other words the order and the text would come in two different emails and you'd have to link them up manually.

If you make the suggested change, let me know and I'll give the code a go.

 

Thank you so much for helping us with this.  I already replicated the form.  It was under additional information.

@shrineofourladyoftheisland

What is the URL of the product you added the form to?

11 minutes ago, creedon said:

@shrineofourladyoftheisland

What is the URL of the product you added the form to?

https://ourladyoftheisland.squarespace.com/shop/p/praying-hands

the duplicated form is hidden.  Do you need me to publish that?

@shrineofourladyoftheisland

I need to be able to access the form to write the code.

18 hours ago, creedon said:

@shrineofourladyoftheisland

I need to be able to access the form to write the code.

Sorry about that.  The form is now there. Thank you for your patience!
https://ourladyoftheisland.squarespace.com/shop/p/praying-hands