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:
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:
//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>
{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}