<form class="ambassadors js-ambassadors u-page-width-max-restricted">
    <h4 class="registration-title">Personal info</h4>
    <div class="ambassadors__form-items ambassadors__form-items--personal-info">
        <div class="form-item form-item--text form-item--ambassadors-first-name form-item--required">

            <label for="ambassadors-first-name" class="label label--text label--required">
      First name
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" required aria-required="true" title="First name (required)">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-last-name form-item--required">

            <label for="ambassadors-last-name" class="label label--text label--required">
      Last name
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="text"  name="last-name" class="input input--text" autocomplete="last-name" required aria-required="true" title="Last name (required)">
    
      </label>

        </div>
        <div class="form-item form-item--email form-item--ambassadors-email form-item--required">

            <label for="ambassadors-email" class="label label--email label--required">
      Email address
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="email"  name="email" class="input input--email" autocomplete="email" required aria-required="true" title="Email address (required)">
    
      </label>

        </div>
        <div class="form-item form-item--tel form-item--ambassadors-phone form-item--required">

            <label for="ambassadors-phone" class="label label--tel label--required">
      Phone number
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="tel"  name="phone" class="input input--tel" autocomplete="tel" required aria-required="true" title="Phone number (required)">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-city form-item--required">

            <label for="ambassadors-city" class="label label--text label--required">
      City
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="text"  name="city" class="input input--text" autocomplete="city" required aria-required="true" title="City (required)">
    
      </label>

        </div>
        <div class="form-item form-item--select form-item--required">
            <div class="select-wrapper">
                <label for="ambassadors-state" class="label label--required">
        State
        <select id="ambassadors-state" name="state" class="select js-select" autocomplete="state">
          <option value="" >Select</option>
          <option value="AL" >Alabama</option>
          <option value="AK" >Alaska</option>
          <option value="AS" >American Samoa</option>
          <option value="AZ" >Arizona</option>
          <option value="AR" >Arkansas</option>
          <option value="CA" >California</option>
          <option value="CO" >Colorado</option>
          <option value="CT" >Connecticut</option>
          <option value="DE" >Delaware</option>
          <option value="DC" >District Of Columbia</option>
          <option value="FM" >Federated States Of Micronesia</option>
          <option value="FL" >Florida</option>
          <option value="GA" >Georgia</option>
          <option value="GU" >Guam</option>
          <option value="HI" >Hawaii</option>
          <option value="ID" >Idaho</option>
          <option value="IL" >Illinois</option>
          <option value="IN" >Indiana</option>
          <option value="IA" >Iowa</option>
          <option value="KS" >Kansas</option>
          <option value="KY" >Kentucky</option>
          <option value="LA" >Louisiana</option>
          <option value="ME" >Maine</option>
          <option value="MH" >Marshall Islands</option>
          <option value="MD" >Maryland</option>
          <option value="MA" >Massachusetts</option>
          <option value="MI" >Michigan</option>
          <option value="MN" >Minnesota</option>
          <option value="MS" >Mississippi</option>
          <option value="MO" >Missouri</option>
          <option value="MT" >Montana</option>
          <option value="NE" >Nebraska</option>
          <option value="NV" >Nevada</option>
          <option value="NH" >New Hampshire</option>
          <option value="NJ" >New Jersey</option>
          <option value="NM" >New Mexico</option>
          <option value="NY" >New York</option>
          <option value="NC" >North Carolina</option>
          <option value="ND" >North Dakota</option>
          <option value="MP" >Northern Mariana Islands</option>
          <option value="OH" >Ohio</option>
          <option value="OK" >Oklahoma</option>
          <option value="OR" >Oregon</option>
          <option value="PW" >Palau</option>
          <option value="PA" >Pennsylvania</option>
          <option value="PR" >Puerto Rico</option>
          <option value="RI" >Rhode Island</option>
          <option value="SC" >South Carolina</option>
          <option value="SD" >South Dakota</option>
          <option value="TN" >Tennessee</option>
          <option value="TX" >Texas</option>
          <option value="UT" >Utah</option>
          <option value="VT" >Vermont</option>
          <option value="VI" >Virgin Islands</option>
          <option value="VA" >Virginia</option>
          <option value="WA" >Washington</option>
          <option value="WV" >West Virginia</option>
          <option value="WI" >Wisconsin</option>
          <option value="WY" >Wyoming</option>
        </select>
        </label>
            </div>
        </div>
        <div class="form-item form-item--text form-item--ambassadors-zip-code form-item--required">

            <label for="ambassadors-zip-code" class="label label--text label--required">
      ZIP code
        <span class="form-item__required" role="presentation">*</span>
    
        <input type="text"  name="zip-code" class="input input--text" autocomplete="zip-code" required aria-required="true" title="ZIP code (required)">
    
      </label>

        </div>
        <div class="form-item form-item--select form-item--required">
            <div class="select-wrapper">
                <label for="ambassadors-country" class="label label--required">
        Country
        <select id="ambassadors-country" name="country" class="select js-select" autocomplete="country">
          <option value="" >Select</option>
          <option value="USA" >United States</option>
          <option value="AUS" >Australia</option>
          <option value="CAN" >Canada</option>
          <option value="FRA" >France</option>
          <option value="GER" >Germany</option>
          <option value="HK" >Hong Kong</option>
          <option value="IND" >India</option>
          <option value="IRE" >Ireland</option>
          <option value="ITA" >Italy</option>
          <option value="MEX" >Mexico</option>
          <option value="NZE" >New Zealand</option>
          <option value="SAF" >South Africa</option>
          <option value="SPA" >Spain</option>
          <option value="SWE" >Sweden</option>
          <option value="UAE" >United Arab Emirates</option>
          <option value="UK" >United Kingdom</option>
        </select>
        </label>
            </div>
        </div>
    </div>
    <h4 class="registration-title">Online Presence</h4>
    <p>Please fill out as many as possible.</p>
    <div class="ambassadors__form-items ambassadors__form-items--online-presence">
        <div class="form-item form-item--text form-item--ambassadors-instagram">

            <label for="ambassadors-instagram" class="label label--text">
      Instagram
        
    
        <input type="text"  name="instagram" class="input input--text" autocomplete="instagram">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-facebook">

            <label for="ambassadors-facebook" class="label label--text">
      Facebook
        
    
        <input type="text"  name="facebook" class="input input--text" autocomplete="facebook">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-twitter">

            <label for="ambassadors-twitter" class="label label--text">
      Twitter
        
    
        <input type="text"  name="twitter" class="input input--text" autocomplete="twitter">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-other">

            <label for="ambassadors-other" class="label label--text">
      Other
        
    
        <input type="text"  name="other" class="input input--text" autocomplete="other">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-website">

            <label for="ambassadors-website" class="label label--text">
      Website
        
    
        <input type="text"  name="website" class="input input--text" autocomplete="website">
    
      </label>

        </div>
        <div class="form-item form-item--text form-item--ambassadors-blog">

            <label for="ambassadors-blog" class="label label--text">
      Blog
        
    
        <input type="text"  name="blog" class="input input--text" autocomplete="blog">
    
      </label>

        </div>
    </div>
    <h4 class="registration-title">Ambassador Program</h4>
    <div class="ambassadors__form-items ambassadors__form-items--online-presence">
        <div class="form-item form-item--select form-item--required">
            <div class="select-wrapper">
                <label for="ambassadors-program" class="label label--required">
        Ambassador program
        <select id="ambassadors-program" name="program" class="select js-select">
          <option value="" >Select</option>
          <option value="professional" >Professional Athletes</option>
          <option value="fishing" >Fishing/Marine/Sailing</option>
          <option value="lifestyle" >Lifestyle</option>
          <option value="industry-pro" >Industry Pro Deal</option>
        </select>
        </label>
            </div>
        </div>
    </div>
    <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="professional">
        <h4>Professional Athletes</h4>
        <div class="ambassadors__form-items">
            <div class="form-item form-item--text form-item--ambassadors-sport form-item--required">

                <label for="ambassadors-sport" class="label label--text label--required">
        Sport
          <span class="form-item__required" role="presentation">*</span>
      
          <input type="text"  name="sport" class="input input--text" autocomplete="sports" required aria-required="true" title="Sport (required)">
      
        </label>

            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-program" class="label label--required">
          Is this sport your only profession?
          <select id="ambassadors-program" name="program" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-currently-wear" name="currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-prescription-or-sunglasses" name="prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                <textarea id="ambassadors-short-bio" class="textarea"></textarea>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-why-maui-jim" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                <textarea id="ambassadors-why-maui-jim" class="textarea"></textarea>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-accomplishments" class="label label--required">Please list any accomplishments in your sport.</label>
                <textarea id="ambassadors-accomplishments" class="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="fishing">
        <h4>Fishing/Marine/Sailing</h4>
        <div class="ambassadors__form-items">
            <div class="form-item form-item--text form-item--ambassadors-fms-specialty form-item--required">

                <label for="ambassadors-fms-specialty" class="label label--text label--required">
        Specialty
          <span class="form-item__required" role="presentation">*</span>
      
          <input type="text"  name="fms-specialty" class="input input--text" autocomplete="fms-specialty" required aria-required="true" title="Specialty (required)">
      
        </label>

            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-fms-only-profession" class="label label--required">
          Is this your only profession?
          <select id="ambassadors-fms-only-profession" name="fms-only-profession" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--text form-item--ambassadors-fms-days-on-water form-item--required">

                <label for="ambassadors-fms-days-on-water" class="label label--text label--required">
        How many days a week are you out on the water?
          <span class="form-item__required" role="presentation">*</span>
      
          <input type="text"  name="fms-days-on-water" class="input input--text" autocomplete="fms-days-on-water" required aria-required="true" title="How many days a week are you out on the water? (required)">
      
        </label>

            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-fms-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-fms-currently-wear" name="fms-currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-fms-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-fms-prescription-or-sunglasses" name="fms-prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-fms-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                <textarea id="ambassadors-fms-short-bio" class="textarea"></textarea>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-fms-why" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                <textarea id="ambassadors-fms-why" class="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="lifestyle">
        <h4>Lifestyle</h4>
        <div class="ambassadors__form-items">
            <div class="form-item form-item--text form-item--ambassadors-ls-specialty form-item--required">

                <label for="ambassadors-ls-specialty" class="label label--text label--required">
        Specialty or Profession
          <span class="form-item__required" role="presentation">*</span>
      
          <input type="text"  name="ls-specialty" class="input input--text" autocomplete="ls-specialty" required aria-required="true" title="Specialty or Profession (required)">
      
        </label>

            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-ls-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-ls-currently-wear" name="ls-currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <label for="ambassadors-ls-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-ls-prescription-or-sunglasses" name="ls-prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                </div>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-ls-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                <textarea id="ambassadors-ls-short-bio" class="textarea"></textarea>
            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-ls-why" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                <textarea id="ambassadors-ls-why" class="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="industry-pro">
        <h4>Industry Pro Deal</h4>
        <div class="ambassadors__form-items">
            <div class="form-item form-item--text form-item--ambassadors-pro-industry form-item--required">

                <label for="ambassadors-pro-industry" class="label label--text label--required">
        Industry
          <span class="form-item__required" role="presentation">*</span>
      
          <input type="text"  name="pro-industry" class="input input--text" autocomplete="pro-industry" required aria-required="true" title="Industry (required)">
      
        </label>

            </div>
            <div class="form-item form-item--textarea form-item--required">
                <label for="ambassadors-pro-short-bio" class="label label--required">Please enter a short bio about yourself or your company.</label>
                <textarea id="ambassadors-pro-short-bio" class="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="ambassadors__actions">
        <div class="form-item form-item--checkbox">
            <input type="checkbox" id="ambassadors-terms-and-conditions" name="ambassadors-terms-and-conditions" class="checkbox checkbox--default">
            <label for="ambassadors-terms-and-conditions">
        
        I agree to the <a href='#'>Terms and Conditions</a> of the website
        
      </label>
        </div>
        <button class="button button--primary">Submit</button>
    </div>
</form>
<form class="ambassadors js-ambassadors u-page-width-max-restricted">
  <h4 class="registration-title">Personal info</h4>
  <div class="ambassadors__form-items ambassadors__form-items--personal-info">
    {{> @input type="text" id="ambassadors-first-name" name="first-name" label="First name" autocomplete="given-name" required=true }}
    {{> @input type="text" id="ambassadors-last-name" name="last-name" label="Last name" autocomplete="last-name" required=true }}
    {{> @input type="email" id="ambassadors-email" name="email" label="Email address" autocomplete="email" required=true }}
    {{> @input type="tel" id="ambassadors-phone" name="phone" label="Phone number" autocomplete="tel" required=true }}
    {{> @input type="text" id="ambassadors-city" name="city" label="City" autocomplete="city" required=true }}
    {{> @select-normal id="ambassadors-state" name="state" label="State" options=options.states autocomplete="state" required=true }}
    {{> @input type="text" id="ambassadors-zip-code" name="zip-code" label="ZIP code" autocomplete="zip-code" required=true }}
    {{> @select-normal id="ambassadors-country" name="country" label="Country" options=options.countries autocomplete="country" required=true }}
  </div>
  <h4 class="registration-title">Online Presence</h4>
  <p>Please fill out as many as possible.</p>
  <div class="ambassadors__form-items ambassadors__form-items--online-presence">
    {{> @input type="text" id="ambassadors-instagram" name="instagram" label="Instagram" autocomplete="instagram" required=false }}
    {{> @input type="text" id="ambassadors-facebook" name="facebook" label="Facebook" autocomplete="facebook" required=false }}
    {{> @input type="text" id="ambassadors-twitter" name="twitter" label="Twitter" autocomplete="twitter" required=false }}
    {{> @input type="text" id="ambassadors-other" name="other" label="Other" autocomplete="other" required=false }}
    {{> @input type="text" id="ambassadors-website" name="website" label="Website" autocomplete="website" required=false }}
    {{> @input type="text" id="ambassadors-blog" name="blog" label="Blog" autocomplete="blog" required=false }}
  </div>
  <h4 class="registration-title">Ambassador Program</h4>
  <div class="ambassadors__form-items ambassadors__form-items--online-presence">
    {{> @select-normal id="ambassadors-program" name="program" label="Ambassador program" options=options.program required=true }}
  </div>
  <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="professional">
    <h4>Professional Athletes</h4>
    <div class="ambassadors__form-items">
      {{> @input type="text" id="ambassadors-sport" name="sport" label="Sport" autocomplete="sports" required=true }}
      {{> @select-normal id="ambassadors-program" name="program" label="Is this sport your only profession?" options=options.professional.isOnlyProfession required=true }}
      {{> @select-normal id="ambassadors-currently-wear" name="currently-wear" label="Do you currently wear Maui Jim sunglasses?" options=options.professional.currentlyWearMauiJim required=true }}
      {{> @select-normal id="ambassadors-prescription-or-sunglasses" name="prescription-or-sunglasses" label="Do you currently wear prescription sunglasses or sunglasses?" options=options.professional.prescriptionOrEyeglasses required=true }}
      {{> @input--textarea id="ambassadors-short-bio" name="short-bio" label="Please enter a short bio about yourself." required=true }}
      {{> @input--textarea id="ambassadors-why-maui-jim" name="why-maui-jim" label="Why do you want to become a Maui Jim Ambassador?" required=true }}
      {{> @input--textarea id="ambassadors-accomplishments" name="accomplishments" label="Please list any accomplishments in your sport." required=true }}
    </div>
  </div>
  <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="fishing">
    <h4>Fishing/Marine/Sailing</h4>
    <div class="ambassadors__form-items">
      {{> @input type="text" id="ambassadors-fms-specialty" name="fms-specialty" label="Specialty" autocomplete="fms-specialty" required=true }}
      {{> @select-normal id="ambassadors-fms-only-profession" name="fms-only-profession" label="Is this your only profession?" options=options.fms.isOnlyProfession required=true }}
      {{> @input type="text" id="ambassadors-fms-days-on-water" name="fms-days-on-water" label="How many days a week are you out on the water?" autocomplete="fms-days-on-water" required=true }}
      {{> @select-normal id="ambassadors-fms-currently-wear" name="fms-currently-wear" label="Do you currently wear Maui Jim sunglasses?" options=options.fms.currentlyWearMauiJim required=true }}
      {{> @select-normal id="ambassadors-fms-prescription-or-sunglasses" name="fms-prescription-or-sunglasses" label="Do you currently wear prescription sunglasses or sunglasses?" options=options.fms.prescriptionOrEyeglasses required=true }}
      {{> @input--textarea id="ambassadors-fms-short-bio" name="fms-short-bio" label="Please enter a short bio about yourself." required=true }}
      {{> @input--textarea id="ambassadors-fms-why" name="fms-why" label="Why do you want to become a Maui Jim Ambassador?" required=true }}
    </div>
  </div>
  <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="lifestyle">
    <h4>Lifestyle</h4>
    <div class="ambassadors__form-items">
      {{> @input type="text" id="ambassadors-ls-specialty" name="ls-specialty" label="Specialty or Profession" autocomplete="ls-specialty" required=true }}
      {{> @select-normal id="ambassadors-ls-currently-wear" name="ls-currently-wear" label="Do you currently wear Maui Jim sunglasses?" options=options.lifestyle.currentlyWearMauiJim required=true }}
      {{> @select-normal id="ambassadors-ls-prescription-or-sunglasses" name="ls-prescription-or-sunglasses" label="Do you currently wear prescription sunglasses or sunglasses?" options=options.lifestyle.prescriptionOrEyeglasses required=true }}
      {{> @input--textarea id="ambassadors-ls-short-bio" name="ls-short-bio" label="Please enter a short bio about yourself." required=true }}
      {{> @input--textarea id="ambassadors-ls-why" name="ls-why" label="Why do you want to become a Maui Jim Ambassador?" required=true }}
    </div>
  </div>
  <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="industry-pro">
    <h4>Industry Pro Deal</h4>
    <div class="ambassadors__form-items">
      {{> @input type="text" id="ambassadors-pro-industry" name="pro-industry" label="Industry" autocomplete="pro-industry" required=true }}
      {{> @input--textarea id="ambassadors-pro-short-bio" name="pro-short-bio" label="Please enter a short bio about yourself or your company." required=true }}
    </div>
  </div>
  <div class="ambassadors__actions">
    {{> @checkbox modifier="default" id="ambassadors-terms-and-conditions" name="ambassadors-terms-and-conditions" label="I agree to the <a href='#'>Terms and Conditions</a> of the website" }}
    {{> @buttons modifier="primary" buttonValue="Submit" }}
  </div>
</form>
{
  "options": {
    "program": [
      {
        "value": "",
        "label": "Select"
      },
      {
        "value": "professional",
        "label": "Professional Athletes"
      },
      {
        "value": "fishing",
        "label": "Fishing/Marine/Sailing"
      },
      {
        "value": "lifestyle",
        "label": "Lifestyle"
      },
      {
        "value": "industry-pro",
        "label": "Industry Pro Deal"
      }
    ],
    "professional": {
      "isOnlyProfession": {
        "yes": "Yes",
        "no": "No"
      },
      "currentlyWearMauiJim": {
        "yes": "Yes",
        "no": "No"
      },
      "prescriptionOrEyeglasses": {
        "yes": "Yes",
        "no": "No"
      }
    },
    "fms": {
      "isOnlyProfession": {
        "yes": "Yes",
        "no": "No"
      },
      "currentlyWearMauiJim": {
        "yes": "Yes",
        "no": "No"
      },
      "prescriptionOrEyeglasses": {
        "yes": "Yes",
        "no": "No"
      }
    },
    "lifestyle": {
      "currentlyWearMauiJim": {
        "yes": "Yes",
        "no": "No"
      },
      "prescriptionOrEyeglasses": {
        "yes": "Yes",
        "no": "No"
      }
    },
    "states": [
      {
        "value": "",
        "label": "Select"
      },
      {
        "value": "AL",
        "label": "Alabama"
      },
      {
        "value": "AK",
        "label": "Alaska"
      },
      {
        "value": "AS",
        "label": "American Samoa"
      },
      {
        "value": "AZ",
        "label": "Arizona"
      },
      {
        "value": "AR",
        "label": "Arkansas"
      },
      {
        "value": "CA",
        "label": "California"
      },
      {
        "value": "CO",
        "label": "Colorado"
      },
      {
        "value": "CT",
        "label": "Connecticut"
      },
      {
        "value": "DE",
        "label": "Delaware"
      },
      {
        "value": "DC",
        "label": "District Of Columbia"
      },
      {
        "value": "FM",
        "label": "Federated States Of Micronesia"
      },
      {
        "value": "FL",
        "label": "Florida"
      },
      {
        "value": "GA",
        "label": "Georgia"
      },
      {
        "value": "GU",
        "label": "Guam"
      },
      {
        "value": "HI",
        "label": "Hawaii"
      },
      {
        "value": "ID",
        "label": "Idaho"
      },
      {
        "value": "IL",
        "label": "Illinois"
      },
      {
        "value": "IN",
        "label": "Indiana"
      },
      {
        "value": "IA",
        "label": "Iowa"
      },
      {
        "value": "KS",
        "label": "Kansas"
      },
      {
        "value": "KY",
        "label": "Kentucky"
      },
      {
        "value": "LA",
        "label": "Louisiana"
      },
      {
        "value": "ME",
        "label": "Maine"
      },
      {
        "value": "MH",
        "label": "Marshall Islands"
      },
      {
        "value": "MD",
        "label": "Maryland"
      },
      {
        "value": "MA",
        "label": "Massachusetts"
      },
      {
        "value": "MI",
        "label": "Michigan"
      },
      {
        "value": "MN",
        "label": "Minnesota"
      },
      {
        "value": "MS",
        "label": "Mississippi"
      },
      {
        "value": "MO",
        "label": "Missouri"
      },
      {
        "value": "MT",
        "label": "Montana"
      },
      {
        "value": "NE",
        "label": "Nebraska"
      },
      {
        "value": "NV",
        "label": "Nevada"
      },
      {
        "value": "NH",
        "label": "New Hampshire"
      },
      {
        "value": "NJ",
        "label": "New Jersey"
      },
      {
        "value": "NM",
        "label": "New Mexico"
      },
      {
        "value": "NY",
        "label": "New York"
      },
      {
        "value": "NC",
        "label": "North Carolina"
      },
      {
        "value": "ND",
        "label": "North Dakota"
      },
      {
        "value": "MP",
        "label": "Northern Mariana Islands"
      },
      {
        "value": "OH",
        "label": "Ohio"
      },
      {
        "value": "OK",
        "label": "Oklahoma"
      },
      {
        "value": "OR",
        "label": "Oregon"
      },
      {
        "value": "PW",
        "label": "Palau"
      },
      {
        "value": "PA",
        "label": "Pennsylvania"
      },
      {
        "value": "PR",
        "label": "Puerto Rico"
      },
      {
        "value": "RI",
        "label": "Rhode Island"
      },
      {
        "value": "SC",
        "label": "South Carolina"
      },
      {
        "value": "SD",
        "label": "South Dakota"
      },
      {
        "value": "TN",
        "label": "Tennessee"
      },
      {
        "value": "TX",
        "label": "Texas"
      },
      {
        "value": "UT",
        "label": "Utah"
      },
      {
        "value": "VT",
        "label": "Vermont"
      },
      {
        "value": "VI",
        "label": "Virgin Islands"
      },
      {
        "value": "VA",
        "label": "Virginia"
      },
      {
        "value": "WA",
        "label": "Washington"
      },
      {
        "value": "WV",
        "label": "West Virginia"
      },
      {
        "value": "WI",
        "label": "Wisconsin"
      },
      {
        "value": "WY",
        "label": "Wyoming"
      }
    ],
    "countries": [
      {
        "value": "",
        "label": "Select"
      },
      {
        "value": "USA",
        "label": "United States"
      },
      {
        "value": "AUS",
        "label": "Australia"
      },
      {
        "value": "CAN",
        "label": "Canada"
      },
      {
        "value": "FRA",
        "label": "France"
      },
      {
        "value": "GER",
        "label": "Germany"
      },
      {
        "value": "HK",
        "label": "Hong Kong"
      },
      {
        "value": "IND",
        "label": "India"
      },
      {
        "value": "IRE",
        "label": "Ireland"
      },
      {
        "value": "ITA",
        "label": "Italy"
      },
      {
        "value": "MEX",
        "label": "Mexico"
      },
      {
        "value": "NZE",
        "label": "New Zealand"
      },
      {
        "value": "SAF",
        "label": "South Africa"
      },
      {
        "value": "SPA",
        "label": "Spain"
      },
      {
        "value": "SWE",
        "label": "Sweden"
      },
      {
        "value": "UAE",
        "label": "United Arab Emirates"
      },
      {
        "value": "UK",
        "label": "United Kingdom"
      }
    ]
  }
}
  • Content:
    (function (window) {
      'use strict';
      const programSelect = document.getElementById('ambassadors-program');
      // Shows/hides additional form options related to the selected Program option.
      function handleInquiryChange(e) {
        const newValue = e.target.value;
        const optionContainers = document.querySelectorAll('.ambassadors__additional-options');
        for (let i = 0; i < optionContainers.length; i++) {
          const optionContainer = optionContainers[i];
          if (newValue === optionContainer.getAttribute('data-options-id')) {
            optionContainer.setAttribute('aria-hidden', false);
          }
          else {
            optionContainer.setAttribute('aria-hidden', true);
          }
        }
      }
      if (programSelect) {
        programSelect.addEventListener('change', handleInquiryChange);
      }
    })(this);
    
  • URL: /components/raw/ambassadors-form/ambassadors-form.js
  • Filesystem Path: src/components/01-elements/forms/ambassadors-form/ambassadors-form.js
  • Size: 798 Bytes
  • Content:
    .ambassadors {
      @include clearfix;
      margin: 20px auto;
      padding: 0 $gutter-width-half;
    
      h4 {
        @include breakpoint($breakpoint-md $breakpoint-xl) {
          padding: 0 10px;
        }
      }
    
      .form-item {
        .select {
          margin-top: 1rem;
        }
      }
    
      .form-item--checkbox {
        @include breakpoint($breakpoint-md $breakpoint-xl) {
          padding: 0 10px;
        }
    
        &:last-child {
          margin-bottom: 0;
        }
      }
    
      fieldset.form-item--checkboxes {
        border: 0;
    
        legend {
          @include label;
          // Legends have weird default inner (non-padding) spacing.
          position: relative;
          left: -2px;
          margin: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 40px;
        padding: 0;
    
        .ambassadors__form-items {
          @include breakpoint($breakpoint-md) {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
    
            &.form-item--radio,
            &.form-item--checkboxes {
              display: block;
            }
          }
        }
    
        .form-item--text,
        .form-item--email,
        .form-item--tel,
        .form-item--select {
          @include span(6);
        }
    
        .form-item--checkboxes,
        .form-item--textarea {
          @include span(12);
        }
    
        .textarea {
          height: 160px;
        }
    
        .button {
          margin: 15px 0 0 $gutter-width-half;
          clear: both;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 80px;
        margin-bottom: 90px;
    
        .form-item--text,
        .form-item--email,
        .form-item--tel,
        .form-item--select {
          width: 340px;
          padding: 0;
        }
    
        .form-item--checkboxes,
        .form-item--textarea {
          padding: 0;
        }
    
        .button {
          margin-left: 0;
        }
      }
    
      .ambassadors__additional-options[aria-hidden='true'] {
        display: none;
      }
    }
    
  • URL: /components/raw/ambassadors-form/ambassadors-form.scss
  • Filesystem Path: src/components/01-elements/forms/ambassadors-form/ambassadors-form.scss
  • Size: 1.8 KB

There are no notes for this item.