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 2026-11-02 15:26:31 +00:00
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">
{
@@ -783,6 +854,24 @@
<button type="submit" class="btn btn-brass btn-lg">Für 595.00 USD kaufen</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">Andere Zeitzone oder andere Sprache?</h3>
<p class="bc-wl-lead">Der Januar-Kurs läuft donnerstags 18:00&ndash;19:00 US-Zentralzeit, auf Englisch. Wenn Sie eine andere Uhrzeit oder eine andere Sprache brauchen, tragen Sie sich in die Warteliste ein. Wir schreiben Ihnen, sobald ein passender Kurs startet.</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">Ihre E-Mail-Adresse</label>
<input type="email" id="bcWaitlistEmail" name="email" placeholder="Ihre E-Mail-Adresse" required />
<label class="bc-sr-only" for="bcWaitlistComment">Welche Zeitzone oder Sprache Sie brauchen</label>
<textarea id="bcWaitlistComment" name="comment" rows="2" placeholder="Welche Zeitzone oder Sprache brauchen Sie?" required></textarea>
<button type="submit" class="btn bc-wl-btn" data-sending="Wird eingetragen&hellip;">In die Warteliste eintragen</button>
</form>
<p class="bc-wl-success" id="bcWaitlistSuccess" role="status" style="display:none">Sie stehen auf der Warteliste. Wir schreiben Ihnen, sobald ein Kurs in Ihrer Zeitzone oder Sprache angekündigt wird.</p>
<p class="bc-wl-error" id="bcWaitlistError" role="alert" style="display:none">Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.</p>
</div>
<ul class="bc-related">
<li><a href="/de/support.html#contact">Fragen vor der Buchung? Sprechen Sie zuerst mit uns</a></li>
<li><a href="/de/odoo-hosting-2027.html">Wie das Hosting nach Ihrem Jahr bei uns aussieht</a></li>
@@ -881,6 +970,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>