Multi-Step Form Pro

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.

2. Features

• Customizable step titles and subtitles

• Multiple field types (text, email, date, etc.)

• Conditional required fields

• Webhook integration for submissions

• Custom styling options for colors and borders

• Success screen display upon form submission

• Animation effects between steps

3. Installation & Setup

• Open Framer and navigate to the Marketplace.

• Search for "Multi-Step Form Pro."

• Click "Install" to add the component to your project.

• Drag the component onto your canvas to start using it.

4. How to Use

• Configure Steps: Modify the stepsMeta property to define the titles and subtitles of each form step.

• Add Fields: Use the fields property to configure the input fields for each step, specifying the type, label, and requirements.

• Customize Appearance: Adjust the colors, styling, and buttons properties to match your design preferences.

• Set Up Submission: Configure the submission property to determine how the form data should be sent (via webhook or standard form action).

• 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 (options: 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 (applicable for checkbox).

• termsLinkUrl (String, Default: "") - URL for the link (applicable 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.

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 (options: 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.

submission

Controls the submission settings for form data.

• useWebhook (Boolean, Default: false) - Enable webhook submission.

• webhookType (Enum, Default: "json") - Select the webhook format (options: json, google-chat, slack, discord).

• webhookUrl (String, Default: "") - The endpoint URL for webhook submission.

• useFormAction (Boolean, Default: false) - Enable standard form submission.

• formAction (String, Default: "") - URL for standard form submission.

• formMethod (Enum, Default: "POST") - HTTP method for form submission (options: POST, GET).