Public Access
feat(bootcamp): waiting-list form for another timezone or language
Three bootcamp pages (EN/DE/ES) get a small waiting-list block below the Buy button, in the Price and booking section next to the live seat count. - two required fields: email + comment; framed as "another timezone or language?" and worded around the January cohort's own schedule - posts to the same n8n CRM webhook as the site's other forms, with the footer-message payload shape copied exactly: area:'message', requirements carries the comment, no name field, wrapped in UTM.inject() - success hides the form and shows a confirmation; a failure restores the button and shows a retryable error (never stuck on "sending") - Plausible event 'Bootcamp Waitlist' on success only (cookieless); no Google Ads tag and no conversion, as on the rest of these pages - new page-local /static/bootcamp-waitlist.js carries the verbatim UTM helpers from script.js (this page does not load script.js) - buying is untouched: no markup change to the three product-17 forms Verified: exact posted body per language captured on the wire, success and error states in a real browser, 375 px no overflow, verify-html 0, JS syntax 0, competitor QC 0 new, impeccable detect byte-identical (zero new findings).
This commit is contained in:
webmaster committed
1 parent
812571b177
commit
8f72652ada
4 files changed
+393
No files matched your search
@@ -452,6 +452,77 @@
|
||||
.btn-brass:focus-visible {
|
||||
outline-color: #fff;
|
||||
}
|
||||
/* Waiting list — for someone who cannot attend the January cohort.
|
||||
Deliberately quieter than the Buy button: outline button, smaller type, no brass fill. */
|
||||
.bc-waitlist {
|
||||
/* Component-scoped error colour: the site has no shared token for it. */
|
||||
--wl-error: #b02a37;
|
||||
max-width: 720px;
|
||||
margin: 2.5rem auto 0;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--ivory);
|
||||
text-align: left;
|
||||
}
|
||||
.bc-wl-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
.bc-wl-lead {
|
||||
margin: 0 0 1.1rem;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(23, 28, 38, 0.78); /* the page's own .bc-note value, on the same cream */
|
||||
}
|
||||
.bc-wl-form input,
|
||||
.bc-wl-form textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0.6rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.bc-wl-form textarea {
|
||||
min-height: 3.4rem;
|
||||
resize: vertical;
|
||||
}
|
||||
.bc-wl-btn {
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.8rem;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border-color: rgba(23, 28, 38, 0.35);
|
||||
}
|
||||
.bc-wl-btn:hover {
|
||||
border-color: var(--brass);
|
||||
background: rgba(201, 162, 39, 0.12);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.bc-wl-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.bc-wl-success {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--success);
|
||||
}
|
||||
.bc-wl-error {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--wl-error);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -801,6 +872,24 @@
|
||||
<button type="submit" class="btn btn-brass btn-lg">Buy for 595.00 USD</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Waiting list: for a visitor who cannot attend the January cohort.
|
||||
Secondary to the Buy button above. Same CRM webhook and same payload shape as the
|
||||
site's footer contact form (area:'message'); the copy lives here, in the page's
|
||||
language, and /static/bootcamp-waitlist.js carries no strings. -->
|
||||
<div class="bc-waitlist">
|
||||
<h3 class="bc-wl-title">Another timezone or language?</h3>
|
||||
<p class="bc-wl-lead">The January cohort runs Thursdays 18:00–19:00 Central Time, in English. If you need a different time or another language, join the waiting list and we will write to you when a cohort that fits opens.</p>
|
||||
<form id="bcWaitlistForm" class="bc-wl-form" action="mailto:hello@odoo4projects.com" method="post" enctype="text/plain">
|
||||
<label class="bc-sr-only" for="bcWaitlistEmail">Your email address</label>
|
||||
<input type="email" id="bcWaitlistEmail" name="email" placeholder="Your email address" required />
|
||||
<label class="bc-sr-only" for="bcWaitlistComment">Which timezone or language you need</label>
|
||||
<textarea id="bcWaitlistComment" name="comment" rows="2" placeholder="Which timezone or language do you need?" required></textarea>
|
||||
<button type="submit" class="btn bc-wl-btn" data-sending="Adding you…">Join the waiting list</button>
|
||||
</form>
|
||||
<p class="bc-wl-success" id="bcWaitlistSuccess" role="status" style="display:none">You are on the waiting list. We will write to you as soon as a cohort in your timezone or language is announced.</p>
|
||||
<p class="bc-wl-error" id="bcWaitlistError" role="alert" style="display:none">Something went wrong. Please try again.</p>
|
||||
</div>
|
||||
<ul class="bc-related">
|
||||
<li><a href="/support.html#contact">Questions before you book? Talk to us first</a></li>
|
||||
<li><a href="/workshops/">All our live courses, side by side</a></li>
|
||||
@@ -901,6 +990,7 @@
|
||||
</footer>
|
||||
<script defer src="/static/buy.js"></script>
|
||||
<script defer src="/static/bootcamp-availability.js"></script>
|
||||
<script defer src="/static/bootcamp-waitlist.js"></script>
|
||||
<script defer src="/static/lang.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user