Many AdvantiPro websites use WordPress, and many of those WordPress websites use Contact Forms 7 to create forms for users to enter and submit data.


Some times, you will want a form that allows the user to pick a certain option, and have different form fields appear, conditionally, as in:

  1. If the user selects Choice 1, then
    1. Form fields A, B and C appear, but
  2. If the user selects Choice2, then
    1. Form fields D, E and F appear, and finally
  3. If the user selects Choice3, then
    1. Form fields G, H and I appear.

This can be done using Contact Fields 7, but it does require an additional plugin:
Contact Form 7 Conditional Fields

https://wordpress.org/plugins/cf7-conditional-fields/


Once installed, a new button, "Conditional Fields Group", appears on the Contact Forms 7 Form tab, and a new tab, "Conditional Fields", appears:


To add conditional fields to a form:

  1. Put your cursor where you would like the conditional field "choices" to appear ("Choice 1", "Choice 2, and "Choice 3", in the example above), and add that element to the form (radio buttons are usually a good choice):
    * Note the name you give this element, as you will need it later.  In the screenshot above, the element name is conditional-choices.
  2. Put your cursor where you would like the first conditional field "results" to appear (Form fields A, B, and C, in the example above).
  3. Click the Conditional Fields Group button to add a conditional group:
    * Note the name you give this group, as you will need it later.  In the screenshot above, the element name is conditional-group-1.
  4. Repeat steps 2 and 3 for each conditional group that should appear for each conditional choice defined in step 1:
  5. Note that the above example puts simple paragraphs inside the conditional groups.  You can add anything inside the groups, including numerous form fields.  As long as the content you add is between the opening "[group..." and closing "[/group]" elements, it will all show and hide based on the corresponding choice.
  6. Once you are done adding form elements, click the Save button to save your work so far.
  7. Once the form has saved, click the Conditional fields tab.
  8. Reading from left-to-right, create conditions for each "choice" created in step 1.  As an example, the first condition below reads as:
    Show the group named "conditional-group-1" if, in the element named "conditional-choices", the user's choice equals "Choice 1"
    * Note that you can add additional conditions for each line using the And button, meaning one element might have to equal "Choice 1" AND another element might have to be "greater than 5".
  9. When you have added a condition for each choice and group, click the Save button again.
  10. Your conditional fields should now be ready!
  11. If you have any questions on this, please contact Support at support@advantipro.de.