File: /var/www/stg-everycred.com/wp-content/themes/everycred/inc/wp-whitepaper-modal.php
<?php
/**
* White Paper Download Modal
* Include this file in any template that lists white papers:
* <?php include get_template_directory() . '/wp-whitepaper-modal.php'; ?>
*/
?>
<style>
.download-pdf-btn {
cursor: pointer;
font-size: inherit;
color: inherit;
text-decoration: none;
}
.download-pdf-btn:hover {
opacity: 0.75;
color: #0A3161;
}
#wp-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9998;
align-items: center;
justify-content: center;
}
#wp-modal-overlay.active { display: flex; }
#wp-modal {
background: #fff;
border-radius: 10px;
padding: 40px;
width: 100%;
max-width: 480px;
position: relative;
z-index: 9999;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
#wp-modal h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: #0A3161; }
#wp-modal p.modal-subtitle { color: #666; font-size: 14px; margin-bottom: 24px; }
#wp-modal .form-group { margin-bottom: 18px; }
#wp-modal label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #333; }
#wp-modal input[type="text"],
#wp-modal input[type="email"] {
width: 100%; padding: 12px 14px; border: 1px solid #ddd;
border-radius: 6px; font-size: 15px; transition: border-color 0.2s; box-sizing: border-box;
}
#wp-modal input:focus { border-color: #0A3161; outline: none; }
#wp-modal input.error { border-color: #e53e3e; }
#wp-modal .error-msg { color: #e53e3e; font-size: 12px; margin-top: 4px; display: none; }
#wp-modal .submit-btn {
width: 100%; padding: 13px; background: #0A3161; color: #fff;
border: none; border-radius: 6px; font-size: 16px; font-weight: 600;
cursor: pointer; margin-top: 6px; transition: background 0.2s;
}
#wp-modal .submit-btn:hover { background: #0c3d7a; }
#wp-modal .submit-btn:disabled { background: #999; cursor: not-allowed; }
#wp-modal-close {
position: absolute; top: 14px; right: 18px; font-size: 22px;
cursor: pointer; background: none; border: none; color: #666; line-height: 1;
}
#wp-modal-close:hover { color: #000; }
#wp-modal .success-msg { display: none; text-align: center; padding: 20px 0; }
#wp-modal .success-msg svg { width: 60px; height: 60px; margin: 0 auto 16px; display: block; }
#wp-modal .success-msg h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
#wp-modal .success-msg p { color: #555; font-size: 14px; }
#wp-modal .global-error {
background: #fff5f5; border: 1px solid #fed7d7; color: #c53030;
padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; display: none;
}
@media (max-width: 576px) {
.achieving-insights .title-txt.font-18 { font-size: 16px; }
#wp-modal { padding: 28px 20px; }
}
</style>
<!-- PDF Download Modal -->
<div id="wp-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="wp-modal-title">
<div id="wp-modal">
<button id="wp-modal-close" aria-label="Close">×</button>
<div id="wp-modal-form-wrap">
<h3 id="wp-modal-title">Get Your Free White Paper</h3>
<p class="modal-subtitle">Please fill in your details to receive your report via email.</p>
<div class="global-error" id="wp-global-error"></div>
<form id="wp-download-form" novalidate>
<?php wp_nonce_field('wp_pdf_download_nonce', 'wp_pdf_nonce'); ?>
<input type="hidden" id="wp-pdf-id" name="pdf_id" value="">
<input type="hidden" id="wp-post-id" name="post_id" value="">
<div class="form-group">
<label for="wp-user-name">Full Name <span style="color:red">*</span></label>
<input type="text" id="wp-user-name" name="user_name" placeholder="John Doe" autocomplete="name">
<div class="error-msg" id="name-error">Please enter your full name.</div>
</div>
<div class="form-group">
<label for="wp-user-email">Email Address <span style="color:red">*</span></label>
<input type="email" id="wp-user-email" name="user_email" placeholder="john@example.com" autocomplete="email">
<div class="error-msg" id="email-error">Please enter a valid email address.</div>
</div>
<button type="submit" class="submit-btn" id="wp-submit-btn">Send Me the PDF</button>
</form>
</div>
<div class="success-msg" id="wp-success-msg">
<svg viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10"/>
</svg>
<h4>Check Your Inbox!</h4>
<p>The white paper has been sent to your email address. Please check your spam folder if you don't see it.</p>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
(function ($) {
$(document).ready(function () {
const overlay = $('#wp-modal-overlay');
const closeBtn = $('#wp-modal-close');
const ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
/* ── Open modal ────────────────────────────────────────── */
$(document).on('click', '.download-pdf-btn', function (e) {
e.preventDefault();
e.stopPropagation();
$('#wp-pdf-id').val($(this).data('pdf-id'));
$('#wp-post-id').val($(this).data('post-id'));
resetModal();
overlay.addClass('active');
$('#wp-user-name').focus();
});
/* ── Close modal ───────────────────────────────────────── */
closeBtn.on('click', closeModal);
overlay.on('click', function (e) {
if ($(e.target).is('#wp-modal-overlay')) closeModal();
});
$(document).on('keydown', function (e) {
if (e.key === 'Escape') closeModal();
});
function closeModal() {
overlay.removeClass('active');
resetModal();
}
function resetModal() {
$('#wp-download-form')[0].reset();
$('#wp-modal-form-wrap').show();
$('#wp-success-msg').hide();
$('#wp-global-error').hide().text('');
$('#wp-user-name, #wp-user-email').removeClass('error');
$('.error-msg').hide();
$('#wp-submit-btn').prop('disabled', false).text('Send Me the PDF');
}
/* ── Live validation ───────────────────────────────────── */
function validateForm() {
let valid = true;
const name = $('#wp-user-name').val().trim();
const email = $('#wp-user-email').val().trim();
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (name.length < 2) {
$('#wp-user-name').addClass('error'); $('#name-error').show(); valid = false;
} else {
$('#wp-user-name').removeClass('error'); $('#name-error').hide();
}
if (!emailRe.test(email)) {
$('#wp-user-email').addClass('error'); $('#email-error').show(); valid = false;
} else {
$('#wp-user-email').removeClass('error'); $('#email-error').hide();
}
return valid;
}
$('#wp-user-name').on('blur input', function () {
if ($(this).val().trim().length >= 2) {
$(this).removeClass('error'); $('#name-error').hide();
}
});
$('#wp-user-email').on('blur input', function () {
if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($(this).val().trim())) {
$(this).removeClass('error'); $('#email-error').hide();
}
});
/* ── Form submit ───────────────────────────────────────── */
$('#wp-download-form').on('submit', function (e) {
e.preventDefault();
if (!validateForm()) return;
const btn = $('#wp-submit-btn');
btn.prop('disabled', true).text('Sending...');
$('#wp-global-error').hide();
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'wp_handle_pdf_download',
pdf_id: $('#wp-pdf-id').val(),
post_id: $('#wp-post-id').val(),
user_name: $('#wp-user-name').val().trim(),
user_email: $('#wp-user-email').val().trim(),
nonce: $('#wp_pdf_nonce').val()
},
success: function (res) {
if (res.success) {
$('#wp-modal-form-wrap').hide();
$('#wp-success-msg').show();
} else {
$('#wp-global-error').text(res.data || 'Something went wrong. Please try again.').show();
btn.prop('disabled', false).text('Send Me the PDF');
}
},
error: function () {
$('#wp-global-error').text('Network error. Please try again.').show();
btn.prop('disabled', false).text('Send Me the PDF');
}
});
});
});
}(jQuery));
});
</script>