mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add low-friction 3-step lead form to contact section (posts to n8n)

Browse Source 
Soft conversion path alongside booking: situation -> optional detail -> name/email.
Honeypot-protected, posts JSON to https://n8n.shopwisdom.ca/webhook/oc-lead, with an
email fallback on error. Captures the 'interested but not ready to book' visitor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 21:26:47 -07:00
parent 05bf44e05c
commit 3537cd62f9
2 changed files with 110 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+25
View File
@@ -245,3 +245,28 @@ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-o
.logo-mark { width: 146px; }
.nav-links a:not(.nav-cta) { display: none; }
}
/* ── Lead form: low-friction 3-step ─────────────────────────────────────── */
.lf { max-width: 30rem; margin: 2.2rem auto 1.6rem; text-align: left; }
.lf-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 1.7rem; }
.lf-dot { width: 30px; height: 4px; border-radius: 2px; background: rgba(15, 23, 41, 0.12); transition: background-color 0.3s ease; }
.lf-dot.is-active { background: var(--amber); }
.lf-step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.lf-step.is-active { display: block; animation: lfIn 0.25s ease; }
@keyframes lfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lf-q { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin: 0 0 1.1rem; padding: 0; }
.lf-opt { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.lf-choices { display: flex; flex-direction: column; gap: 10px; }
.lf-choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Lora', Georgia, serif; font-size: 0.98rem; color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.lf-choice:hover { border-color: var(--amber); }
.lf-choice input { accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.lf-choice:has(input:checked) { border-color: var(--amber); background: rgba(232, 155, 28, 0.06); }
.lf-input { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; font-family: 'Lora', Georgia, serif; font-size: 1rem; color: var(--ink); background: #fff; margin-bottom: 12px; }
.lf-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 155, 28, 0.12); }
.lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-nav { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 1.3rem; }
.lf-nav .lf-back { margin-right: auto; }
.lf-done-msg { font-family: 'Lora', Georgia, serif; font-size: 1.12rem; line-height: 1.6; color: var(--ink); text-align: center; padding: 1.6rem 0; margin: 0; }
.lf-err { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #b4452f; margin: 1rem 0 0; }
.lf-err a { color: #b4452f; }
.lf-alt { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0.5rem 0 0.8rem; }