A newer version of

Freeform

is available.

Try Freeform 5 now →

Freeform for Craft

4.x

Plugin Store

Overview

Conditional Rules Logic for Fields and Pages Pro

Freeform Pro edition includes Conditional Rules logic that can be added to forms. This feature allows you to effortlessly set fields to show or hide based on the contents/selection of other fields, and even skip pages for multi-page forms based on the contents/selection of fields on a previous page.

To begin adding rules inside your form, click on the Conditional Rules (lines icon) tab in the Property Editor column at the top right and follow the options.

User Guide:

Quick troubleshooting the most commonly reported issues with your form's appearance, behavior, or submission of the form on the front end.

Form Builder - Conditional Rules

Quick Setup Guide for Fields

Click the Conditional Rules (lines icon) tab in the Property Editor column at the top right.

Click Select page to add rules to select dropdown, and select the page you'd like to add rules for.

Beside Field Rules, click the Add... select dropdown, and select the field from the list you'd like to be shown or hidden, based on criteria of other field(s).

The word show can be toggled to hide, and any can be toggled to all if you wish.

Click the Add criteria... select dropdown and select the field you'd like to affect this field.

The word is can be toggled to is not if you wish.

Enter a value or select and option (if multi-option fieldtype) or check the checkbox (if checkbox fieldtype).

If you wish to add more criteria for this field, click the Add criteria... select dropdown and repeat the above process.

Save your form and try it out!

Finished!

Quick Setup Guide for Page Skip

This applies only to multi-page forms...

Click the Conditional Rules (lines icon) tab in the Property Editor column at the top right.

If you don't already have field conditional rules for the page you're wanting to make rules for, click Select page to add rules to select dropdown, and select the page you'd like to add rules for.

Beside Page Rules, click the Add... select dropdown, and select the page from the list you'd like to have your form go to, based on criteria of other field(s).

The word any can be toggled to all if you wish.

Click the Add criteria... select dropdown and select the field you'd like to cause the page skip.

The word is can be toggled to is not if you wish.

Enter a value or select and option (if multi-option fieldtype) or check the checkbox (if checkbox fieldtype).

If you wish to add more criteria for this field, click the Add criteria... select dropdown and repeat the above process.

Save your form and try it out!

Finished!

Reference

Rules are applied directly inside the form builder for each form through the Conditional Rules (lines icon) tab in the Property Editor column.
Rules can be applied to both Fields and Pages.
You can have multiple criteria for each rule.
You can have as many rules as you wish.
Wildcards can be set for criteria values with the asterisk character (*), e.g. cat* will match cat, cats, cat litter, etc.
Criteria values/options will automatically display as the following:
- Text input (where you type out the criteria) for basic text/number field types.
- Select dropdown (where you select a predefined option as criteria) for multi-option fieldtypes such as Checkbox group, Radio groups, Select, etc.
- Checkbox (where you check the checkbox) for single Checkbox fieldtypes.

Fields

Rules can be set to show or hide the applicable field.
Rules can be set to have any or require all criteria (across multiple field criteria) to affect the show/hide.
Criteria can be set to have content be (is) or not be (is not) certain data.
Includes support for showing/hiding Submit buttons, HTML blocks, Confirm fields and Password fields.
Currently no support for Payments and Captcha special fields.

Usage in Formatting Templates

Due to the complex nature of this feature and its reliance on automation, it generally assumes you're automating the render (rather than manually hardcoding each field, etc). All of the Solspace demo templates and sample default formatting templates include this already (and work out of the box), but if you're customizing a formatting template, be sure that {{ field.rulesHtmlData }} is on the div wrapper for each field inside of {% for field in row %}. For example:

{{ form.renderTag({rowClass: "sample-row-class"}) }}

{% if form.hasErrors %}
  <div class="freeform-form-has-errors">
    {{ "Error! Please review the form and try submitting again."|t('freeform') }}

    {% if form.errors|length %}
      <ul>
        {% for error in form.errors %}
          <li>{{ error }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{% endif %}

{% for row in form %}
  <div class="{{ form.customAttributes.rowClass }}">
    {% for field in row %}
      {% set columnClass = "sample-column " ~ form.customAttributes.columnClass %}
      {% if field.type == "submit" %}
        {% set columnClass = columnClass ~ " submit-column" %}
      {% endif %}

      <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
        {{ field.render({
          class: field.type != "submit" ? "freeform-input" : "",
          labelClass: "sample-label" ~ (field.required ? " required" : ""),
          errorClass: "sample-errors",
          instructionsClass: "sample-instructions",
        }) }}
      </div>
    {% endfor %}
  </div>
{% endfor %}

{{ form.renderClosingTag }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Conditional Rules Logic for Fields and Pages Pro

User Guide:

# Quick Setup Guide for Fields

# Quick Setup Guide for Page Skip

# Reference

# Fields

# Pages

# Usage in Formatting Templates