Super Forms
  • Drag & Drop Form Builder for WordPress
  • Quick start
    • Installation
    • Registration
    • Starting your 15 day trial
    • Purchasing a license
    • Activating a license
    • First time setup
    • Secure file uploads
    • Creating a form
    • Adding form elements
    • Editing elements
    • Publishing your form
    • FAQ
  • Account
    • Dashboard
      • Your Invoices
      • Billing details
      • Your Licenses
      • E-mail Notification
      • Password reset
      • Cancel subscription
  • Common problems
    • Common problems
      • Email delivery problems
        • Why is my form not sending emails?
        • Why are emails going into spam folder/inbox?
      • File upload problems
      • Session expired
      • reCaptcha Troubleshooting – Fix “Not Loading” & Verification Errors
  • Elements
    • Layout elements
      • Column/Grid
      • Multi-part / step
    • Form elements
      • Calculator
      • Signature
      • File upload
      • Datepicker
      • Variable field
      • Dropdown
      • Text field
      • Autosuggest
      • Keywords
      • Radio button
      • Keyword Field
      • Button
      • Audio Recording (microphone)
    • HTML elements
      • Heading
      • HTML (raw)
      • Image
      • TinyMCE
      • Divider
      • Spacer
      • PDF page break
      • Google map element WordPress form
  • Features
    • Basic
      • Confirmations emails
      • Save Form Progression (continue later)
      • Build In Translation System
      • Populate form
      • Popups
      • Import & Export
      • Hide form after submitting
      • Hide or lock out user from your forms
      • Validation
    • Advanced
      • WordPress form with Google sheets dropdown
      • Custom registration form for WordPress
      • Custom login form for WordPress
      • Custom lost password form for WordPress
      • Update current logged in user
      • Secrets
      • Prevent duplicate entries
      • Lock & hide form
      • Password protect
      • Conditional Logic
      • Tags system
      • Address lookup/auto complete
      • Analytics Tracking
      • Conversion Tracking
      • Distance & Duration Calculation
      • If statements
      • Foreach loops
      • E-mail Reminders
      • Variable Fields
      • Form templates - Include elements into other forms - WordPress
      • Transferring data from one form to another
    • Integrations
      • PDF Generator
      • Listings
      • WooCommerce Checkout
        • Fixed price checkout
        • Dynamic price checkout
        • Variable product checkout (variations)
        • Replacing the "Add to cart" on a product page with a form
        • Hiding product from shop and order via custom form
      • PayPal
      • MailChimp
      • Mailster
      • Zapier
      • Stripe (BETA)
      • WooCommerce Instant Order (in progress)
  • Tutorials
    • WordPress Form to Google Sheet Integration
    • GDPR Consent / Terms agreement
    • How to update the plugin
    • Sending emails to specific department for WordPress contact forms
  • Example Forms for WordPress
    • Booking 24 hours ahead of time
  • Developers
    • Code Examples
      • Lookup City by Zipcode for your WordPress form
      • Audio Recording Field
      • Custom API Phone Number Validation for Your WordPress Form
      • Updating WordPress user meta data after login
      • Automatically redirecting to next step after displaying text or a progress bar
      • Dropdown with groups (categories)
      • Prevent form submission based on entered field values
      • Track form submissions with GTM (Google Tag Manager)
      • Tracking Multi-part steps with Google Analytics
      • Tracking Multi-part steps with GTM data layer (dataLayer.push)
      • Track form submissions with third party
      • Compare input field value with database value
      • Insert form data into a custom database table
      • Delete database row after contact entry is deleted in WordPress
      • Limited date availability (slots) for your WordPress booking form
      • Send submitted form data to another site
      • Exclude empty fields from emails
      • Execute custom JS when a column becomes conditionally visible
      • Toolset Plugin: Update comma separated string to Array for meta data saved via Front-end Posting
      • Toolset Plugin: Update file ID to file URL for meta data saved via Front-end Posting
      • Delete uploaded files after email has been send
      • Increase Cookie lifetime for client data such as [Form Progression]
      • Altering cookie secure and httponly parameters
      • Define fake cronjob to clear old client data if cronjob is disabled on your server
      • Define page language attribute based on page ID or URL
      • Define custom headers when doing a POST request
      • Change checkbox/radio layout to vertical on mobile devices
      • Show remaining available form submission allowed
      • Global fields / elements
      • Trim values of fields
      • Re-sending E-mails after editing entries via Listings for WordPress
      • Combine multiple field values into one column on Contact Entries page
      • Altering the attachments for E-mails via PHP code for WordPress
      • Generate dynamic columns with dates based on user selected date from Datepicker element
      • Hide `eye` icon from Listings row based on user role
    • Data storage
    • BETA version
  • Changelog
  • Support
Powered by GitBook
On this page
  • What is a multi-part
  • What features does a multi-part have
  • When to use a multi-part
  • How to add a multi-part
  • Multi-part Steps and Progress Bar Customization
  1. Elements
  2. Layout elements

Multi-part / step

In short the multi-part allows to create WordPress forms that consist of multiple steps. This guide explains what a multi-part element is, what features it has, when to use the multi-part.

PreviousColumn/GridNextForm elements

Last updated 1 year ago

What is a multi-part

A multi-part is an element that will become a so called "step" or section of the form on the front-end. This comes in handy when wish to separate specific sections of your form into one step each. Each multi-part represents it's own step. If you need a 3 step form, you will add 3 multi-part elements. Inside each of them you put the elements and fields that belong to this particulair step.

The end user will be able to navigate through the steps with the Next and Prev buttons. The end user will also be able to click on the step number, this way the user can navigate through the available steps of the form.

A progress bar will will show the progression that the user has made so far based on the current step the user is on.

What features does a multi-part have

Each multi-part has the following features:

  • When user filled out last field of current step proceed to the next

  • When user goes to next step do not focus the first field

  • Only allow the user to proceed to the next step if current has no errors

Automatically go to next step

This option comes in handy whenever you only have 1 field in each step. For instance when you have radio buttons in all of your steps it would be more user friendly to proceed to the next step automatically after the user selected their option.

Disable autofocus on first field

By default whenever a user proceeds to the next step, the first field will be automatically focussed. If a dropdown is the first element in this next step, it will automatically be opened so the user can choose an option instantly. By default this option is enabled, so if you do not want this you can disable this setting on each of your multi-parts.

Check for errors before going to next step

This option allows you to lock remaining steps in case the user did not completely fill out the current step. This comes in handy whenever you do not want a user to walk through all the steps. This setting can prevent "lazy" users to not wanting to fill out the form because they might think it's to large or to much work.

When to use a multi-part

You should use a multi-part for large forms. You can also use it when a form must be placed in a small area but still needs to have many fields (think of a survey or poll).

How to add a multi-part

In order to add a multi-part you can open up the Layout Elements section on the builder page. You will see 4 elements, the last one is the so called Multi-part. You can simply drag & drop the Multi-part into the form. Not that a multi-part cannot be nested in a column nor inside another multi-part. Once you have added the multi-part you are allowed to add any element inside it that belongs to this step of the form.

Multi-part Steps and Progress Bar Customization

To customize the colors of the Steps and Progress bar, you can find the settings under Form Settings > Theme & Colors on the builder page. From here you can scroll down to the part that says Progress Bar Colors and Progress Step Colors. Optionally you can also choose to hide/show the Steps and or Progress Bar.

Automatically go to next step
Disable autofocus on first field
Check for errors before going to next step