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.
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
3) Creating a Select box
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.
6) Using Page dividers in your multipage form
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”.
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
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 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
13) Placing a “Submit” button by using conditional logic
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.
14) Test your new multipage form with conditional logic
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:
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:
Hi,
Can one show and hide pages based on conditional logic?
Ie. For a home loan pre-approval tool with multiple conditions determining what pages are shown next? Eg. Number of borrowers (1 or 2) determining the next page to show, etc.
Thanks
Hi Lee,
yes this is possible with all pro versions. If you create multi-page-forms and have defined conditions on one of the forms pages which make that page empty, the page will be hidden automatically.
Cheers,
Stephan