{% extends "contact-us/base_contact-us.html" %}

{% block title %}Newsletter signup{% endblock %}

{% block meta_copydoc %}
{% endblock meta_copydoc %}

{% block content %}
  <div class="p-strip u-fixed-width">
    <header style="border-bottom: 0; display: block;">
      <h2 class="u-sv1" id="modal-title">Sign up to hear more about Ubuntu</h2>
      <p>Get the latest news about Ubuntu and Canonical and make sure you never miss a new Ubuntu release.</p>
    </header>
    <form action="/marketo/submit"
          method="post"
          id="mktoForm_4960"
          class="modal-form">
      <ul class="p-list">
        <li class="p-list__item">
          <label for="email">Email:</label>
          <input required
                 id="email"
                 name="email"
                 maxlength="255"
                 type="email"
                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"
                 required="required" />
        </li>
        <li class="p-list__item">
          <label class="p-checkbox">
            <input required
                   class="p-checkbox__input"
                   value="yes"
                   aria-labelledby="canonicalUpdatesOptIn"
                   name="canonicalUpdatesOptIn"
                   type="checkbox" />
            <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
          </label>
        </li>
        <li class="p-list__item">
          In submitting this form, I confirm that I have read and agree to Canonical's <a href="/legal/terms-and-policies/privacy-policy">Privacy Policy</a>
        </li>
        {# These are honey pot fields to catch bots #}
        <li class="u-off-screen">
          <label class="website" for="website">Website:</label>
          <input name="website"
                 type="text"
                 class="website"
                 autocomplete="off"
                 value=""
                 id="website"
                 tabindex="-1" />
        </li>
        <li class="u-off-screen">
          <label class="name" for="name">Name:</label>
          <input name="name"
                 type="text"
                 class="name"
                 autocomplete="off"
                 value=""
                 id="name"
                 tabindex="-1" />
        </li>
        {# End of honey pots #}
      </ul>

      <div class="u-hide">
        <h3>Your comments</h3>
        <ul class="p-list">
          <li class="p-list__item">
            <label for="Comments_from_lead__c">What would you like to talk to us about?</label>
            <textarea id="Comments_from_lead__c"
                      name="Comments_from_lead__c"
                      rows="5"
                      maxlength="2000"></textarea>
          </li>
        </ul>
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="returnURL"
               value="%% returnURL %%" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="formid"
               value="4960" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="Consent_to_Processing__c"
               value="yes" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="productContext"
               id="product-context"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="utm_campaign"
               id="utm_campaign"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="utm_medium"
               id="utm_medium"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="utm_source"
               id="utm_source"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="utm_content"
               id="utm_content"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="utm_term"
               id="utm_term"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="GCLID__c"
               id="GCLID__c"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               name="Facebook_Click_ID__c"
               id="Facebook_Click_ID__c"
               value="" />
        <input type="hidden"
               aria-hidden="true"
               aria-label="hidden field"
               id="preferredLanguage"
               name="preferredLanguage"
               maxlength="255"
               value="" />
      </div>
      <button type="submit" class=" p-button--positive" aria-label="Submit">Submit form</button>
    </form>
  </div>

{% endblock content %}