Possible to add type attributes when using FreeForm Composer

Question

Is it possible to add type attributes to inputs when using the FreeForm Composer Templates? If I hard-code a form I can add type="email" or type="tel" but cant see any way to do this when using Composer.

Additionally if I add attr:required="required" to {freeform:field:{composer:field_name} the output is required="required" which although correct for xhtml, is not correct for HTML5 - should simply be 'required'. Is there a way to alter this?

Answer 1

It's also possible to use an add-on like CE String to circumvent this:

{exp:ce_str:ing replace='required="required"|required'}
{exp:freeform:form}
{freeform:field:myfield
 attr:required="required"
}
{/exp:freeform:form}
{/exp:ce_str:ing}

will output

<input type="text" name="myfield" value="" id="freeform_myfield" required>

Answer 2

You would have to first create a custom Composer Template (can be done from the CP or using the {exp:freeform:composer} tag as a tag pair with Composer Template code inside), and manually create/hand-code your field output when your custom field is called. For example, based on the default Composer Template code, there is this conditional:

...
{if:else}
    <p>{composer:field_output}</p>
{/if}

Which you could change to

...
{if:else}
    {if composer:field_name == "my_email_field"}
        <input type="email" name="my_email_field" placeholder="Enter email" />
    {if:else} 
        <p>{composer:field_output}</p>
    {/if}
{/if}

The other alternative is to use javascript to change the type="" when the form is loaded from your template. Again, you would need to target the fields that you want to change.

Finally, you could file a Feature Request, for some setting in the CP for example, under the specific add-on category here: http://support.solspace.com/support/discussions. It'll also give other users the option to vote up the feature request, and help us prioritize features to add in upcoming versions of this add-on.

As for your sub-question, there's not much that can be done with required="required", short of using javascript to format it the way you want. The other option could be to file a Feature Request for this as well.

Answer 3

A similar approach if using EE3, you can use Streeng and wrap this around form code:

{exp:streeng find='required="required"' replace="required"}
    {exp:freeform:form
        attr:required="required"
    }
        ...
    {/exp:freeform:form}
{/exp:streeng}