Submit Button
freeForm submit button with loading, success, and error states.
Overview
The Submit Button validates all FormKit fields before submission, shows a loading spinner while sending, and displays success or error states. Supports two modes: a built-in styled button or a custom Framer component with variant switching.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
formId | String | "default" | Must match the formId of your fields. |
buttonType | Enum | "default" | "default" for built-in styling or "custom" to slot in your own Framer component. |
text | String | "Submit" | Button label text. |
loadingText | String | "Submitting..." | Text shown during submission. |
successText | String | "Form submitted successfully!" | Text shown on success. |
errorText | String | "Please fix the errors above" | Text shown when validation fails. |
loadingDuration | Number | 1000 | Minimum loading state duration in milliseconds. |
showOnlyOnLastStep | Boolean | true | In multi-step forms, only show on the final step. |
Features
- Validates all FormKit fields AND native HTML5 required inputs before submit
- State machine: idle → validating → loading → success/error
- Custom component mode with 4 variant states (default, loading, success, error)
- Auto-resets after configurable duration
- Sets novalidate on parent <form> to suppress browser tooltips
- Resets all form data after successful submission
- Hover styles with scale and opacity support
Tips
Always place the Submit button inside the Framer Form element alongside your fields.
In multi-step forms, only the Submit button on the last step triggers submission by default.
Use custom mode to drop in any Framer component with variant states (e.g., a designed button with loading animation).