Only schedule if you are in a CPG Manufacturing business.

<!-- ========= 1. THIRD‑PARTY SCRIPTS ========= -->

<script async src="https://assets.calendly.com/assets/external/widget.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>

<script>

emailjs.init('YOUR_PUBLIC_KEY'); /* ← replace with your real EmailJS key */

</script>

<!-- ========= 2. POPUP MARKUP + STYLES ========= -->

<style>

:root{

--blue:#0172C0;--blue-h:#015a96;--font:"Helvetica Neue",Arial,sans-serif;

--pill-pad:12px 32px;--pill-r:9999px;--fs:1.1rem;--fw:bold;

--modal-bg:#DFDFDF;--modal-r:8px;

}

.pill-btn{background:var(--blue);color:#fff;border:none;border-radius:var(--pill-r);

padding:var(--pill-pad);font:var(--fw) var(--fs)/1 var(--font);

cursor:pointer;transition:background .2s;display:block;margin:30px auto}

.pill-btn:hover{background:var(--blue-h)}

.pill-btn:focus{outline:2px solid #fff;outline-offset:2px}

#form-modal{position:fixed!important;inset:0;background:rgba(0,0,0,.55);

display:none;align-items:center;justify-content:center;

z-index:2147483647!important}

#form-modal.show{display:flex;animation:fadeIn .25s}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-card{background:var(--modal-bg);border-radius:var(--modal-r);

max-width:520px;width:90%;padding:28px;

box-shadow:0 8px 24px rgba(0,0,0,.2);position:relative}

.modal-card h2{margin:0 0 8px;text-align:center;font:1.8rem var(--font);color:var(--blue)}

.modal-card label{display:block;margin:14px auto 4px;max-width:350px}

.modal-card input,.modal-card textarea,.modal-card select{

width:100%;max-width:350px;margin:0 auto;display:block;

padding:10px;border:1px solid #ccc;border-radius:4px;font:1rem var(--font)}

.modal-card textarea{resize:vertical;height:90px}

.close-x{position:absolute;top:12px;right:16px;font-size:1.5rem;border:none;background:none;cursor:pointer}

body.modal-open{overflow:hidden}

body.modal-open .schedule-btn{visibility:hidden}

</style>

<div id="form-modal" role="dialog" aria-modal="true">

<div class="modal-card">

<button class="close-x" aria-label="Close">&times;</button>

<h2>Tell us a bit about you</h2>

<form id="pre-calendly">

<label>Full name*<br><input name="name" required></label>

<label>Work email*<br><input type="email" name="email" required></label>

<label>Company*<br><input name="company" required></label>

<label>Revenue last year (USD)*<br>

<!-- id="revInput" ADDED – fixes the earlier crash -->

<select id="revInput" name="revenue" required>

<option value="" disabled selected>Select…</option>

<option>$0‑$1M</option><option>$1M‑$10M</option><option>$10M‑$50M</option>

<option>$50M‑$100M</option><option>$100M+</option>

</select>

</label>

<label>Estimated headcount*<br>

<select name="headcount" required>

<option value="" disabled selected>Select…</option>

<option>1‑10</option><option>11‑20</option><option>21‑50</option>

<option>50‑100</option><option>100+</option>

</select>

</label>

<label>What are your pain points?*<br>

<textarea name="pains" minlength="30" required></textarea>

</label>

<button type="submit" class="pill-btn" style="margin:18px auto 0">

Next → Pick a time

</button>

</form>

</div>

</div>

<!-- ========= 3. POPUP BEHAVIOUR ========= -->

<script>

document.addEventListener('DOMContentLoaded', function () {

const modal = document.getElementById('form-modal');

document.body.appendChild(modal); /* move outside Squarespace blocks */

/* open modal from any element that carries class="schedule-btn" */

document.addEventListener('click', e=>{

const b = e.target.closest('.schedule-btn'); if(!b) return;

modal.classList.add('show'); document.body.classList.add('modal-open');

});

/* close helpers */

modal.querySelector('.close-x').onclick = closeModal;

modal.addEventListener('click', e=>{ if(e.target===modal) closeModal(); });

function closeModal(){ modal.classList.remove('show'); document.body.classList.remove('modal-open'); }

/* form submit → EmailJS + Calendly */

document.getElementById('pre-calendly').onsubmit = e=>{

e.preventDefault();

const d = Object.fromEntries(new FormData(e.target));

/* replace with your real Service & Template IDs */

emailjs.send('YOUR_SERVICE_ID','YOUR_TEMPLATE_ID',d).catch(console.error);

const note = `Company: ${d.company}\nRevenue: ${d.revenue}\nHeadcount: ${d.headcount}\nChallenges: ${d.pains}`;

Calendly.initPopupWidget({

url:`https://calendly.com/summaconsulting/discovery?name=${encodeURIComponent(d.name)}&email=${encodeURIComponent(d.email)}&a1=${encodeURIComponent(note)}`

});

e.target.reset(); closeModal();

};

});

</script>