Automatic Required Field Indicator

I am using Chronoforms 3.x, and would like to flag my required fields in some consistent, hopefully "automatic" way.

Based on Bob's answer to http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=22&t=20307&p=61668&hilit=required+field#p61668 and not wanting to hijack that thread, I am posting a separate inquiry.

What is best practice for doing this? Say, the red asterisk like the OP of that thread wanted?, either before or after the field name, either with or without a space?

Is the suggestion to use inline CSS or CSS in the head of the form?

For starters, I'll just put in the asterisks manually, but then I'll have to hack in the legend for it manually, too, it seems.

It would be nice to have a couple of parameters, either system wide, or per-form, as listed above, I think.

Thanks for any clarification.

Hi kenlyle,

I don't think that there is any standard for this. One simple solution is to use the 'required' class to mark out the input boxes in some way but this isn't always the most elegant. Adding an asterix to the label (or making it bold or coloured) is probably next most common.

You can add an explanation in a plain text element.

Bob

Strongly agree with the OP here. For a Forms component, this is a very core issue.

A couple of global configuration options for how to mark required fields (asterisk seems most common), and a color picker would seem to solve it rather elegantly.

For now, I am using tooltips to indicate required status, and will probably go back and add asterisks manually.

So, there are lots of ways to indicate required fields to the user, but it would still be nice to have an "automatic" "standard", configurable.

Thanks!

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Name</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Required" id="text_1" name="name" type="text" /><span><strong><font color="#ff0000"> *</font></strong></span>
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Required" id="text_2" name="email" type="text" /><span><strong><font color="#ff0000"> *</font></strong></span>
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Message</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Obavezno popuniti" id="text_3" name="text" type="text" /><span><strong><font color="#ff0000"> *</font></strong></span>
  
  </div>
  <div class="cfclear"> </div>
</div>

  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label" style="width: 150px;">Verification</label>
    <span>{imageverification}</span> 
    
    </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Sent" name="{cf_name}" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>