Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Limit Character Count on Forms


kindandbrave

Question

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

Recommended Posts

  • 1

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment
  • 0
7 minutes ago, kindandbrave said:

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

No, this is not possible. 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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
  • 0
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
  • 0

@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 best , and see my profile. Thanks for your support!

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

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
  • 0

@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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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 best , and see my profile. Thanks for your support!

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