Multi-Step Form

This page demonstrates how the Divi Contact Form Helper plugin allows you to create multi-step contact forms in the Divi Contact Form module. Instead of displaying all fields at once, the form is divided into multiple steps, helping organize the form and improve the user experience for longer forms.

Basic Multi-Step Form

This example shows a basic multi-step contact form. The form fields are divided into multiple steps, allowing users to move forward or backwardusing navigation buttons.

Multi-Step Form With Step Icons

This example demonstrates how an icon can be displayed in place of the default step number in the Page Break. This allows you to visually represent each step using icons instead of numbers.

Multi-Step Form With Step Images

This example demonstrates how images can be used instead of the default step number or icon in the Page Break, allowing you to create more visually customized step indicators.

Percentage Bar

This example demonstrates the percentage progress bar style with no icon, no image, and no step number, displaying only a progress bar.

Basic Multi-Step Form – Example 1

This example demonstrates a basic multi-step form setup. The progress line is hidden, Step Click Navigation is enabled so users can click the step indicators to move between steps, and Step Validation is disabled so users can move to the next step even if required fields are empty.

Basic Multi-Step Form – Example 2

This example demonstrates additional customization of the multi-step form. The page break subtitle is removed, the Back and Next button text is customized, and an additional page break is added to create another step in the form.

Basic Multi-Step Form – Example 3

This example removes the page break title while keeping the subtitle visible. The border radius of the step indicator is also adjusted to change the appearance of the step borders.

Basic Multi-Step Form – Example 4

This example demonstrates a multi-step form with step markers disabled, displaying only the step title without a description, along with customized step container background color, spacing, and box shadow.

Basic Multi-Step Form – Example 5

This example demonstrates a multi-step form with the step indicator set to "None", allowing the form to progress without visible navigation, along with a "Fade Top" transition animation style.

Basic Multi-Step Form – Example 6

This example demonstrates a multi-step form with the step title and description disabled, step navigation buttons positioned separately on the left and right sides, customized step container background color, spacing, border radius, border styling, and box shadow. The navigation buttons display text only without icons.

Multi-Step Form With Step Icons – Example 1

This example demonstrates using icons as step indicators, placing the step title above the marker, changing the progress line thickness, setting the progress line style to "Dashed", setting the progress line fill animation speed to "3s", and using the "Slide-In-Right" transition animation style with duration set to "1100ms", delay to "550ms", and speed curve to "Ease In".

Multi-Step Form With Step Images - Example 2

This example demonstrates using images as step indicators, changing the progress line "Active" and "Base" colors, setting the progress line style to "Dotted", and adjusting the progress line vertical offset to "15%".

Multi-Step Form With Step Icons – Example 3

This example demonstrates displaying only the step icon while disabling the title and description, using a gradient color in the stepper container, making the button icon always visible, and changing the button icon.

Percentage Bar - Example 1

This example demonstrates disabling the Show Step Description option, customizing the percentage bar color, height, and border radius, adjusting text size, color, and spacing, and using the "Flip Vertical" animation style with transition duration set to "1000ms" and speed curve set to "Linear".

Percentage Bar - Example 2

This example demonstrates disabling the "Show Step Title" option, adjusting the border radius, selecting the step navigation button position as "Both Right", displaying only button icons without text, and using a "Swing" animation style.

Note: These examples use real contact forms so you can test the multi-step navigation. Try moving between steps to see how the different settings affect the form behavior.