Example Form full view

<div class="mzp-l-content">
  <form class="mzp-c-form">
    <div class="mzp-c-form-header">
      <h2 class="mzp-c-form-heading">Speaker request form</h2>
      <p>Please complete and submit the form below to request a speaker from Mozilla for your upcoming event.</p>
    </div>

    <fieldset class="mzp-c-field-set">
      <legend class="mzp-c-form-subheading">Event Information</legend>
      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="event_name">Event Name <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="text" name="event_name" id="event_name" value="" required aria-required="true"></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="event_url">Event URL <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="url" name="event_url" id="event_url" value="" required aria-required="true" placeholder="https://"></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="event_date">Event Date <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="date" name="event_date" id="event_date" value="" required aria-required="true"><p class="mzp-c-field-info">If the event is sooner than 20 business days we are unlikely to be able to provide a speaker</p></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="event_time">Event Time <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="time" name="event_time" id="event_time" value="" required aria-required="true"></div>

    </fieldset>

    <fieldset class="mzp-c-field-set">
      <legend class="mzp-c-form-subheading">Your Contact Information</legend>
      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="contact_company">Company <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="text" name="contact_company" id="contact_company" value="" required aria-required="true"></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="contact_name">Name <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="text" name="contact_name" id="contact_name" value="" required aria-required="true"></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="contact_email">E-mail <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="email" name="contact_email" id="contact_email" value="" required aria-required="true"></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="contact_phone">Phone <span class="mzp-c-fieldnote">Required</span></label>
  <input class="mzp-c-field-control" type="tel" name="contact_phone" id="contact_phone" value="" required aria-required="true"></div>

    </fieldset>

    <fieldset class="mzp-c-field-set">
      <legend class="mzp-c-form-subheading">Event Details</legend>
      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="event_details">Tell us about your event <span class="mzp-c-fieldnote">Theme, venue, audience demographics, confirmed speakers…</span></label>
  <textarea class="mzp-c-field-control" id="event_details" rows="5" cols="60" ></textarea></div>

    </fieldset>

    <fieldset class="mzp-c-field-set">
      <legend class="mzp-c-form-subheading">Speaker Request</legend>
      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="guest_1">Guest Speaker Choice #1</label>
  <input class="mzp-c-field-control" type="text" name="guest_1" id="guest_1" value=""></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="guest_2">Guest Speaker Choice #2</label>
  <input class="mzp-c-field-control" type="text" name="guest_2" id="guest_2" value=""></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="guest_topic">Topic of Presentation</label>
  <input class="mzp-c-field-control" type="text" name="guest_topic" id="guest_topic" value=""></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="guest_lang">Presentation Language</label>
  <select class="mzp-c-field-control" name="guest_lang" id="guest_lang"><option value="en">English</option><option value="de">Deutsch</option><option value="es">Español</option><option value="fr">Français</option><option value="hi-IN">हिन्दी (भारत)</option><option value="ja">日本語</option></select></div>

      
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="guest_length">Presentation Length <span class="mzp-c-fieldnote">Hours</span></label>
  <input class="mzp-c-field-control" type="number" name="guest_length" id="guest_length" value="" min="0.5" max="4" step="0.5" size="5" placeholder="1"></div>

      <div class="mzp-c-choices">
        
<div class="mzp-c-choice">
  <input class="mzp-c-choice-control" type="checkbox" name="guest_travel_covered" id="guest_travel_covered" value="yes"    >
  <label class="mzp-c-choice-label" for="guest_travel_covered">Travel expenses will be paid by the requester.</label></div>

      </div>
    </fieldset>

    <footer class="mzp-c-form-footer">
      <div class="mzp-c-button-container mzp-l-h-between">
        <button class="mzp-c-button" type="submit">Submit Request</button>
        <button class="mzp-c-button mzp-t-secondary" type="reset">Clear</button>
        <p class="mzp-c-button-info">
          Expect a response in 2-3 business days.
        </p>
      </div>
    </footer>
  </form>
</div>