Form Element Field Type
LitePro

Freeform includes a Freeform Form field type (and Freeform Submissions), which allows you to assign/relate forms to other element types such as Craft Entries.

Freeform Form Fieldtype

Overview

The Freeform Form field type allows you to assign/relate forms to other element types such as Craft Entries. A common use case here would be if you wanted to allow admins to attach a specific Freeform form to a Craft Entry that corresponds to the entry, and then automate loading the form along with the entry in the front end templates.

Creating the Field

Creating a Freeform Form field is done just like any other fieldtype, here's an overview of the process:

Go to the Settings area in Craft control panel. Click on Fields.

Click the New field button in the top right corner.

Name the field as you wish. For example: Related Form with a handle of relatedForm.

For the Field Type option, select Freeform Form from the list.

Selection Label is the text that will appear on the button which opens the Freeform Form selection pop-up dialog.

Click the Save button in the top right corner to save the new field.

Finished!

Your Freeform Form field is now available to be assigned to other sections.

Template Properties

The following template properties are available for the Form field type:

name - outputs the name of the form
handle - outputs the handle of the form
id - outputs the unique ID of the form
description - outputs the description of the form
render() - outputs the full form, rendering it with the Formatting Template specified in the form builder for the form.

Examples

Freeform Form Field in Entries

An example of template code you would use to display a Freeform form (with field handle of myFreeformFieldName) that is attached to a Craft Entry would look something like this:

{% for entry in craft.entries.section('news').limit(10) %}
    <div class="entry">
        <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
        {{ entry.summary }}
        {% if entry.myFreeformFieldName is defined and entry.myFreeformFieldName is not empty %}
            <h3>{{ entry.myFreeformFieldName.name }}</h3>
            {{ entry.myFreeformFieldName.render() }}
        {% endif %}
    </div>
{% endfor %}

1
2
3
4
5
6
7
8
9
10

Freeform Form Field in Matrix field

If you're using the Freeform Form field inside a Matrix field, your code might look something like this:

<div class="entry">
    <h1>{{ entry.title }}</h1>
    {{ entry.body }}
    {% for block in entry.myMatrixField.all() %}
        {% if block.type == "form" %}
            <h3>{{ block.myFreeformFieldName.name }}</h3>
            {{ block.myFreeformFieldName.render }}
            <p>{{ block.someOtherField }}</p>
        {% elseif block.type == "whatever" %}
            <p>Whatever</p>
        {% endif %}
    {% endfor %}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

Passing Entry Data into Freeform Fields

If you'd like to automatically pass content from another element (such as a Craft Entry) into Freeform field(s), you'd have to use the value parameter as part of the Template Overrides feature inside your formatting template.

For example, if you want to pass the title of an entry to a Freeform field, and the entry slug is in the second segment of your URL, you should set that in your formatting template. Also, be sure to include a hidden Freeform field in your form (in this case called entryTitle). Your template code might look something like this:

{% set entry = craft.entries.slug(craft.app.request.getSegment(2)).one() %}

{{ form.renderTag({
    fields: {
        "entryTitle": {
            value: entry.title
        },
    }
}) }}

1
2
3
4
5
6
7
8
9

# Form Element Field Type LitePro

# Overview

# Creating the Field

# Template Properties

# Examples

# Freeform Form Field in Entries

# Freeform Form Field in Matrix field

# Passing Entry Data into Freeform Fields