1

I am trying to figure out the code that will allow me to change the class of the input field when the field is required. I have created css that will change the field color and can't figure out how to set this up correctly in the new FreeForm composer template.

I have set this up to add "* required" on the field name:

<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" style="font-size: 0.9em"><i>* required</i></span>{/if}
</label>
2
  • Can you post what the HTML should look like when it's not required, and what it should look like when it is required?
    – kmgdev
    Oct 31 '13 at 23:13
  • I am still not getting this to work. We were able to do this before we converted the forms to Composer. Here is a link to a form that still has the old forms. [link]msj.edu/marketing/contact-us-form and here is the a link to the new form.[link] msj.edu/contact/contact-us/contact-form You will notice that I can't get the blue hash background to show up in the required input areas. Nov 7 '13 at 20:28
3

Best way to do this is to add the class to a containing element like this:

<div  {if composer:field_required}class="required"{/if}>
    <label></label>
    <input>
</div>

Then target the input field with css like this:

.required input {
    border: 1px solid red;
}

You can also use this for your "* required" copy... Change

{if composer:field_required}
    <span class="required_item" style="font-size: 0.9em">
        <i>* required</i>
    </span>
{/if}

to

<span class="required_item" style="font-size: 0.9em">
    <i>* required</i>
</span>

And set CSS to this:

.required_item {
    display: none;
}
.required .required_item {
    display: block;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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