In this article we’re going to create a multipage form with the use of conditional logic. Both features are contained in the pro version of our PlanSo Forms WordPress plugin and in the stand-alone version on PlanSo Forms.

In this tutorial we’ll have a look at a simple feedback or request form which your clients are able to fill out at your WordPress page.

Are you ready? So let’s start:

1) Working with your first fields

After clicking on “New Form” in your WordPress Admin Dashboard you’ll be transferred to the section “Form fields”. Here we’re going to add the fields to our form. Let’s start with dragging a “name” and “email” field to the stage. Both fields can be found on the right side under “Predefined fields”:

As you’ve probably noticed you’ll see a button group as soon as you hover any field you created on the stage. In this button group you’ll find an “Edit” button that we use to change the details of our field.

After we’ve clicked “edit” a modal window will open. Here we can change the look and feel of each field.

In our case we’ll add an icon to the left side of our field by assigning it in the icon input. For a complete list of the available icons please refer to the Font-Awesome website that can be reached via the link below the appropriate field.

As soon as we’ve done that we can click “Update” and immediately see the result:

2) Using Mandatory fields

Now we repeat the procedure and choose also a suitable icon for Email (e.g. fa-at). Moreover we check the box Mandatory field to ensure your clients definitely show off a mail address.
Directly after clicking “Update”, you’ll get the outcome of this command with a new icon placed in the second text box and a little star behind “Email” as a mark for “Mandatory field”.

3) Creating a Select box

After creating those two important contact fields, you want to know why the customer is using your brand-new contact form. That’s why we drag in a select field onto the stage. With this field type the user has several possibilities to response.

4) Renaming your select box

Hover the new field and click “edit” (as you’ve seen in step 1) and name the new field label.

In our case we want to know the user’s concern, that’s why we name the field “Please specify Your query”.

5) Defining the values within your select box

Please stay in the modal window and switch over to the tab “Select values”. Now you are able to enumerate options as suitable answers. With a click on “Add option” you get more fields to fill out.

In our case three possible options for “Please specify your query” would be “Feedback”, “Request” and “Information”.

Hint: Don’t delete the first label named “Select”. If it’s still there you lead the user to click in the category. Otherwise the first field would always be the first value (“Feedback”) if the user doesn’t change the option.

To preview the result, press “Update” and the new field will appear in your form. As you’re likely to do automatically, just check all entered answer options with a click on the drop-down.
Well done!

6) Using Page dividers in your multipage form

The next step is to add a second page to the form. How? Under “Multipage form” on the right you’ll find the box “Page divider”. Please drag the field “Page divider” below the last field of your stage. The result should look like the following:
If you use various page dividers you can place each one wherever you want on the stage. But be careful to always place the page divider in a new, separate row.

7) Adding Multiline text boxes to the form

What’s next? We want to get more information about the user’s query. As you might know most contact forms usually end with a message box. So does ours, too.

But here, you already need to keep in mind that we want to apply conditional logic within the next steps. (Background: Only one message box shall appear corresponding to the given answer in our select box.) Therefore let’s do the base setting for using conditional logic.

First, you place three multiline text boxes via drag-n’-drop beneath the page divider.

Reminder: We’ve chosen Request, Information and Feedback as selected values (see step 5) so that we need three suitable text boxes.

After dragging three multiline text boxes under the page divider, our surface is going to look like the following:

8) Renaming field labels and adding help text

Next, we want to replace the field labels by suitable phrases:

Click “edit” and rename each field label in the modal window concerning our three possible values. In our project suggestions for headlines (as field labels) are:

Please specify your request, so we can make you an offer. (For those who select the value “Request”)

What do you need to tell us? (For those who select the value “Feedback”)

How can we help you? (For those who select the value “Information”)

Moreover, sometimes an additional help text is useful for the user. This can also be added in the modal window. As always, you finish the process with a click on “Update”.

The following screenshot shows a modal window of the second text box “What do you need to tell us” and targets people who have selected “Feedback”. In this case we added a little help text to give some inspiration to the user who is writing in the message box.

You don’t need to fill in a help text, this is just optional and not always useful. But if you do, it will appear right under the correspondet text box.

We added another help text to the last question “How can we help you?”, namely “Please specify, what kind of information you need.” and finished by “Update”.

After you’ve renamed the field labels and added a help text (as we did for two questions) the result needs to be like this:
Finally you made the basic settings of the form. Currently all those three text boxes will appear on page two of your form. But we just want one specific message box to pop up depending on the selected value in the question “Please specify Your query”.

9) Using Conditional Logic I/III

Now to the main topic of this project: We need to apply our feature conditional logic, in order that only one message box pops up to the matched answer of the query question.

Please go back into “edit” mode of the first multiline text box.

Regarding the following screenshot, first select “Advanced” (1).

(2) Click on “Add set of conditions” to adjust the right condition. In the following setting you have several options. Right under “Conditions” you’ll see two preset parameters named “Show field” and “if all conditions match”.

In our case the field shall pop up, so “Show field” is the correct value. Besides we want to set up only one condition so you don’t need to change the parameter “if all conditions match” either.

(3) Now you need to determine the condition. If you click the drop-down all variables we used in the form are notified. Here you choose “Please specify Your query” because this is our reference field, the field that will control the visibility of this field.

10) Using Conditional Logic II/III

After choosing the reference field you need to define the condition when the visibility should be changed. With a click on the drop-down you can see all possible values. The depended question consists of only one word, so we test for exactly the corresponding value. That’s why we select “equal to (=)”in this case.

11) Using Conditional Logic III/III

In the last box on the right you need to fill in the value that is tested against. In our case it has to be “Request” (see Step 5). Finally, before you close with “Update”, the whole window must be looking like the following: Hint: Copy+Paste the correct value to avoid typos.

12) Repetition of the last steps

Now you repeat steps 9-11 analog to the other two answers. Corresponding to the other two values you’ll choose the correct condition (If) on the left, which again is “Please specify Your query” and fill in “Feedback” and “Information” as value on the right. All remaining parameters can be left untouched.

13) Placing a “Submit” button by using conditional logic

The last step is replacing a “submit” button that is appearing only if any text field on page 2 is filled out. First, you put it on the bottom of the page via drag-n’-drop.

Then you click on “edit” and select the “advanced” tab to use the conditional logic again.Now we have several steps to consider.

(1) First click on “add a set of conditions”.

(2) The difference here is that we need to change from “If all conditions match” to “If ANY condition matches”. Since all three text boxes shall be included in the conditional logic although just one will be shown to the user, we need to choose “if ANY condition matches”. The client can only see and answer one of our three message boxes.

(3) Now we need to choose the first field label (from page two) as dependent condition.

(4) Then we need to define the case how the condition is fulfilled. To ensure your client completes the message box we choose “Is not empty”. The “value” field on the right can stay empty.

(5) Finally you repeat this process for the remaining two questions. Just start with two clicks on “add condition” and choose the new condition for each of the other two field labels.

After you’ve clicked on “Update” the total form setting looks like this:
Hint: Don’t forget to save in the end ;-)

14) Test your new multipage form with conditional logic

Well, let’s see the result. Within the output form you should see the first page like this:

We see all three fields of page 1 – “name”, “Email” and “Please specify Your query”.

If you click on the drop-down list, our three categories will appear:

Choose one option (e.g. “Information”) and click on “next page” to see whether the right message box is shown at page 2 of the form.

That looks fine, but as you can see, the submit button is missing. Did you make a mistake? No! That’s how conditional logic works ;-)

If you type some letters in the multiline text box, the submit button will pop up at the bottom of the page. And there it is:

Great! Now you know how to use the pro tools multipage forms and conditional logic, so you can start loads of surveys with the new PlanSo Form!

This is what your form should look like when you’re done

Thank you for taking the time to follow along! Please help us to spread the word about PlanSo Forms and share this tutorial or post a review on your favorite platform  :-)