Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup for Enter Binding (↩)
  • Setup for Backspace Binding (⌫)
  • Key Considerations

Was this helpful?

  1. Accessibility

Enter & Backspace Bindings (↩, ⌫)

Customize Enter (↩) and Backspace (⌫) keys for form navigation.

Setup for Enter Binding (↩)

Attribute: sf-bind-enter

Values: true, false

Where: Applied to navigation elements

Binds the Enter key to trigger the 'next' action on forms. For custom behavior, apply directly to a specific button or link with navigation directives like next or goto=logic().

By default Enter Binding is enabled globally (binds to 'next' navigation elements).

Override Default: To customize, assign sf-bind-enter="true" or sf-bind-enter="false" on specific navigation elements to control its behavior explicitly.

HTML Example

<!-- Next button with Enter key binding enabled -->
<button sf-bind-enter="true" sf-goto="next">
  Next Step
</button>

Webflow Example


Setup for Backspace Binding (⌫)

Attribute: sf-bind-backspace

Values: true, false

Where: Applied to navigation elements

Binds the Backspace key to trigger the 'back' action, allowing users to navigate to the previous form step.

By default Backspace Binding is enabled globally (binds to 'back', 'previous', 'prev' navigation elements)

Override Default: Assign sf-bind-backspace="true" or sf-bind-backspace="false" to specifically enable or disable this behavior on certain elements.

HTML Example

<!-- Back button with Backspace key binding disabled -->
<button sf-bind-backspace="false" sf-goto="back">
  Previous Step
</button>


Key Considerations

  • Multiple Bindings: If multiple navigation elements are eligible for key bindings, the first encountered in the DOM order is used.

  • Conflict Resolution: Explicit attribute settings on elements take precedence over default behaviors to ensure fine-grained control.

Last updated 10 months ago

Was this helpful?

⌨️