Creating a Freeform Pro custom template

For our latest ExpressionEngine project we used Freeform Pro by Solspace. This plugin gives you the flexibility and freedom to create any type of form you want.

On this project, we are also using Foundation as our base frontend framework. Mostly for it's grid system. We wanted to make the output of Freeform Pro so that is fits right in to the Foundation grid system.

Ofcourse, by changing some classes, you can easely convert this into a Bootstrap template or a custom one.

Creating a custom output

Where?

After you have installed the Freeform Pro plugin, you should go to modules > Freeform Pro > Composer Templates. Here you can choose to add a new template.

Setup

Give the template a proper label and name. All the way down the page is where the magic will happen. Your code for the custom output should be placed in the Composer Template field.

The code

Start the composer page and provide a div with the class "row" for each form-row.


{composer:page}
    {composer:rows}
        <div class="row">
            ...
        </div>
    {/composer:rows}
{/composer:page}

Now add a div with the class "column" for each form-column in your form-row. By using the Variable "column_total" we can deside whitch column class to add.


{composer:page}
    {composer:rows}
        <div class="row">
            {composer:columns}
                <div class="columns{if composer:column_total == 2} medium-6{/if}{if composer:column_total == 3} medium-4{/if}{if composer:column_total == 4} medium-3{/if}">
                    ...
                </div>
            {/composer:columns}
        </div>
    {/composer:rows}
{/composer:page}

Now add your fields to the mix. By using the freeform:field field output, you can add extra attributes such as a placeholder or a extra class.


{composer:page}
    {composer:rows}
        <div class="row">
            {composer:columns}
                <div class="columns{if composer:column_total == 2} medium-6{/if}{if composer:column_total == 3} medium-4{/if}{if composer:column_total == 4} medium-3{/if}">
                    {composer:fields}
                        {if composer:field_label}
                            <label{if composer:field_name != ''} for="freeform_{composer:field_name}"{/if}>
                                {composer:field_label}{if composer:field_required}<span class="required_item">*</span>{/if}
                            </label>
                        {/if}
                        {if composer:field_output}
                            {if composer:field_type == 'nonfield_title'}
                                <h4>{composer:field_output}</h4>
                            {if:else}
                                {freeform:field:{composer:field_name} attr:placeholder="{composer:field_label}" attr:class="form-control"}
                            {/if}
                        {/if}
                    {/composer:fields}
                </div>
            {/composer:columns}
        </div>
    {/composer:rows}
{/composer:page}

Using a custom template

After you created your template, you can now use it in all your forms. When composing your form, you can select your custom theme in the selectbox on the upper-left corner.

That's all. Have fun :)