mike/shopwisdom-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; SW steel/Georgia styling. Posts JSON to
https://n8n.shopwisdom.ca/webhook/sw-lead, honeypot-protected, email fallback.
Staging branch only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 21:26:51 -07:00
parent a1482e6152
commit c9776d053b
2 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+25
View File
@@ -241,3 +241,28 @@ blockquote p { margin: 0; font-style: italic; color: var(--ink-soft); }
.hero { padding: 56px 0 44px; }
section { padding: 48px 0; }
}
/* ── Lead form: low-friction 3-step ─────────────────────────────────────── */
.lf { max-width: 30rem; margin: 2rem auto 1.4rem; text-align: left; }
.lf-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 1.6rem; }
.lf-dot { width: 30px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color 0.3s ease; }
.lf-dot.is-active { background: var(--steel); }
.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: Georgia, serif; font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink); margin: 0 0 1rem; padding: 0; }
.lf-opt { font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; color: var(--ink-soft); font-weight: normal; }
.lf-choices { display: flex; flex-direction: column; gap: 10px; }
.lf-choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 6px; font-family: Georgia, serif; font-size: 0.98rem; color: var(--ink); background: var(--panel); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.lf-choice:hover { border-color: var(--steel); }
.lf-choice input { accent-color: var(--steel); width: 16px; height: 16px; flex: none; }
.lf-choice:has(input:checked) { border-color: var(--steel); background: rgba(44, 93, 124, 0.06); }
.lf-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-family: Georgia, serif; font-size: 1rem; color: var(--ink); background: var(--panel); margin-bottom: 12px; }
.lf-input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(44, 93, 124, 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.2rem; }
.lf-nav .lf-back { margin-right: auto; }
.lf-done-msg { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.6; color: var(--ink); text-align: center; padding: 1.4rem 0; margin: 0; }
.lf-err { font-family: Verdana, Geneva, sans-serif; font-size: 0.85rem; color: #b4452f; margin: 1rem 0 0; }
.lf-err a { color: #b4452f; }
.lf-alt { font-family: Verdana, Geneva, sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: 0.4rem 0 0.7rem; }