How to use the Form Wizard

Setting up a multi-step form using the CLEAN Form Wizard module requires a few special steps.

The first thing you need to know is that this module works with a single form. You'll define the "steps" within the form editor.  Let me show you what I mean.

Step 1: Create a new form

Generally speaking, I would advise creating a brand new form to use with this module instead of using an existing form that may be in use on another page.  If you have an existing form that you've double-checked that isn't in use, cool. Use that puppy and save yourself a few minutes.

IMPORTANT:

If you don't plan on having a multi-step form, meaning you just want to show a single form with a few inputs, DO NOT use the Form Wizard module. It's not needed and will just include additional JavaScript on the page you're not utilizing.  Instead, use the Magic Module or Multi-Column Content Module.

How to define each step:

Drag-n-dropping in a rich-text field into the form is what defines the steps.  For example, to define Step 1, you'd just drag this above your first input field.

 

form-wizard-1

Once you do that, you can use the rich text module to write anything.  In this example, I'm going to keep it simple and just put "Step 1" but you can put anything.

 

form-wizard-2

Now, drag any other input elements into the form which will show in Step 1.  For example, let's focus on getting the person's first name and email address.  

 

form-wizard-3

 

Cool?  Cool. Let's add Step 2.  Drag another rich-text editor in.

 

form-wizard-4

 

For good measure, let's write "Step 2" and then add a few other input fields like Company Name and Mobile phone number.

 

form-wizard-5

 

See the pattern?  Pretty simple right?  You can go on to create your additional steps.

Pro Tip: I strongly encourage you to use a MAXIMUM of 6 steps.  The fewer the better while still making each step feel light and effortless for the person filling out the form.

Final MASSIVELY IMPORTANT Setting:

Once you've got your form and steps ready to rock, click the Style & Preview tab and then TURN ON Set as raw HTML form. This is the only way that this module will work.

 

form-wizard-6

 

Click Publish or Update and you're now ready to select your new form from the Form Wizard module.

And for your next trick...

 

wizard