Divi Multi Step Form

Demo

 Click on the button to open the demo and try the layout for yourself.

Description

This is a multi step contact form. Currently, it has the following pages:

• image radio button (page 1)
• image checkboxes (page 2)
• image radio button (page 3)
• two input fields on (page 4)

For the form to work, you need the free Caldera Forms plugin.

The big heading and title of the images can be styled with the Divi Builder. The rest is styled with CSS.

The form is fully customizable in the Caldera Forms settings.

You can use radio buttons, checkboxes or input fields and all the other options Caldera Forms has, like sliders or text areas.

Installation

Install Caldera Forms

Install Caldera Forms.

Import form

1. Go to Caldera Forms
2. Click on “Import”
3. Go to the “Import” tab
4. Input a Form name e.g. Multi Step Form
5. Choose File (multi-step-form-caldera-forms.json)
6. Check “Trusted Source”
7. Click “Import Form”

Import layout

1. Create a new page with Divi
2. Click on “Portability” (the two arrow icon)
3. Go to the “Import” tab
4. Drag or select Json (multi-step-form.json) file
5. Check “Import Presets”
6. Click “Import Divi Builder Layout”

FAQ

How are the images connected to the radio buttons or checkboxes?

They are automatically connected if you add dv-radio or dv-checkbox to the images and dv-radio-buttons or dv-checkboxes to the radio buttons or checkboxes.

Then automatically the first dv-radio image is connected to the first radio button, the second to the second, …

How can I change the icons?

1. Download an SVG on any website (e.g. icons8.com, thenounproject.com, flaticon.com)
2. Go to Caldera Forms → Forms → Edit → Click on Pencil of Icon
3. Replace the SVG in the code with yours (but only from <svg> to </svg>, keep the rest as it is). You can also replace it by an image, like <img src=”/wp-content/uploads/my-image.jpg”>

FYI: I used this icon pack here

How can I delete a page?

Go to Caldera Forms → Forms and delete all elements from a page. Then this page will be automatically deleted.