A form-submit interaction runs when a form is submitted: validate fields, then send an email, hit a webhook, or run a custom script, with success/failure outcomes.
Where: Right sidebar → Interact → Interactions → “+” → Form — Add a form-submit interaction
Before you start
- Build a real form with correctly named inputs and required/type constraints before configuring its submit behavior.
Key ideas
- Validation: basicValidation checks required fields before submitting.
- Submit action: none / sendEmail / webhook / customScript — choose what happens on submit.
- Outcomes: Define success and failure outcomes (e.g. show a message, animate, redirect).
Steps
- Select the form root and add a Form submit interaction.
- Enable and test basic validation for required/type-constrained fields.
- Choose none, sendEmail, webhook, or customScript as the submit action and configure its destination outside any user-visible secret field.
- Define distinct success and failure outcomes such as a message, animation, or redirect.
- Preview valid, invalid, slow, failed, and repeated submissions; verify keyboard and screen-reader feedback.
Submission phases
- Collect named field values.
- Run basic validation.
- Execute the selected action.
- Run the success or failure outcome.
- Restore an intentional enabled/loading state.
Action boundaries
Email, webhook, and custom-script destinations have different security and reliability needs. Do not expose private credentials in client-authored form settings; place secrets behind a server-controlled endpoint.
Limitations and important notes
- Client-side validation improves feedback but is not a security boundary; validate again at the receiving server.
- Network and provider failures must have a visible failure state and a safe retry path.
Troubleshooting
Submit appears to do nothing
Confirm the interaction targets the form root, fields have names, validation is not silently failing, and both success/failure outcomes are visible.
A webhook works in testing but fails after publish
Inspect the endpoint URL, method/payload, CORS, authentication, server logs, and whether credentials were incorrectly placed in client-visible configuration.