Form Block Text Field Max Length

Form Block Text Field Max Length

License

Synopsis

Limit the number of characters allowed in form block fields.

Version 0.3.0

SS Versions

• 7.1

• 7.0

Dependencies

• Squarespace plan that supports JavaScript.

• Form Block Wrapper Observe Changes

v7.1 Fluid Engine Compatible

• Yes

---

Install

• Install Form Block Wrapper Observe Changes. 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 form block text field max length.html to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

  • Site-wide

    • This option is the one you want to use if you have multiple pages where you want to have this effect.

    • Add code from file form block text field max length.html to Website > Pages > Website Tools > Code Injection > FOOTER. Please see Add code to code injection.

• Add or edit a form block on your page and set up as desired.

• For each text or text area field where you want a max character limit do the following.

  • Edit the field.

  • At the beginning of the description field enter twc-fbtfml : [enter max length number here replacing square brackets]. An example.

    twc-fbtfml : 10
    

    If you want to have description text for the field that the user will see enter it after the twc-fbtfml tag. An example.

    twc-fbtfml : 10
    My description text that helps the user.
    

Notes

This effect is not active in Squarespace Preview to test it use private browsing.

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.

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

• 2024-04-28

  • update to work with Form Block Wrapper Observe Changes v0.3.0
  • bumped version to 0.3.0

• 2023-05-11

  • clean up the aria-label on the description as well
  • bumped version to 0.2.0

• 2022-05-11

  • initial version