New form effects

Following the successful release of Form Style Packs in 2023, Squarespace have now released Form Effects to improve the liveliness of forms.

These Form Effects include the following optional experience gestures:

• First input highlight effects

• Hover and focus effects

• Submit button effects

• Post-submit message styling options like text style options and preview improvements

These changes are a welcome development but they inevitably include a number of markup changes that will affect existing customisations. For example, Text input, Number input, Text Area, and Dropdown select elements now include additional span elements directly after the input element (before the input prefix, if present). These elements are now positioned using CSS Grid. Form submit button label text is now wrapped in a span and contains additional nested span elements after the label span.