Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall -- Step 2 - registered user


The body component of an article including the article paywall.

Redmine Prototyping Ticket(s)
Data Sources:

Almost there

Are you already a subscriber?

? Can't find your account number?
Please note that we will never share your email address with a third party. Read our privacy policy. Already registered? Click here to sign in.
      <div class="paywall">
  <div class="paywall-prompt--no-border">
    <header class="paywall-prompt-header">
      <h3 class="paywall-prompt__title">
        Almost there
      </h3>
      <p>
        Are you already a subscriber?
      </p>
    </header>
    <form class="paywall-prompt-form--s2--registered">
      <div class="paywall-prompt__user-type">
        <a href="#">No, not yet.</a>
        <a class="is-active" href="#">Yes, I'm a subscriber.</a>
      </div>
      <input type="text" placeholder="First Name" />
      <input type="text" placeholder="Last Name" />
      <input type="text" placeholder="Email" />
      <input type="text" placeholder="Username" />
      <input type="text" placeholder="Password" />
      <input type="text" placeholder="Confirm Password" />
      <input type="text" placeholder="Account Number" />
      <a href="#" class="paywall-prompt-form--s2__help">?</a>
      <div class="paywall-account-help--modal">
        <h4 class="paywall-account-help__title">
          Find your account number
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>

        </h4>
        <img src="/fa_prototype/assets/images/account-help-placeholder.jpg"/>
        <div>
          If you are unable to locate your account number, please
          <a href="http://www.foreignaffairs.com/contact/account_number_request/Account%20number%20request]">
          contact us</a>, and provide us with your full name and address.
        </div>
        <div>
          <ul>
            Need access immediately but lost your account number?
            <li>
              Step 1: Visit our online
              <a href="https://subs.foreignaffairs.com/servlet/Show?WESPAGE=am/home.jsp&MSRSMAG=FF">
                customer account area
              </a>
            </li>
            <li>
              <span class="paywall-account-help__bold">U.S. and Canada Subscribers:</span> Log-in with your name and mailing address.
            </li>
            <li>
              <span class="paywall-account-help__bold">All other subscribers:</span> Log-in with your name, street address, and enter your country name in the "City" field.
            </li>
            <li>
              Step 2: Copy your account number.
            </li>
            <li>
              Step 3: Return to this page and enter your account number here.
              <a href="https://subs.foreignaffairs.com/wes/servlet/Show?WESPAGE=am/Services/wes_email.jsp&MSRSMAG=FF">Contact customer support</a> if you need further assistance.
            </li>
          </ul>
        </div>
      </div>
      <a class="paywall-prompt-form--s2__link" href="http://www.foreignaffairs.com/myaccount">Can't find your account number?</a>

      <div class="paywall-prompt__newsletter">
        <div class="form-item form-type-checkbox form-item-newsletter">
          <input type="checkbox" id="edit-newsletter" name="newsletter" value="1" class="form-checkbox">
          <label class="option" for="edit-newsletter">Yes, please send me <em>"Foreign Affairs Today,"</em> a daily digest of articles delivered to my inbox.</label>
        </div>
      </div>

      <div class="paywall-prompt__buttons">
        <a class="button__red-reversed--light prompt-button--full-width" href="#">Complete Registration</a>
      </div>
    </form>
  </div>
  <div class="paywall-prompt-form__disclaimer">
    <span class="paywall-prompt-form__small">Please note that we will never share your email address with a third party. Read our <a href="http://www.foreignaffairs.com/about-us/contact-us/privacy-policy">privacy policy.</a></span>
    <span><b>Already registered?</b> <a href="#">Click here to sign in.</a></span>
    <!-- Keeping this help text incase it's needed for future iterations.
    <a class="paywall-prompt__help" href="#"><span>?</span>Help</a> -->
  </div>
</div>