Jump to content

Limit Character Count on Forms

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.littleboxes.shop/cards/p/worthwhile-paper-awesome-place

Hi Circle Community!

I am wondering if anyone knows how to limit a character count on a form (the long entry block)?

In my shop, I have a form that asks if anyone wants me to handwrite a message in their card. Right now, it's just by the honor system, but people unknowingly abuse it and write more.

Any help greatly appreciate--thanks!

Screen Shot 2020-11-20 at 10.16.53 PM.png

Link to comment
  • Solution

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...
7 minutes ago, kindandbrave said:

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

No, this is not possible. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to 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 is optional.

Link to comment
  • 2 weeks later...
  • 2 weeks later...

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...

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.

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
  • 2 months later...
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). 

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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, 

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

526096230_ScreenShot2021-07-13at10_56_17AM.thumb.png.0fe15faa25bdc4d00aae3a8792afacdc.png

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.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

526096230_ScreenShot2021-07-13at10_56_17AM.thumb.png.0fe15faa25bdc4d00aae3a8792afacdc.png

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.

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.