How to Pass Information from One Page to Another with Forms and JavaScript/jQuery

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.

* 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"/>
return $html;


* Parse the url for an email address

(function($) {

$(document).ready(function() {

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









0 responses to “How to Pass Information from One Page to Another with Forms and JavaScript/jQuery”