Nomad Forms Quick Reference Guide

Form Validation Basics

Required Fields

<input
  data-val="true"
  data-val-required="The Name field is required."
  id="Name"
  name="Name"
  type="text" />

• data-val="true" - Enables validation for this field
• data-val-required="..." - Custom error message shown when field is empty

Email Validation

<input
  data-val="true"
  data-val-email="The Email field is not a valid e-mail address."
  data-val-required="The Email field is required."
  id="Email"
  name="Email"
  type="text" />

• data-val-email="..." - Validates email format and shows custom error message

Error Message Display

<span
  class="field-validation-valid"
  data-valmsg-for="Name"
  data-valmsg-replace="true"></span>

• data-valmsg-for="Name" - Links error message to field with matching name attribute
• data-valmsg-replace="true" - Replaces span content with error message
• Must match the name attribute of the associated input

Form Handling

Default Mail Handler

<input type="hidden" name="mhc" value="form-contact" />

• Uses default plaintext email template with standard label/value output

Custom Mail Handler

<input 
  type="hidden"
  name="mhid" 
  value="01234567-a1b1-a2b2-c2c3-c9f4b45b0211" />

• Change name from mhc to mhid
• Set value to the page ID of your custom mail handler
• Find ID in the URL: https://nops.prod.nomad.site/aaaa/mailhandlers/edit/01234567-a1b1-a2b2-c2c3-c9f4b45b0211

Form Structure

Basic Pattern

<div class="control-group">
  <label class="control-label" for="FieldName">Field Label</label>
  <div class="controls">
    <input ... />
    <span class="field-validation-valid" data-valmsg-for="FieldName" data-valmsg-replace="true"></span>
  </div>
</div>

Common Form Elements

Text Input

<input
  data-val="true"
  data-val-required="Error message"
  id="Name"
  name="Name"
  type="text" />

Dropdown Select

<select
  data-val="true"
  data-val-required="Error message"
  id="State"
  name="State">
  <option value="">--Please Select--</option>
  <option value="AL">Alabama</option>
  <!-- more options -->
</select>

Textarea

<textarea
  data-val="true"
  id="Message"
  name="Message"
  class="span5"
  rows="5"></textarea>

Submit Button

<button type="submit" class="btn btn-primary">Send</button>

Tips & Best Practices

1. Consistent naming - Always ensure input id/name matches the data-valmsg-for value
2. Blank option for dropdowns - Include a blank/prompt option for required selects
3. Form method - Use <form method="post"> for all data submission forms
4. Classes - Use Bootstrap-compatible classes: control-group, controls, btn-primary
5. Validation - Always include error message spans even for non-required fields

Validation Attributes Reference

• data-val="true" - Enables validation
• data-val-required="..." - Required field validation
• data-val-email="..." - Email format validation
• data-valmsg-for="..." - Links error message to input
• data-valmsg-replace="true" - Replaces span content with error

Mail Handler Options

Google reCAPTCHA Implementation

Adding reCAPTCHA to Forms

<div class="control-group">
  <div class="controls">
    <!-- For reCAPTCHA v2 -->
    <div class="captcha"></div>
    
    <!-- OR for reCAPTCHA v3 -->
    <div class="captcha-v3"></div>
  </div>
</div>

• Add just one of these divs to your form to enable reCAPTCHA
• The actual reCAPTCHA elements are automatically populated by the core software
• If both v2 and v3 are configured, the system will use the latest version (v3)

reCAPTCHA Configuration

Site administrators must configure reCAPTCHA in the admin area with:

1. For reCAPTCHA v2:
   • Recaptcha Site Key v2
   • Recaptcha Secret Key v2
2. For reCAPTCHA v3:
   • Recaptcha Site Key v3
   • Recaptcha Secret Key v3
   • Recaptcha Site Resource Id (optional)
   • Recaptcha Min Score V3 (default: 0)

Note: No additional JavaScript or manual configuration is needed in the form itself - simply add the appropriate div class and ensure reCAPTCHA is configured in the admin area.