CF7 Skins Logic allows you to add conditional logic to Contact Form 7 (CF7) forms. Using the new CF7 Skins Logic with Visual Editor, you can show or hide form fields based on user input values of other fields.

In this article, we show you how to use CF7 Skins Logic with Visual Editor to build your own conditional form.

CF7 Skins Logic works right within the CF7 Skins Visual Editor – it adds an extra tab where you can configure the conditional logic of your form.

Before you begin

But before you get started, you must first Design the conditional logic.

Tip: While creating a conditional form, it is a good idea to first plan the fields and conditions before using CF7 Skins to create the form.

The following is an example of a survey form to collect the data on the sports preferences of users.

    Sport Preference Survey

    In this article, we will use this form as an example to follow along with the instructions. By the end, you will be able to easily create similar CF7 forms with conditional logic.

    In the first field of the form, users choose whether they prefer Indoor or Outdoor sports. Based on this choice, the form displays options to choose either indoor sports or outdoor sports.

    Using CF7 Skins Logic

    To use CF7 Skins Logic, we recommend the following steps:

    1. Create the form using CF7 Skins
    2. Add conditional logic to the form using CF7 Skins Logic

    1. Create the form using CF7 Skins

    After planning the conditional logic, follow these steps to create a form using CF7 Skins:

    1. Create a new form using CF7 Skins.

    2. Add all the fields to the form and click Save Visual. In this case, we add three dropdown menus: sport-type, indoor-sport, and outdoor-sport.

    The example form:

    Tip: To avoid confusion, we recommend you to create all the form fields at once in the beginning. You can hide them later using CF7 Skins Logic.

    2. Add conditional logic to the form using CF7 Skins Logic

    1. Go to the Logic tab in the CF7 Skins Visual Editor.

    2. Drag a field that you want to hide based on a condition. In this case, we select outdoor-sport. The field needs to be shown only if Outdoor Sports is selected.

    3. Select Show or Hide based on your condition. In this case, we select Show.

    Tip: Be careful while hiding required fields. Contact Form 7 checks for input in all the fields marked as required regardless of whether they are hidden by CF7 Skins Logic. So, if such a field is hidden and not completed by the user, CF7 shows an overall validation error but the field and its associated validation error is hidden.

    4. Choose Any or All. In this case, we are going to add only one condition, so the choice of Any or All does not matter.

    5. Build a logic statement using the provided options. In this case, we show the outdoor-sport field only if the value of the sport-type field is equal to Outdoor Sports.

    Tip: You can build as many logic statements as you want.

    6. Follow steps 3, 4, and 5 to add Logic Items for as many form fields as you desire. We add a similar condition for the indoor-sport field as well.

    7. After finalizing all the logic items, click Save Logic.

    Further reading