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â€ť.
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
11) Using Conditional Logic III/III
12) Repetition of the last steps
13) Placing a â€śSubmitâ€ť button by using conditional logic
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:
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.
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.