Multi-Step Form Pro
CHANGELOG
v1.2.0
- Form Submit Mode: Choose between AJAX (stay on page with success screen) or Redirect (navigate to form service page) for form services like Formspree.
- Success Screen Redirect: Auto-redirect to a custom URL after showing the success screen with a countdown timer.
v1.1.0
- Font Selection: Provide a UI to select the Framer project font (ControlType.Font).
- Border Width: Adjust the form container border thickness (0-10px).
1. INTRODUCTION
Multi-Step Form Pro lets you build multi-step forms with flexible fields, styling, and animations. Send submissions via webhook or form data, with a success screen and optional auto-redirect.
No coding required - just paste your Formspree URL and start receiving emails instantly.
2. FEATURES
- Customizable step titles and subtitles
- Multiple field types (text, email, date, etc.)
- Conditional required fields
- Webhook integration for submissions (Zapier, Make, Slack, Discord, Google Chat)
- Form service integration (Formspree, Netlify, etc.) with AJAX or Redirect mode - no coding needed
- Custom styling options for colors, borders, and fonts
- Success screen display with optional auto-redirect
- Animation effects between steps
3. INSTALLATION & SETUP
1. Open Framer and navigate to the Marketplace.
2. Search for "Multi-Step Form Pro".
3. Click "Install" to add the component to your project.
4. Drag the component onto your canvas to start using it.
4. HOW TO USE
1. Configure Steps: Modify the stepsMeta property to define the titles and subtitles of each form step.
2. Add Fields: Use the fields property to configure the input fields for each step, specifying the type, label, and requirements.
3. Customize Appearance: Adjust the colors, styling, and buttons properties to match your design preferences.
4. Set Up Submission: Configure the submission property to determine how the form data should be sent (via webhook or form service).
5. Configure Success Screen: Customize the success screen message and optionally enable auto-redirect to another page.
6. Handle Submission: Implement the onSubmit function to manage the data after form submission.
5. PROPERTY CONTROLS REFERENCE
[stepsMeta]
Defines the steps of the form.
- title (String, Default: "New Step")
The title displayed for each step
- subtitle (String, Default: "Step description")
A brief description shown under the step title
[fields]
Configures the input fields for the form.
- stepIndex (Number, Default: 0)
Specifies the step number the field belongs to (0-based index)
- type (Enum, Default: "text")
The type of input field (text, email, tel, textarea, select, radio, checkbox, date, url)
- label (String, Default: "Field Label")
Display name for the field
- placeholder (String, Default: "")
Hint text shown when the field is empty
- required (Boolean, Default: false)
Indicates if the field is mandatory
- options (String, Default: "")
Comma-separated list of options for select or radio inputs
- termsLinkText (String, Default: "")
Text to display as a link (for checkbox)
- termsLinkUrl (String, Default: "")
URL for the link (for checkbox)
[colors]
Configures the color scheme of the component.
- accentColor (Color, Default: #4071F7)
Main accent color for buttons and active states
- backgroundColor (Color, Default: rgba(15, 15, 20, 0.95))
Background color of the form container
- textColor (Color, Default: #FFFFFF)
Primary text color for headings and labels
- subtextColor (Color, Default: rgba(255, 255, 255, 0.6))
Secondary text color for descriptions and placeholders
- borderColor (Color, Default: transparent)
Border color of the form container
- inputBorderColor (Color, Default: rgba(255, 255, 255, 0.1))
Border color for input fields
[styling]
Controls the border styling of the component.
- borderRadius (Number, Default: 24)
Corner roundness of the form container
- inputBorderRadius (Number, Default: 12)
Corner roundness of input fields and buttons
- borderWidth (Number, Default: 1)
Thickness of the form container border in pixels
- font (Font)
Select a font from your Framer project
[buttons]
Configures the action button appearance and behavior.
- nextButtonText (String, Default: "Continue")
Text for the next button
- prevButtonText (String, Default: "Back")
Text for the previous button
- submitButtonText (String, Default: "Submit")
Text for the submit button
- buttonTextColor (Color, Default: #FFFFFF)
Text color for primary action buttons
- buttonBackgroundColor (Color, Default: "")
Background color for the primary button
[animation]
Configures the animation behavior between form steps.
- animationType (Enum, Default: "slide")
Transition effect style (slide, fade, scale)
- animationDuration (Number, Default: 0.4)
Duration of the transition effect in seconds
[success]
Configures the success message displayed after form submission.
- successTitle (String, Default: "Thank You!")
Title shown on the success screen
- successMessage (String, Default: "We'll get back to you soon.")
Message displayed below the success title
- enableRedirect (Boolean, Default: false)
Enable automatic redirect after showing success screen
- redirectUrl (String, Default: "")
URL to redirect to after success screen (e.g., "/thank-you")
- redirectDelay (Number, Default: 3)
Seconds to wait before redirecting (Min: 1, Max: 10)
[submission]
Controls the submission settings for form data.
- useWebhook (Boolean, Default: false)
Enable webhook submission
- webhookType (Enum, Default: "json")
Select the webhook format (json, google-chat, slack, discord)
- webhookUrl (String, Default: "")
The endpoint URL for webhook submission
- useFormAction (Boolean, Default: false)
Enable form service submission (Formspree, Netlify, etc.)
- formAction (String, Default: "")
URL for form service submission (e.g., https://formspree.io/f/xxxxx)
- formMethod (Enum, Default: "POST")
HTTP method for form submission (POST, GET)
- formSubmitMode (Enum, Default: "redirect")
Submission mode: "ajax" stays on page, "redirect" navigates to form service page
6. HOW TO RECEIVE FORM SUBMISSIONS BY EMAIL (FORMSPREE)
No coding required! Just follow these simple steps to receive form submissions directly in your email inbox.
Recommended: Email delivery via Formspree (Free plan available)
Step 1) Create a Formspree account
- Go to Formspree and sign up: https://formspree.io
- Verify your email if Formspree asks you to.
Step 2) Create a new form
- In Formspree, create a New Form
- Set the recipient email to your email address (e.g., sample@test.com)
- Formspree will generate a Form Endpoint URL, which looks like: https://formspree.io/f/xxxxxxxx
Step 3) Paste the endpoint into Framer
- Open your Framer project
- Select the Multi Step Form component
- Go to Form Submission settings:
- Use Form Service: Yes
- Form Action URL: paste your Formspree endpoint
- Form Method: POST
- Submit Mode: Choose your preferred mode (see below)
Submit Mode Options:
AJAX (Stay on page)
Shows the component's built-in success screen without leaving the page. Recommended for a seamless user experience.
Redirect (Default)
Navigates to Formspree's confirmation page after submission.
Step 4) (Optional) Set up auto-redirect after success
If using AJAX mode, you can automatically redirect users to a custom page after showing the success screen:
- Go to Success Screen settings:
- Auto Redirect: Yes
- Redirect URL: Enter your destination (e.g., /thank-you or https://example.com/thank-you)
- Delay (seconds): Set how long to show the success screen before redirecting (1-10 seconds)
Step 5) Test it
1. Publish or preview the site
2. Submit a test entry
3. Confirm the message arrives in your email inbox
4. (If it doesn't show up, also check Spam/Junk folder)
MJ Jung
