Add a hero image (rendered from the redesigned PDF's own cover) so the opt-in page shows the actual resource instead of pure text, and make the post-submit message PDF-specific with a working /gift-thanks fallback link instead of a generic dead-end "check your inbox" line. Both are opt-in per-page params (hero_image, success_message) so the real drip-course page's rendering is unchanged.
This commit is contained in:
@@ -251,6 +251,15 @@ input:focus, textarea:focus {
|
|||||||
color: var(--fg-muted);
|
color: var(--fg-muted);
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
.course-hero-image {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 320px;
|
||||||
|
height: auto;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
.course-value-prop {
|
.course-value-prop {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
margin: 1.5rem 0;
|
margin: 1.5rem 0;
|
||||||
|
|||||||
@@ -7,9 +7,15 @@ eec_slug: "three-steps-find-your-right-readers"
|
|||||||
# Optional italic line under the title, for handling an objection up front.
|
# Optional italic line under the title, for handling an objection up front.
|
||||||
hero_subhead: "Three concrete steps to find the readers who actually want your stories — free PDF, no fluff, sent straight to your inbox."
|
hero_subhead: "Three concrete steps to find the readers who actually want your stories — free PDF, no fluff, sent straight to your inbox."
|
||||||
|
|
||||||
|
# Optional image shown in the hero, below the subhead.
|
||||||
|
hero_image: "/images/gift-cover.png"
|
||||||
|
|
||||||
# Optional label on every "Send me day one" button across the page.
|
# Optional label on every "Send me day one" button across the page.
|
||||||
cta_text: "Send me the PDF"
|
cta_text: "Send me the PDF"
|
||||||
|
|
||||||
# Optional heading above the repeated signup form at the bottom of the page.
|
# Optional heading above the repeated signup form at the bottom of the page.
|
||||||
repeat_cta_heading: "Ready to find your right readers?"
|
repeat_cta_heading: "Ready to find your right readers?"
|
||||||
|
|
||||||
|
# Optional override of the enroll form's post-submit message (rendered as markdown).
|
||||||
|
success_message: "Check your inbox — we've sent your PDF. Can't find it? [Grab it here](/gift-thanks)."
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<section class="course-hero">
|
<section class="course-hero">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
{{ with .Params.hero_subhead }}<p class="course-subhead">{{ . }}</p>{{ end }}
|
{{ with .Params.hero_subhead }}<p class="course-subhead">{{ . }}</p>{{ end }}
|
||||||
|
{{ with .Params.hero_image }}<img class="course-hero-image" src="{{ . }}" alt="">{{ end }}
|
||||||
|
|
||||||
{{ partial "course-enroll-form.html" (dict "id" "top" "page" .) }}
|
{{ partial "course-enroll-form.html" (dict "id" "top" "page" .) }}
|
||||||
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
var form = document.getElementById("enroll-form-{{ $id }}");
|
var form = document.getElementById("enroll-form-{{ $id }}");
|
||||||
var status = document.getElementById("enroll-status-{{ $id }}");
|
var status = document.getElementById("enroll-status-{{ $id }}");
|
||||||
var slug = {{ $page.Params.eec_slug }};
|
var slug = {{ $page.Params.eec_slug }};
|
||||||
|
var successMessage = {{ ($page.Params.success_message | default "Check your inbox — let us know you're ready and we'll get started.") | markdownify }};
|
||||||
form.addEventListener("submit", function (e) {
|
form.addEventListener("submit", function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (form.website.value) return; // honeypot
|
if (form.website.value) return; // honeypot
|
||||||
@@ -32,7 +33,7 @@
|
|||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
form.reset();
|
form.reset();
|
||||||
form.hidden = true;
|
form.hidden = true;
|
||||||
status.textContent = "Check your inbox — let us know you're ready and we'll get started.";
|
status.innerHTML = successMessage;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
return res.text().then(function (msg) {
|
return res.text().then(function (msg) {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Reference in New Issue
Block a user