Newsletter overlay option. Note that all 5 newsletter overlay options use identical markup except for a singular class name.
Sign up for our newsletter to stay on top of important global issues.
<div class="newsletter-backdrop"> <div class="newsletter-modal v1" role="dialog" aria-labelledby="newsletter-head"> <div class="newsletter-modal-content"> <div class="newsletter-modal-close"> <span class="close-button"> <a href="javascript:void(0)" class="close-button-a"><span aria-hidden="true">×</span> <span class="element-invisible">Close dialog</span></a> </span> </div> <div class="newsletter-modal-container"> <div class="newsletter-overlay-img" style="background-image: url('/fa_prototype/assets/images/responsiveimg/story-teaser-orig.jpg')"></div> <header class="newsletter-overlay-head"> <h2 class="newsletter-head" id="newsletter-head">Understand the world you live and work in.</h2> </header> <div class="newsletter-overlay-content"> <section class="newsletter-overlay-body"> <p>Sign up for our newsletter to stay on top of important global issues.</p> </section> <section class="newsletter-overlay-form"> <form class="newsletter-compact__form" action="/" method="post" id="fa-newsletter-email-signup" accept-charset="UTF-8"> <div class="newsletter-overlay-inputs"> <div class="form-item form-type-textfield form-item-email" style="margin-bottom: initial;"> <label class="element-invisible" for="edit-email--2">Email <span class="form-required" title="This field is required."></span></label> <input placeholder="Enter Your Email" size="26" maxlength="60" class="newsletter-overlay-input required" type="text" id="edit-email--2" name="email" value=""> </div> <input class="newsletter-overlay-submit ajax-processed faom-selector=form%23fa-newsletter-email-signup+.form-submit&location=article-footer&name=newsletter-signup&event=" type="submit" id="edit-submit--2" name="op" value="Sign Up"> </div> <div class="d-none form-wrapper" id="edit-fa-name-container"> <div class="form-item form-type-textfield form-item-fa-name" style="margin-bottom: initial;"> <label for="edit-fa-name">Name </label> <input type="text" id="edit-fa-name" name="fa_name" value="" size="60" maxlength="128" class="form-text"> </div> </div><input type="hidden" name="newsletter_key" value="fa_booksreviews"> <input type="hidden" name="location" value="newsletter-overlay"> <input type="hidden" name="form_build_id" value="form-G_Rwvu_y-LiNaBd8j-7BNz0Sg9Rl2-o1ojrpc6XRHZQ"> <input type="hidden" name="form_token" value="X4eNDPqJKwzlBK6XkML1fFyrzRabisLH93kOVF_tioA"><input type="hidden" name="form_id" value="fa_newsletter_email_signup"> </form> </section> </div> </div> </div> </div> </div>