CCCPaste

Webinar Form

<!-- WEBINAR SIGNUP FORM โ€” Paste into Convertri Custom HTML block -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

.wj-wrap *,.wj-wrap *::before,.wj-wrap *::after{margin:0;padding:0;box-sizing:border-box}

.wj-wrap {
font-family:'Outfit',sans-serif;
width:100%;
max-width:460px;
margin:0 auto;
}

.wj-card {
background:#111120;
border:1px solid rgba(255,255,255,0.06);
border-radius:20px;
padding:40px 32px 32px;
position:relative;
overflow:hidden;
box-shadow:0 4px 60px rgba(0,0,0,0.4);
}

.wj-card::before {
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,#6c5ce7,#00cec9,transparent);
opacity:0.6;
}

.wj-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px}

.wj-badge {
display:inline-flex;align-items:center;gap:6px;
background:rgba(108,92,231,0.12);border:1px solid rgba(108,92,231,0.2);
border-radius:100px;padding:5px 13px;
font-size:0.72rem;font-weight:500;color:#7d6ff0;
letter-spacing:0.04em;text-transform:uppercase;
}
.wj-badge .wj-dot {
width:6px;height:6px;background:#00cec9;border-radius:50%;
animation:wjPulse 2s ease-in-out infinite;
}
@keyframes wjPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

.wj-date-pill {
display:inline-flex;align-items:center;gap:5px;
background:rgba(0,206,201,0.1);border:1px solid rgba(0,206,201,0.18);
border-radius:100px;padding:5px 13px;
font-size:0.72rem;font-weight:500;color:#00cec9;
letter-spacing:0.02em;
}
.wj-date-pill svg{flex-shrink:0}

.wj-card h2 {
font-family:'Playfair Display',serif;
font-size:1.65rem;font-weight:700;line-height:1.25;margin-bottom:6px;
background:linear-gradient(135deg,#f0eef6,#c0b8f0);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.wj-card .wj-sub {
color:#8b89a6;font-size:0.88rem;line-height:1.5;margin-bottom:22px;font-weight:300;
}

/* Countdown */
.wj-countdown{display:flex;gap:10px;justify-content:center;margin-bottom:24px}
.wj-cd-box{
background:rgba(108,92,231,0.08);border:1px solid rgba(108,92,231,0.15);
border-radius:12px;padding:10px 6px;min-width:62px;text-align:center;
}
.wj-cd-num{font-size:1.35rem;font-weight:700;color:#f0eef6;font-variant-numeric:tabular-nums;line-height:1.2}
.wj-cd-label{font-size:0.62rem;font-weight:500;color:#5a587a;text-transform:uppercase;letter-spacing:0.06em;margin-top:2px}

/* Benefits */
.wj-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.wj-benefit{
display:flex;align-items:flex-start;gap:8px;
background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);
border-radius:10px;padding:10px 12px;
}
.wj-benefit-icon{
width:20px;height:20px;flex-shrink:0;margin-top:1px;
display:flex;align-items:center;justify-content:center;
font-size:0.7rem;line-height:1;
}
.wj-benefit span{font-size:0.78rem;color:#c0bdd6;font-weight:400;line-height:1.35}

.wj-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);margin-bottom:24px}

/* Form */
.wj-group{margin-bottom:16px}
.wj-group label{display:block;font-size:0.75rem;font-weight:500;color:#8b89a6;margin-bottom:6px;letter-spacing:0.03em}
.wj-group label .wj-req{color:#6c5ce7;margin-left:2px}
.wj-group label .wj-opt{color:#5a587a;font-weight:400;font-size:0.7rem}

.wj-group input{
width:100%;padding:12px 15px;
background:#1a1a2e;border:1.5px solid rgba(255,255,255,0.06);
border-radius:12px;color:#f0eef6;
font-family:'Outfit',sans-serif;font-size:0.92rem;font-weight:400;
outline:none;transition:all 0.25s ease;
}
.wj-group input::placeholder{color:#5a587a;font-weight:300}
.wj-group input:hover{border-color:rgba(255,255,255,0.12)}
.wj-group input:focus{border-color:#6c5ce7;box-shadow:0 0 0 3px rgba(108,92,231,0.3);background:#1e1e36}
.wj-group input.wj-invalid{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,0.15)}

.wj-phone-row{display:flex;gap:8px}
.wj-phone-row .wj-cc{width:82px;flex-shrink:0;text-align:center}
.wj-phone-row .wj-pn{flex:1}

.wj-err{color:#ff6b6b;font-size:0.73rem;margin-top:4px;display:none}
.wj-err.show{display:block}

.wj-btn{
width:100%;padding:15px;border:none;border-radius:12px;
font-family:'Outfit',sans-serif;font-size:0.95rem;font-weight:600;
cursor:pointer;margin-top:6px;
background:linear-gradient(135deg,#6c5ce7,#8577f0);color:#fff;
box-shadow:0 4px 24px rgba(108,92,231,0.35);
transition:all 0.3s ease;position:relative;overflow:hidden;
letter-spacing:0.02em;
}
.wj-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 32px rgba(108,92,231,0.5)}
.wj-btn:disabled{opacity:0.7;cursor:not-allowed}

.wj-btn::after{
content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
animation:wjShim 3s ease-in-out infinite;
}
@keyframes wjShim{0%{left:-100%}50%{left:140%}100%{left:140%}}

.wj-btn .wj-spinner{
display:inline-block;width:16px;height:16px;
border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;
border-radius:50%;animation:wjSpin .7s linear infinite;vertical-align:middle;margin-right:6px;
}
@keyframes wjSpin{to{transform:rotate(360deg)}}

.wj-btn.success{background:linear-gradient(135deg,#00b894,#00cec9)}

.wj-spots{text-align:center;margin-top:12px;font-size:0.75rem;color:#5a587a;line-height:1.5}
.wj-spots svg{vertical-align:-2px;margin-right:3px;opacity:0.6}

@media(max-width:480px){
.wj-card{padding:28px 20px 24px}
.wj-card h2{font-size:1.4rem}
.wj-benefits{grid-template-columns:1fr}
.wj-countdown{gap:6px}
.wj-cd-box{min-width:54px;padding:8px 4px}
.wj-cd-num{font-size:1.15rem}
}
</style>

<div class="wj-wrap">
<div class="wj-card">

<div class="wj-top-row">
<div class="wj-badge"><span class="wj-dot"></span> Live Webinar</div>
<div class="wj-date-pill">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
March 21 ยท 10 AM EST
</div>
</div>

<h2>Reserve Your Seat Now</h2>
<p class="wj-sub">Sign up today and lock in your spot for this exclusive live session.</p>

<div class="wj-countdown" id="wjCountdown">
<div class="wj-cd-box"><div class="wj-cd-num" id="wjDays">--</div><div class="wj-cd-label">Days</div></div>
<div class="wj-cd-box"><div class="wj-cd-num" id="wjHours">--</div><div class="wj-cd-label">Hours</div></div>
<div class="wj-cd-box"><div class="wj-cd-num" id="wjMins">--</div><div class="wj-cd-label">Mins</div></div>
<div class="wj-cd-box"><div class="wj-cd-num" id="wjSecs">--</div><div class="wj-cd-label">Secs</div></div>
</div>

<div class="wj-benefits">
<div class="wj-benefit"><div class="wj-benefit-icon">๐ŸŽŸ๏ธ</div><span>Guaranteed Seat</span></div>
<div class="wj-benefit"><div class="wj-benefit-icon">๐ŸŽ</div><span>Win a Free Copy</span></div>
<div class="wj-benefit"><div class="wj-benefit-icon">โญ</div><span>Exclusive Bonuses</span></div>
<div class="wj-benefit"><div class="wj-benefit-icon">๐Ÿ”ฅ</div><span>One-Time Deals</span></div>
</div>

<div class="wj-divider"></div>

<form id="wjForm" novalidate>
<div class="wj-group">
<label>Full Name <span class="wj-req">*</span></label>
<input type="text" id="wjName" placeholder="John Doe" required autocomplete="name">
<div class="wj-err" id="wjNameErr">Please enter your name</div>
</div>
<div class="wj-group">
<label>Email Address <span class="wj-req">*</span></label>
<input type="email" id="wjEmail" placeholder="[email protected]" required autocomplete="email">
<div class="wj-err" id="wjEmailErr">Please enter a valid email</div>
</div>
<div class="wj-group">
<label>Phone <span class="wj-opt">(optional)</span></label>
<div class="wj-phone-row">
<input type="text" id="wjCC" class="wj-cc" value="+1" placeholder="+1">
<input type="tel" id="wjPhone" class="wj-pn" placeholder="123 456 7890">
</div>
</div>
<button type="submit" class="wj-btn" id="wjBtn">Claim My Seat โ†’</button>
</form>

<p class="wj-spots">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
Seats are limited ยท Your info is 100% secure
</p>
</div>
</div>

<script>
(function(){
// =====================================================
// CONFIG โ€” UPDATE THESE 3 VALUES
// =====================================================
var WJ_BASE = 'https://event.webinarjam.com/qqyn7/register/ooyrxig6/1click';
var FB_PIXEL_ID = 'YOUR_PIXEL_ID';
var FB_TOKEN = 'YOUR_ACCESS_TOKEN';
var REDIRECT_URL = 'https://jvz8.com/c/140693/431725/';
// =====================================================

// Webinar: March 21, 2026 10:00 AM EST (UTC-5)
var WEBINAR_DATE = new Date('2026-03-21T10:00:00-05:00');

// --- COUNTDOWN ---
function pad(n){return String(n).padStart(2,'0')}
function tick(){
var diff=WEBINAR_DATE-new Date();
if(diff<=0){diff=0}
var d=Math.floor(diff/864e5);
var h=Math.floor((diff%864e5)/36e5);
var m=Math.floor((diff%36e5)/6e4);
var s=Math.floor((diff%6e4)/1e3);
document.getElementById('wjDays').textContent=pad(d);
document.getElementById('wjHours').textContent=pad(h);
document.getElementById('wjMins').textContent=pad(m);
document.getElementById('wjSecs').textContent=pad(s);
}
tick();setInterval(tick,1000);

// --- HELPERS ---
var form=document.getElementById('wjForm');
var nameI=document.getElementById('wjName');
var emailI=document.getElementById('wjEmail');
var phoneI=document.getElementById('wjPhone');
var ccI=document.getElementById('wjCC');
var btn=document.getElementById('wjBtn');

function tz(){try{var o=new Date().getTimezoneOffset();return'GMT'+(o<=0?'+':'-')+Math.floor(Math.abs(o)/60)}catch(e){return'GMT+0'}}
function okEmail(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}
function split(n){var p=n.trim().split(/\s+/);return{first:p[0]||'',last:p.slice(1).join(' ')||''}}
function cookie(n){var m=document.cookie.match(new RegExp('(^| )'+n+'=([^;]+)'));return m?decodeURIComponent(m[2]):''}

async function sha256(str){
if(!str)return'';
var buf=await crypto.subtle.digest('SHA-256',new TextEncoder().encode(str.trim().toLowerCase()));
return Array.from(new Uint8Array(buf)).map(function(b){return b.toString(16).padStart(2,'0')}).join('');
}

function clearErr(){
nameI.classList.remove('wj-invalid');emailI.classList.remove('wj-invalid');
document.getElementById('wjNameErr').classList.remove('show');
document.getElementById('wjEmailErr').classList.remove('show');
}
[nameI,emailI].forEach(function(el){el.addEventListener('input',clearErr)});

form.addEventListener('submit',async function(e){
e.preventDefault();clearErr();
var ok=true;
if(!nameI.value.trim()){nameI.classList.add('wj-invalid');document.getElementById('wjNameErr').classList.add('show');ok=false}
if(!emailI.value.trim()||!okEmail(emailI.value)){emailI.classList.add('wj-invalid');document.getElementById('wjEmailErr').classList.add('show');ok=false}
if(!ok)return;

btn.disabled=true;
btn.innerHTML='<span class="wj-spinner"></span> Reserving your seat...';

var names=split(nameI.value);
var email=emailI.value.trim();
var phone=phoneI.value.trim().replace(/\D/g,'');
var cc=ccI.value.trim()||'+1';

// 1) WebinarJam
try{
var p='first_name='+encodeURIComponent(names.first)
+'&last_name='+encodeURIComponent(names.last||names.first)
+'&email='+encodeURIComponent(email)
+'&timezone='+encodeURIComponent(tz())
+'&schedule_id=1';
if(phone)p+='&phone_country_code='+encodeURIComponent(cc)+'&phone_number='+encodeURIComponent(phone);
await new Promise(function(r){var i=new Image();i.onload=i.onerror=r;i.src=WJ_BASE+'?'+p;setTimeout(r,3000)});
}catch(err){console.warn('WJ:',err)}

// 2) Facebook CAPI
try{
var hem=await sha256(email);
var hph=phone?await sha256(cc.replace('+','')+phone):undefined;
var ev={event_name:'Lead',event_time:Math.floor(Date.now()/1000),action_source:'website',event_source_url:window.location.href,
user_data:{em:[hem],client_user_agent:navigator.userAgent}};
var fbc=cookie('_fbc');var fbp=cookie('_fbp');
if(fbc)ev.user_data.fbc=fbc;
if(fbp)ev.user_data.fbp=fbp;
if(hph)ev.user_data.ph=[hph];
fetch('https://graph.facebook.com/v21.0/'+FB_PIXEL_ID+'/events?access_token='+FB_TOKEN,{
method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({data:[ev]}),keepalive:true
}).catch(function(err){console.warn('FB:',err)});
}catch(err){console.warn('FB:',err)}

// 3) Success + redirect
btn.classList.add('success');
btn.innerHTML='โœ“ You\'re In! Redirecting...';
setTimeout(function(){window.location.href=REDIRECT_URL},1500);
});
})();
</script>