Multi Step Form Widget

Long forms can feel overwhelming. A multistep form breaks them into smaller, easy-to-follow steps, so visitors are more likely to finish what they start. With RTMForm PRO, you can build one right inside Elementor, complete with a progress bar that shows how far along they are.

Step 1: Create a New Form

• Multistep Forms are built in the RTMKit Theme Builder.
• From your WordPress dashboard, go to RTMKit → Theme Builder.
• Open the Form tab, then click Add New Template.

• Give your form a name, such as Registration Form, → click Save & Edit → open it with Elementor.

Step 2: Drag & Drop the Multi Step Form Widget

• In the Elementor panel, Drag & Drop the Multi Step Form widget in the search bar into your form.

Step 3: Set Up the Content and Steps

• Click the widget, then open the Content tab. The settings are organized into two sections:

Multi-Step Form

• Choose one of the 3 available progress styles:

Style 1 – Step Bar: 

• Shows each step as its own segment with its number and title, plus a summary like 1 / 3 Completed.

Style 2 – Progress Bar: 

• Shows one continuous bar with the current step (1 / 3 Step) and the completion percentage (33% Completed).

Style 3 – Step Circles: 

• Shows numbered circles connected by a line, with the step title below each one.

• Then turn on the options you want to display, such as the step number, step title, step icon, or percentage text.
• You can also change the prefix text, for example Completed or Step.

Steps

• Manage the steps in your form. Use Add Step to add a new step, or the duplicate and remove icons to manage existing ones. Each step can be expanded to adjust:

• Step Title: The name shown on the progress bar, for example Personal Info or Payment.
• Icon: The icon shown next to the step title.
• Active Icon: The icon shown once the step is completed, such as a checkmark.
  Note: The step icons only appear when Show Step Icon is turned on in the Multi-Step Form section.

Step 4: Style the Multi Step Form

• Click the Style tab to customize the progress bar and step titles to match your brand.
• Wrapper: Adjust the margin and padding around the whole form.

• Progress Step Wrapper: Style the area around the progress bar, including its margin, padding, corner radius, background, border, and shadow.

• Progress Step: Set the alignment, text position, size, spacing, and corner radius of each step, plus the background color and progress color of the bar.

• Step Number: Customize the number badge, including its font, size, margin, corner radius, text color, and background, with separate Normal and Active styles.

• Step Title: Set the font, color, text stroke, and text shadow of each step title, with separate Normal and Active styles.

Step 5: Add Form Fields to Each Step

• Click the container of the step you want to fill on the canvas, for example Step 1.

• Then drag your form fields from the RTMForm category into it, such as: Text, Email, Telephone, Select, Date, or Checkbox.
• You can also add the File Upload or Calculation widgets from RTM Form Pro.
• Repeat this for every step.

• Tip: If you have trouble clicking a field on the canvas, open the Structure panel (the layers icon in the top bar).
• Here you can see every step and field in your form, such as Step 1 → Full Name, Email, Telephone, or Address.
• Simply click the field you want to edit, and its settings will open in the panel on the left.

Step 6: Add the Navigation (Next or Previous Step Widget)

• Drag the Next Step widget from the RTM Form Pro category and drop it below your fields.
• This button lets visitors move on to the next step once they’ve filled in the current one.

• Click the Next Step or Previous Step widget, then customize it to suit your needs.
• For a complete tutorial on the Next Step widget, click this link.
• For a complete tutorial on the Previous Step widget, click this link.

Step 7: Fill In Every Step

• Repeat the process for each step by adding the fields you need.
• For example, add course options in Step 2 and learning goals field in Step 3.
• You can also add Conditional Display to your fields, so certain fields only appear based on the visitor’s previous answers.
• To learn how to use conditions, read the full guide here: How to Use Conditional Display in RTMForm.

• Important: Don’t forget to add a Submit Button on the last step so visitors can send the completed form.

Step 8: Publish

• Once everything is ready, click Publish to save your form.

Step 9: Display the Form on a Page

• Open the page where you want the form to appear, for example Registration, and click Edit with Elementor.

• In the Elementor panel, find the RTMForm category, or type RTMForm in the search bar.
• Then drag the RTMFormwidget and drop it into your page.

• A pop-up will appear.
• Choose Select Form, pick the form you created earlier, such as Registration Form.
• Then click Save & Close. Your multistep form will instantly appear on the page.

• Once everything looks right, click Publish to make the page live. Open it in a private window to test each step from start to finish.

• Your custom multistep form is now live.