0

I love the composer feature of FF Pro, but the problem I'm having is outputting custom markup for my form elements.

Inputs and Textarea's are no problem. But when I come to outputting Checkboxes or Radios I can't figure out how to do my own custom markup. Is this even possible?

The code to output the fields is this:

{composer:field_output}

But with Inputs I can do this:

{if composer:field_type == "text"}
    <span class="field">
        <label>{composer:field_label}</label>
        <input type="text" name="{composer:field_name}">
    </span>
{/if}

Which is perfect for text inputs, but there is no tags (which I can see) to output the Radio / Checkbox values, or even options inside a select menu.

I also can't understand how to use the "Composer Edit Form", and have values placed inside the value parameter... Without again... just getting FF to generate the markup for me.

The reason I need to edit the markup, is to add ID's and Classes to the form fields.

1 Answer 1

1

You can add ids and classes to any form field with the attr: prefix.

{freeform:field:my_text_field attr:id="myId" attr:class="myClass"}

So in composer:

{freeform:field:{composer:field_name} attr:id="myId" attr:class="myClass"}

If you need it per item in radios and checkboxes, you can also adjust the wrapper attributes as params on {freeform:field:FIELD_NAME} :

http://www.solspace.com/docs/freeform/default_fieldtypes/#checkbox_group http://www.solspace.com/docs/freeform/default_fieldtypes/#radio

1
  • This doesn't seem to work with submit buttons. I have tried several ways and lastly had tried almost exactly what you have there with no luck. {if composer:field_type == 'nonfield_submit'} {freeform:field:{composer:field_name} attr:class="green"} {/if} I also tried: {if composer:field_type == 'nonfield_submit' AND composer:field_name} {freeform:field:{composer:field_name} attr:class="green"} {/if} Which got me a little closer, but still no dice.
    – W3bGuy
    Jan 29, 2014 at 21:32

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.