This is a quick post, just to share something I learned.

Recently I got a request to create a simple submit form with a an email input that would direct to another page and take the email address and pre-fill a more complex form with email, name, address, etc.

Below is the code I used for it.

<?php
/**
* Create a simple shortcode for a newsletter CTA
* Load JS conditionally, only if the page is 'newsletter'
*/

add_action( 'wp', 'n8f_load_rr_signup_cta_scripts_on_newsletter_page');
function n8f_load_rr_signup_cta_scripts_on_newsletter_page() {

if( is_page('newsletter') ) {
add_action( 'wp_enqueue_scripts', 'register_n8f_rr_signup_cta_scripts' );
}
}

function register_n8f_rr_signup_cta_scripts() {

wp_enqueue_script( 'n8f_rr_signup_cta_js', get_stylesheet_directory_uri() . '/js/newsletter_signup_cta.js', array( 'jquery' ), date("ymd"), true);

}

add_shortcode( 'n8f_rr_signup_cta', 'n8f_rr_signup_cta' );

function n8f_rr_signup_cta() {
$html = '<form action="/newsletter">
<input type="text" name="email" placeholder="Your email..." />
<input type="submit" value="Subscribe"/>
</form>';
return $html;
}

 

/**
* Parse the url for an email address
*/

(function($) {

$(document).ready(function() {

var queryString = location.search
queryStart = queryString.indexOf("=") + 1,
query = queryString.slice(queryStart, queryString.length ),
cleanString = query.replace( /%40/, "@");

$('#control_EMAIL').val(cleanString);

});

})(jQuery);