will
cf87ca5658
deploy / deploy (push) Successful in 3s
Both forms nested their status message as a child of the <form>, so form.hidden = true on success hid the confirmation right along with it — looked like nothing happened. Contact form now resets and stays usable (you can send another message) instead of disappearing; enroll form still hides after signup (no reason to sign up twice), but its confirmation is now a sibling so it actually stays visible. Also generalized the privacy policy's language from being anchored on email courses specifically to covering any use of the site.
47 lines
1.8 KiB
HTML
47 lines
1.8 KiB
HTML
{{ define "main" }}
|
|
<h1 style="font-size:2rem; margin-bottom:0.5rem;">{{ .Title }}</h1>
|
|
{{ with .Params.pitch }}<div style="font-size:1.05rem; opacity:0.9;">{{ . | markdownify }}</div>{{ end }}
|
|
{{ .Content }}
|
|
|
|
<form id="enroll-form" style="margin-top:2rem; max-width:24rem;">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required autocomplete="email" placeholder="you@example.com">
|
|
|
|
<div class="field-honeypot" aria-hidden="true">
|
|
<label for="website">Leave this field empty</label>
|
|
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
|
|
<button type="submit" class="btn">Send me day one</button>
|
|
</form>
|
|
<p id="enroll-status" role="status" style="margin-top:1rem;"></p>
|
|
|
|
<script>
|
|
(function () {
|
|
var form = document.getElementById("enroll-form");
|
|
var status = document.getElementById("enroll-status");
|
|
var slug = {{ .Params.eec_slug }};
|
|
form.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
if (form.website.value) return; // honeypot
|
|
var submitBtn = form.querySelector("button[type=submit]");
|
|
submitBtn.disabled = true;
|
|
status.textContent = "Signing you up…";
|
|
fetch("{{ .Site.Params.eec_base_url }}/courses/" + slug + "/enroll", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: form.email.value })
|
|
}).then(function (res) {
|
|
if (!res.ok) throw new Error("request failed");
|
|
form.reset();
|
|
form.hidden = true;
|
|
status.textContent = "Check your inbox — day one is on its way.";
|
|
}).catch(function () {
|
|
submitBtn.disabled = false;
|
|
status.textContent = "Something went wrong. Try again in a moment.";
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{{ end }}
|