Product Custom Form Text Field Max Length

Product Custom Form Text Field Max Length

License

Synopsis

Limit custom form text and text area field lengths.

Version

• 0.1.0

SS Versions

• 7.1

• 7.0 (Brine template family)

v7.1 Fluid Engine Compatible

• Not Applicable

Dependencies

• Squarespace plan that supports JavaScript.

• Modal Lightbox Observe Changes

• Product Quick View Form Text Field Max Length

---

Install

• Install Modal Lightbox Observe Changes. After you install the code be sure to continue on with the rest of the steps.

• Install Product Quick View Form Text Field Max Length. After you install the code be sure to continue on with the rest of the steps.

• Options

  • Page Specific

    • This option will be the one most will want to use if you have only a single page you want to have this effect.

    • Add code from file product custom form text field max length.html to Page Settings > Advanced > Page Header Code Injection for the page, before the product quick view observe changes code. Please see Per-page code injection.

  • Site-wide

    • This option is the one you want to use if you have multiple elements such as a store page and product blocks where you want to have this effect.

    • Add 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. Please see Add code to code injection.

• Add the twcPcftfml callback name to the modal lightbox observe changes code per that codes install instructions.

• Edit a Store page product and add a Custom Form.

• For each form field you want to limit the number of characters do the following.

  • In the PLACEHOLDER field add one of the following examples.

    Limit all products that use the custom form to a number.

    ftfml : { 10 }
    

    Limit a specific product that uses the custom form to a number. Replace skuOrProductId with the SKU or product id of your product. Use SKUs for products with variants. Use product ids for products with no variants. Squarespace does not provide access to SKUs across the board which this code can access, hence the having to use SKUs and products ids.

    ftfml : { skuOrProductId : 10 }
    

    Limit specific products that use the custom form to a number.

    ftfml : { skuOrProductId1 : 10, skuOrProductId2 : 5, skuOrProductId3 : 15 }
    

    Limit a specific product that uses the custom form to a number and another number for all other products.

    ftfml : { skuOrProductId1 : 20, default : 10 }
    

    Henceforth I'll refer to SKUs and product ids collectively as id or ids. The ids and default can be in any order. As long as you follow the general format id colon number comma for each id/number pair.

    You can find a product with no variants id by using Heather Tovey's Squarespace ID Finder. Alternately you can export your inventory and grab the id from the CSV file.

    To use SIF go to your product detail page and use SIF. You will see something like the following.

    

    You only need the number after #item-.

• If you need installation help or customization please contact me for paid consulting.

Notes

This code does not work on the checkout page. It is a Squarespace security feature that no code can alter the checkout page.

This code is client side and making use of an HTML form feature. Since this code is client side it is possible to bypass the max length limit this code is setting. In other words you still need to be checking manually when forms or orders come in to make sure your limits are not being exceeded. Consider this code more of an aid to help users not exceed your field max length limits.

Make a Donation

Please consider making a donation.

Changes

• 2024-05-23

  • initial version