Invested Traveler: Newsletter Sign Up

Documentation:

This newsletter section takes in an email address and sends it to the administrator of the website via email.

HTML:

<!-- Newsletter Sign Up --> <div id="newsletter-sign-up-wrapper"> <div class="container"> <div class="row"> <div id="newsletter-sign-up"> <div class="col-md-5"> <div id="newsletter-sign-up-text"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <h3>Newsletter Sign Up</h3> </div> </div> <div class="col-md-7"><div id="newsletter-footer-wrapper"><input id="newsletter-footer" type="text" placeholder="Your Email Address"><button id="newsletter-footer-submit">Submit</button></div></div> </div> </div> </div> </div>

CSS:

/* Newsletter Sign Up */ #newsletter-sign-up-wrapper { width: 100%; float: left; background-color: #1f5d89; } #newsletter-sign-up-text { display: inline-block; padding: 8px 0; float: left; } #newsletter-sign-up { float: left; width: 100%; padding: 25px 0px; h3 { float: left; color: #fff; margin: 0; font-weight: 100; text-transform: uppercase; letter-spacing: 1px; display: inline-block; padding-left: 20px; margin-left: 20px; margin-top: 3px; border-left: 2px solid white; } i { float: left; color: #fff; font-size: 34px; vertical-align: middle; display: inline-block; } } #newsletter-footer-wrapper { float: left; width: 100%; height: 40px; margin-top: 5px; > * { display: inline-block; } } #newsletter-footer { padding-left: 10px; width: 80%; height: 100%; color: #545453; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: $header-font-stack; font-style: italic; } &::-moz-placeholder { /* Firefox 19+ */ font-family: $header-font-stack; font-style: italic; } &:-ms-input-placeholder { /* IE 10+ */ font-family: $header-font-stack; font-style: italic; } &:-moz-placeholder { /* Firefox 18- */ font-family: $header-font-stack; font-style: italic; } } #newsletter-footer-submit { text-transform: uppercase; letter-spacing: 1px; width: 20%; height: 100%; vertical-align: top; border: none; background-color: #20536B; color: #ffffff; font-weight: 600; }

JS:

$('#newsletter-footer-submit').on('click', function() { var email = $('#newsletter-footer').val(); $.post( ajaxurl, { 'action': 'newsletter_signup_submit', 'email': email, }, function(data){ alert('Thank you! Your newsletter signup was successful.') $('#newsletter-footer').val(''); } ); });

PHP:

function newsletter_signup_submit() { // AJAX data $email = $_POST['email']; // Setting up Email $website_name = get_option( 'blogname' ); $admin_email = get_option( 'admin_email' ); $website_url = $_SERVER['SERVER_NAME']; $website_url = str_replace("www.","", $website_url); $from = $website_name . ' <wordpress@' . $website_url . '>'; $message="Newsletter Sign Up:\r\n \r\nE-Mail: " .$email. "\r\n"; mail($admin_email, "Newsletter Sign Up", $message, "From:".$from); wp_die(); } add_action('wp_ajax_nopriv_newsletter_signup_submit', 'newsletter_signup_submit', 999); add_action('wp_ajax_newsletter_signup_submit', 'newsletter_signup_submit', 999);