1

Is there an easy way to apply classes to Freeform Pro form elements in composer mode?

I have gone through several SO posts (& blog posts including this helpful one) however haven't been able to find a solution to cover all elements.

The general suggestion appears to be:

Replace

{composer:field_output}

With

{freeform:field:{composer:field_name} attr:class="form-control"}

Which works well until you get to <select> & other HTML elements:

enter image description here

Note: The orange highlight is where a select field type should be and the red is a random tag that I can't seem to work out where it's coming from...

The only way I can get all elements to display correctly is by using the standard syntax "{composer:field_output}" and then jQuery to add classes to elements:

enter image description here

//jQuery
$('.composer-form input[type="text"],.composer-form select,.composer-form textarea').addClass("form-control");
$('.composer-form input[type="submit"]').addClass("btn btn-primary");

If there isn't an easy way to apply relevant classes to elements using conditional statements, I will stick with the jQuery option however I really hope it's something simply I am missing in my composer template (see below for the template code).

Any help, advice or insight will be greatly appreciated.

Composer (Bootstrap 3) template:

<div class="form-group composer-form">
{composer:page}
    {composer:rows}
            <div class="row">
        {composer:columns}
                <div class="{if composer:column_total == 1}col-md-12{/if}{if composer:column_total == 2}col-md-6{/if}{if composer:column_total == 3}col-md-4{/if}{if composer:column_total == 4}col-md-3{/if}">
                {if composer:field_total == 0}

                {/if}
            {composer:fields}
                {if composer:field_label}
                    {if composer:field_type == 'nonfield_captcha'}
                        {if freeform:captcha}
                        <p>
                            <strong>{composer:field_label}</strong>
                        </p>
                        {/if}
                    {if:else}
                        <label class="field_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}
                {if composer:field_output}
                    {if composer:field_type == 'nonfield_captcha'}
                        {if freeform:captcha}
                                {freeform:captcha}<br />
                                <input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" />
                        {/if}

                    {if:else}

                        {freeform:field:{composer:field_name} attr:class="form-control"}

                    {/if}
                {/if}
            {/composer:fields}
                </div>
        {/composer:columns}
            </div>
    {/composer:rows}
{/composer:page}
</div>
2
  • What version of EE and Freeform are you using? Please provide exact version numbers. Fields worked fine in my testing (EE 2.10.1, FF 4.2.2), except for one where {composer:field_name} is empty. I would add a conditional to hide those: {if composer:field_name != ""}{freeform:field:{composer:field_name} attr:class="form-control"}{/if}
    – Solspace
    Sep 24, 2015 at 2:31
  • ExpressionEngine version: 2.10.1 & Freeform Pro: 4.2.3 Can you supply a screenshot of other HTML form fields (select, checkboxes, radio etc) displaying with custom classes added using the suggested method: {freeform:field:{composer:field_name} attr:class="form-control"}
    – Dan
    Sep 24, 2015 at 11:16

2 Answers 2

0

It should be done like so:

{composer:fields}
                {if composer:field_output}
                    {if composer:field_type == 'nonfield_title'}
                        <h2>{composer:field_output}</h2>
                    {if:elseif composer:field_type == "text"}
                        <fieldset>
                        <label class="field_label no-sidebar" {if composer:field_name != ''}for="{composer:field_name}"{/if}>
                            {composer:field_label}
                            {if composer:field_required}<span class="required" required aria-required="true">*</span>{/if}
                        </label>
                        <input type="text" class="input" name="{composer:field_name}" placeholder="{composer:field_label}"></fieldset>
                    {/if}
                    {if:else}
                        <fieldset>{composer:field_output}</fieldset>
                    {/if}
                {/if}
{/composer:fields}
0

You could always add some extra CSS to target input fields, for instance:

.composer-form input[type='checkbox'] { /* your styles */ }
.composer-form input[type='text'] { /* your styles */ }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.