Easy Hash Lock

GetMxt-Easy-Hash-Lock.php

<?php
/**
 *  Easy Hash Lock by Mxt Media
 *
 *  @author TJ Kelly @ Mxt Media - https://getmxt.com
 *
 *  @date 2018-02-20
 *
 *  @desc Lock any page and pop a lead form by adding "#lock" to the URL
 *
 *  @requires jQuery
 */

// Add CSS to wp_head
function getmxt_hashlock_head() {
	echo '<style type="text/css">.getmxt-hashlock{display:none;flex-direction:column;width:100%;height:100%}.is-locked .getmxt-hashlock{display:flex}.getmxt-hashlock,.getmxt-hashlock-form-wrap,.getmxt-hashlock-image,.getmxt-hashlock-overlay{position:fixed;z-index:10000001}.getmxt-hashlock,.getmxt-hashlock-image,.getmxt-hashlock-overlay{top:0;bottom:0;right:0;left:0}.getmxt-hashlock-image,.getmxt-hashlock-overlay{z-index:1}.getmxt-hashlock-form-wrap{z-index:2;margin:0 auto;padding:1rem 2rem;border-radius:.5rem;box-shadow:0 1px 0 #000;max-width:22rem;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff}.getmxt-hashlock-image{background-size:cover;background-position:center center}.getmxt-hashlock-overlay{background:rgba(0,0,0,.75)}@media only screen and (max-width:768px){.getmxt-hashlock{position:absolute;left:15%;top:25%}.getmxt-hashlock-form{position:absolute;width:75%;right:15%;bottom:calc(25% - 150px);display:block}}.getmxt-hashlock-form-submit{text-align:center}.getmxt-button{margin:.5rem 0;padding:.75rem 1.25rem;border-radius:.25rem;box-shadow:0 -3px rgba(0,0,0,.1) inset;font-weight:700;text-transform:uppercase;display:inline-block;cursor:pointer;color:#fff;background-color:#27ccc0}</style>';
}
add_action('wp_head', 'getmxt_hashlock_head');


// Add JS & HTML to wp_footer
function getmxt_hashlock_footer() {
	
	// JS output
	$output = '<script>jQuery(function(o){"use strict";o(document).ready(function(){window.location.hash&&"#lock"==window.location.hash?o("body").addClass("is-locked"):o("body").removeClass("is-locked")})});</script>';

	// Post data & title
	$getmxt_hashlock_page_id = get_queried_object_id();
	$getmxt_hashlock_page_title = get_the_title($getmxt_hashlock_page_id);
	
	// Featured Image
	if ( has_post_thumbnail( $getmxt_hashlock_page_id ) ) {
		$getmxt_hashlock_image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $getmxt_hashlock_page_id ), 'full' );
		$getmxt_hashlock_image = $getmxt_hashlock_image_array[0];
		$getmxt_hashlock_image_output = 'background-image: url('.$getmxt_hashlock_image.');';
	} else {
		$getmxt_hashlock_image_output = 'background: #000;';
	}
	
	// HTML form
	$output .= '<div class="getmxt-hashlock">
		<div class="getmxt-hashlock-form-wrap">
			<h2 class="getmxt-hashlock-title">'.$getmxt_hashlock_page_title.'</h2>
			<form method="POST" class="getmxt-hashlock-form">
				<div class="getmxt-hashlock-form-first">
					<input type="text" name="getmxt-hashlock[fname]" placeholder="First name">
				</div><!-- / getmxt-hashlock-form-first -->
				<div class="getmxt-hashlock-form-last">
					<input type="text" name="getmxt-hashlock[lname]" placeholder="Last name">
				</div><!-- / getmxt-hashlock-form-last -->
				<div class="getmxt-hashlock-form-email">
					<input type="email" name="getmxt-hashlock[email]" placeholder="Email">
				</div><!-- / getmxt-hashlock-form-email -->
				<div class="getmxt-hashlock-form-phone">
					<input type="tel" name="getmxt-hashlock[phone]" placeholder="Phone">
				</div><!-- / getmxt-hashlock-form-phone -->
				<div class="getmxt-hashlock-form-submit">
					<div class="getmxt-button">View Now</div>
				</div><!-- / getmxt-hashlock-form-submit -->
			</form>
		</div><!-- / getmxt-hashlock-form-wrap -->
		<div class="getmxt-hashlock-image" style="'.$getmxt_hashlock_image_output.'"></div>
		<div class="getmxt-hashlock-overlay"></div>
	</div><!-- / getmxt-hashlock -->';
	
	// Print the thing
	echo $output;
}
add_action('wp_footer', 'getmxt_hashlock_footer');