Freeform for Craft

5.x ✓ Latest

• 5.x✓ Latest
• 4.x
• 3.xRetired
• 2.xRetired
• 1.xRetired

Plugin Store

Forms & Fields

# Conditional Rules ProImproved in 5.0+

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

To begin adding rules to your form, click on the Rules tab in the form builder and follow the options.

# Overview

# Field Layout Map New in 5.0+

For added convenience, Freeform includes a field map along with visual cues. This makes configuration faster and less confusing.

• A dark gray background shows the field or page that is currently being configured (in the right column).
• A green border means that the field, group or page has conditional rules configured for it.
• A green corner border at the top left means that the field, group or page is implicated in another field's conditional rules.
  • E.g. If the Company Name field is configured to only show when the Type field is set to Business, the Type field will display a green corner border.

# Adding Rules

Configuring rules for fields, groups and pages is straightforward:

• To set rules for a field, click on the field name in the left column.
• To set rules for a Group field, click on the group field name in the left column.
• To set rules for a page, click on the page name in the left column.

# Available Conditions Improved in 5.0+

The following conditions are available for each field/page:

• is equal to
• does not equal
• greater than
• greater than or equal to
• less than
• less than or equal to
• contains
• does not contain
• starts with
• ends with
• is empty
• is not empty

# Page Skipping

It is possible to skip pages or submit the form based on the contents/selection of fields on a previous page when using multi-page forms.

Simply configure page skipping the same way you configure fields and groups. If you wish to have the form fully submitted based on some criteria, click on the Submit Form button at the bottom left of the Rules page.

# Eligible Field Types

All field types are eligible to be shown/hidden based on the contents of other field(s). However, some fields cannot be set as criteria:

• Groups (fields inside of Groups can be set as criteria, but not the group itself)
• File Upload
• File Upload Drag & Drop
• Table
• Signature
• Stripe Payment
• HTML
• Rich Text

# Quick Setup Guide

# Templating

Freeform will automatically add the necessary attributes and JS to the rendered form. 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).

If you're customizing a formatting template or creating a form template manually, the key is to ensure your field div wrapper contains the data-field-container attribute with the field handle as the value.

There are 3 different approaches you can take:

# renderContainerOpeningTag Recommended

{% set company = form.get("company") %}
{% set email = form.get("email") %}

{{ company.renderContainerOpeningTag({ attributes: { class: "form-field" } }) }}
    {{ company.renderLabel() }}
    {{ company.renderInput() }}
    {{ company.renderErrors() }}
{{ company.renderContainerClosingTag }}

{{ email.renderContainerOpeningTag({ attributes: { class: "form-field" } }) }}
    <label>Email Address</label>
    <input name="email" value="{{ email.value }}" />
    {{ email.renderErrors() }}
{{ email.renderContainerClosingTag }}

# attributes.container

{% set company = form.get("company") %}
{% set email = form.get("email") %}

<div class="form-field" {{ company.attributes.container }}>
    {{ company.renderLabel() }}
    {{ company.renderInput() }}
    {{ company.renderErrors() }}
</div>

<div class="form-field" {{ email.attributes.container }}>
    <label>Email Address</label>
    <input name="email" value="{{ email.value }}" />
    {{ email.renderErrors() }}
</div>

# data-field-container

{% set company = form.get("company") %}
{% set email = form.get("email") %}

<div class="form-field" data-field-container="company">
    {{ company.renderLabel() }}
    {{ company.renderInput() }}
    {{ company.renderErrors() }}
</div>

<div class="form-field" data-field-container="email">
    <label>Email Address</label>
    <input name="email" value="{{ email.value }}" />
    {{ email.renderErrors() }}
</div>