Jump to content

Set character limit for Product Form text fields

Recommended Posts

Hey Everyone! I have products that, when a customer clicks "Add to Cart", a Product Form pops-up to collect further details. Is there any custom code that can set a character limit for the Product Form text fields? The form field types/names requiring a character limit are "Text" and "Text Area" if that helps. 

Thank you!

Link to comment
Quote

Is there any custom code that can set a character limit for the Product Form text fields? The form field types/names requiring a character limit are "Text" and "Text Area" if that helps.

Please see the following.

Let us know how it goes.

 

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

Hey there! I followed these steps for my "1 | Description" field. I did the following:

1. Added code from file product quick view observe changes.html to Website > Pages > Website Tools > Code Injection > FOOTER.

2. Added the twcPcftfml callback name to the code above (see below)

<script>
    if ( window.twc == undefined ) window.twc = { };
    twc.mloc = {
      callbacks : [
        /*
          following is an example line. copy and paste it after the example
          line. remove the double forward slash space of the new line. replace
          the name with your callback   
          */
        // '[ enter your callback name here replacing square brackets ]'
         'twcPcftfml'
        ]   
      };
    </script>


3. Added code from file product custom form text field max length.html to Website > Pages > Website Tools > Code Injection > FOOTER, before the product quick view observe changes code.

4. Added the "ftfml : { 10 }" into the placeholder field but it actually made the text box disappear (see screenshot below):


image.thumb.png.f146a1934dd598cdfa4abad111d0ca44.png

Link to comment
Quote

but it actually made the text box disappear (see screenshot below):

This indicates a failure in the code. It could be an install issue or a bug. I can't diagnose without being able to see the product page where the form is located. What is the URL?

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

Ah ok, interesting. Where can I find the twcsl to re-install again? Can't seem to locate it for some reason.

In the Code injection Header area, I currently have the below which I used for the "Add to Cart Redirect" script. Is this a different twcsl?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/s/twcsl.js"></script>

Link to comment
Quote

Where can I find the twcsl to re-install again? Can't seem to locate it for some reason.

twcsl.js

Quote

I currently have the below which I used for the "Add to Cart Redirect" script. Is this a different twcsl?

The <script src="/s/twcsl.js"></script> line loads twcsl.js file into the page but it is not twcsl.js itself. How to load the twcsl.js file into your site is covered in the install instructions.

If you had the Add to Cart Redirect code working then it should not be working now as twcsl is missing. I'd recommend that you understand where things went wrong so the same issue doesn't arise again. I don't have an answer for that as I'm not working on the site.

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

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.