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>
Improve this question
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} Commented 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"} Commented Sep 24, 2015 at 11:16

2 Answers 2

Reset to default
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}
Improve this answer
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 */ }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.