Skip to content

Commit de196b6

Browse files
author
Hugues Tennier
authored
Merge pull request #597 from jamstack/ht/add-survey-thank-you-page
Add Survey confirmation pages
2 parents 6ee4d82 + be2d91d commit de196b6

File tree

7 files changed

+139
-6
lines changed

7 files changed

+139
-6
lines changed

‎src/css/tailwind.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* import via postcss */
22
@import "../site/css/ticker.css";
3+
@import "../site/css/hubspot-form.css";
34

45
/* purgecss start ignore */
56
@tailwind base;

‎src/site/_data/announcementbar.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"text": "Learn more about Jamstack at this year's conference, October 6-7. ",
3-
"cta": "Register for free",
4-
"url": "https://jamstackconf.com/"
2+
"text": "Help the community by participating in the Jamstack Community Survey 2021.",
3+
"cta": "Take the 10-minute survey now.",
4+
"url": "https://www.surveymonkey.com/r/jamstack-org-survey"
55
}

‎src/site/_includes/components/zinger-cta.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
{% macro cta(text, url, theme, icon ) %}
3-
<a href="{{ url }}" target="_BLANK" rel="noopener" class="block mb-4 md:inline-block {{ theme }} bg-gradient-to-r border-none py-6 rounded-xl rounded-tr-none text-center">
4-
<svg role="img" aria-label="{{ text }}" aria-hidden="true" focusable="false" width="40" height="40" class="mx-auto"><use xlink:href="{{ icon }}"></use></svg>
5-
<p class="font-bold text-lg mt-2">
3+
<a href="{{ url }}" target="_BLANK" rel="noopener" class="block mb-4 md:inline-block {{ theme }} bg-gradient-to-r border-none p-6 rounded-xl rounded-tr-none text-center">
4+
{% if icon %}<svg role="img" aria-label="{{ text }}" aria-hidden="true" focusable="false" width="40" height="40" class="mx-auto"><use xlink:href="{{ icon }}"></use></svg>{% endif %}
5+
<p class="font-bold text-lg {% if icon %}mt-2{% endif %}">
66
{{ text }}
77
</p>
88
</a>

‎src/site/css/hubspot-form.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.hs-form .hs-input {
2+
@apply mb-3;
3+
@apply p-2;
4+
@apply bg-gray-400;
5+
@apply w-full;
6+
7+
color: white;
8+
}
9+
10+
.hs-form .hs-form-required {
11+
@apply hidden;
12+
}
13+
14+
.hs-form .hs-form-field label {
15+
@apply block;
16+
@apply mb-1;
17+
@apply font-bold;
18+
}
19+
20+
.hs-form .hs-form-field label.hs-error-msg {
21+
@apply text-red-300;
22+
@apply text-sm;
23+
@apply font-normal;
24+
}
25+
26+
.hs-form .hs-button {
27+
@apply inline-block;
28+
@apply bg-pink-900;
29+
@apply text-white;
30+
@apply rounded-full;
31+
@apply font-semibold;
32+
@apply px-4;
33+
@apply py-2;
34+
@apply border-none;
35+
@apply my-4;
36+
@apply card-shadow;
37+
}
38+
39+
.hs-form .hs-button:hover,
40+
.hs-form .hs-button:focus {
41+
@apply bg-orange-500;
42+
box-shadow: 0px 3px 15px rgba(241, 86, 77, 0.6);
43+
}
44+
45+
.survey-form .hs-form {
46+
@apply grid;
47+
@apply grid-cols-1;
48+
grid-gap: 1em;
49+
}
50+
51+
@media (min-width: 40em) { /* 640px */
52+
.survey-form .hs-form {
53+
grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
54+
}
55+
}
56+
57+
.survey-form .hs_email,
58+
.survey-form .hs_jamstack_survey_promo,
59+
.survey-form .hs_address {
60+
@apply col-span-full;
61+
}

‎src/site/survey-closed.njk‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Jamstack Sticker Giveaway
3+
description: Share the survey with your network and we’ll share some sticker love!
4+
layout: layouts/base.njk
5+
excludeFromSitemap: true
6+
---
7+
8+
{% import "components/zinger-cta.njk" as zinger %}
9+
10+
<section class="my-20">
11+
<h1>Thanks for filling out the Jamstack community survey</h1>
12+
{{ zinger.cta(
13+
"Share the survey",
14+
"https://twitter.com/intent/tweet?text=%F0%9F%8E%89I%20completed%20the%20Jamstack%20Community%20Survey.%20Share%20your%20feedback%20and%20unlock%20a%20special%20edition%20Jamstack%20sticker!&url=https%3A%2F%2Fwww.surveymonkey.com%2Fr%2Fjamstack-share-survey",
15+
"bg-gradient-card-sunrise card-shadow hover:card-shadow-sunrise mb-9"
16+
)
17+
}}
18+
<h2>Jamstack Sticker Giveaway</h2>
19+
<p class="font-semibold">Oh no! We’ve maxed out on our sticker giveaway.</p>
20+
<p>Thank you for taking the time to complete the survey. Please continue to share with your network, communities, and teams.</p>
21+
<p>Ready to connect with others in the Jamstack Community? Join the <a href="https://join.slack.com/t/jamstack/shared_invite/zt-qkent5tv-0D0Nu3M1rJEHhVHE4zUMBw">Jamstack Slack</a>!</p>
22+
</section>

‎src/site/survey-confirmation.njk‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Jamstack Sticker Giveaway
3+
description: Share the survey with your network and we’ll share some sticker love!
4+
layout: layouts/base.njk
5+
---
6+
7+
{% import "components/zinger-cta.njk" as zinger %}
8+
9+
<section class="my-20">
10+
<h1>Thanks for filling out the Jamstack community survey</h1>
11+
{{ zinger.cta(
12+
"Share the survey",
13+
"https://twitter.com/intent/tweet?text=%F0%9F%8E%89I%20completed%20the%20Jamstack%20Community%20Survey.%20Share%20your%20feedback%20and%20unlock%20a%20special%20edition%20Jamstack%20sticker!&url=https%3A%2F%2Fwww.surveymonkey.com%2Fr%2Fjamstack-share-survey",
14+
"bg-gradient-card-sunrise card-shadow hover:card-shadow-sunrise mb-9"
15+
)
16+
}}
17+
18+
<h2>Jamstack Sticker Giveaway</h2>
19+
20+
<p>Share the survey with your network and we’ll share some sticker love! Complete this form, including a link to your shared post (social, blog, newsletter), and we’ll get your sticker in the mail.</p>
21+
<p class="text-xs">*Offer is limited to the first 1,000 respondents.</p>
22+
23+
<div class="my-8 survey-form">
24+
<!--[if lte IE 8]>
25+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
26+
<![endif]-->
27+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
28+
<script>
29+
hbspt.forms.create({
30+
region: "na1",
31+
portalId: "7477936",
32+
formId: "632eaa19-27d2-42b7-bef4-7bfd35531865"
33+
});
34+
</script>
35+
</div>
36+
<p>Stickers will be sent after campaign has ended, or maximum has been reached. Stickers will be shipped with U.S. domestic or international postage stamps. Delivery is not guarenteed or trackable.</p>
37+
</section>

‎src/site/survey-thanks.njk‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Jamstack Sticker Giveaway
3+
description: Share the survey with your network and we’ll share some sticker love!
4+
layout: layouts/base.njk
5+
excludeFromSitemap: true
6+
---
7+
8+
<section class="my-20">
9+
<h1>We’ve received your sticker request!</h1>
10+
<p>Stickers will be sent after campaign has ended, or maximum has been reached. Stickers will be shipped with U.S. domestic or international postage stamps. Delivery is not guarenteed or trackable.</p>
11+
<p>Ready to connect with others in the Jamstack Community? Join the <a href="https://join.slack.com/t/jamstack/shared_invite/zt-qkent5tv-0D0Nu3M1rJEHhVHE4zUMBw">Jamstack Slack</a>!</p>
12+
</section>

0 commit comments

Comments
 (0)