Skip to content

Commit dd3e462

Browse files
cjyabrahamcjyabraham
committed
Add newsletter form to site footer
Signed-off-by: Chris Abraham <[email protected]>
1 parent d9eb138 commit dd3e462

File tree

3 files changed

+237
-2
lines changed

3 files changed

+237
-2
lines changed

‎_includes/footer.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,30 @@ <h2>Resources</h2>
2424

2525
<footer class="site-footer">
2626
<div class="container footer-container">
27+
28+
<div class="newsletter" id="newsletter">
29+
30+
<p
31+
class="newsletter__title is-style-max-width-800"><strong>Stay in touch</strong> for updates, event info, and the latest news</p>
32+
33+
34+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
35+
<script>
36+
hbspt.forms.create({
37+
region: "na1",
38+
portalId: "8112310",
39+
formId: "2fb2231c-000b-4ec5-88a0-1ab242549c9e"
40+
});
41+
</script>
42+
43+
44+
<p
45+
class="newsletter__privacy">By submitting this form, I consent to receive marketing emails from the LF and its projects regarding their events, training, research, developments, and related announcements. I understand that I can unsubscribe at any time using the links in the footers of the emails I receive. <a href="https://www.linuxfoundation.org/privacy/">Privacy Policy</a>.</p>
46+
47+
</div>
48+
49+
50+
2751
<div class="lf-grid">
2852
<div class="footer-logo-wrapper">
2953
<a href="{{ site.url }}{{ site.baseurl }}" class="footer-logo">

‎_sass/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $mid_gray: #797676;
2323

2424
$desktop_header_height: 90px;
2525
$mobile_header_height: 68px;
26-
$desktop_footer_height: 360px;
26+
$desktop_footer_height: 620px;
2727
$site_horizontal_padding: 30px;
2828

2929
@import "../node_modules/bootstrap/scss/variables";

‎_sass/footer.scss

Lines changed: 212 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,4 +290,215 @@
290290
grid-row-gap: 30px;
291291
display: grid;
292292
grid-template-columns: repeat(12,1fr);
293-
}
293+
}
294+
295+
// removes captcha image from flow.
296+
.hs-recaptcha {
297+
display: none;
298+
}
299+
300+
.newsletter {
301+
line-height: 140%;
302+
margin-bottom: 80px;
303+
304+
&__title {
305+
line-height: 140%;
306+
font-size: 24px;
307+
@media (min-width: 1000px) {
308+
font-size: 40px;
309+
}
310+
}
311+
312+
.legal-consent-container {
313+
display: none;
314+
}
315+
316+
p.newsletter__privacy {
317+
max-width: 860px;
318+
margin-top: 30px;
319+
font-size: 14px;
320+
color: #dfdfdf;
321+
a {
322+
font-weight: 800;
323+
}
324+
}
325+
326+
// form container.
327+
.hbspt-form {
328+
min-height: 300px;
329+
@media (min-width: 500px) {
330+
min-height: 100px;
331+
}
332+
@media (min-width: 1000px) {
333+
min-height: 20px;
334+
}
335+
336+
// Displays if required field not filled.
337+
.hs-error-msg {
338+
display: block;
339+
margin-right: 8px;
340+
color: $orange;
341+
font-size: 14px;
342+
line-height: 1.1em;
343+
width: 95%;
344+
padding-top: 15px;
345+
}
346+
347+
// form inputs wrapper.
348+
.hs-form {
349+
display: grid;
350+
grid-template-columns: 1fr;
351+
grid-gap: 30px;
352+
353+
@media (min-width: 500px) {
354+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
355+
}
356+
357+
@media (min-width: 700px) {
358+
grid-template-columns: repeat(3, minmax(0, 1fr));
359+
}
360+
361+
@media (min-width: 950px) {
362+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
363+
grid-row-gap: 1.5rem;
364+
grid-column-gap: 1.5rem;
365+
}
366+
367+
input[type='text'],
368+
input[type='email'] {
369+
height: 50px;
370+
@media (min-width: 500px) {
371+
height: 42px;
372+
}
373+
width: 100%;
374+
background: transparent;
375+
border: none;
376+
border-bottom: 2px solid $white;
377+
border-radius: 0;
378+
transition: all 0.25s ease;
379+
color: $white;
380+
font-size: 16px;
381+
@media (min-width: 500px) {
382+
font-size: 20px;
383+
}
384+
line-height: 105%;
385+
&::placeholder {
386+
color: $white;
387+
font-size: 16px;
388+
@media (min-width: 500px) {
389+
font-size: 20px;
390+
}
391+
line-height: 105%;
392+
}
393+
&:focus {
394+
outline: 0;
395+
border-bottom: 2px solid $orange;
396+
transition: color 0.25s ease;
397+
&::placeholder {
398+
transition: color 0.25s ease;
399+
color: transparent;
400+
}
401+
}
402+
}
403+
404+
// Controls autocomplete styles.
405+
input,
406+
textarea,
407+
select {
408+
&:-webkit-autofill,
409+
&:-webkit-autofill:hover,
410+
&:-webkit-autofill:focus {
411+
-webkit-text-fill-color: $white;
412+
}
413+
}
414+
415+
select {
416+
appearance: none;
417+
background: transparent;
418+
border: 0px solid transparent;
419+
border-bottom: 2px solid $white;
420+
border-radius: 0;
421+
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0);
422+
display: block;
423+
height: 50px;
424+
@media (min-width: 500px) {
425+
height: 42px;
426+
}
427+
margin: 0;
428+
max-width: 100%;
429+
padding: 0.25em 0 calc(0.25em + 1px) 5px;
430+
transition: all 0.25s ease;
431+
width: 100%;
432+
color: $white;
433+
font-size: 16px;
434+
@media (min-width: 500px) {
435+
font-size: 20px;
436+
}
437+
line-height: 105%;
438+
439+
&::-ms-expand {
440+
display: none;
441+
}
442+
443+
&:focus {
444+
outline: 0;
445+
border-bottom: 2px solid $orange;
446+
&::placeholder {
447+
transition: color 0.4s ease;
448+
color: transparent;
449+
}
450+
}
451+
452+
option {
453+
font-weight: normal;
454+
color: black;
455+
}
456+
}
457+
458+
.hs-button {
459+
border-radius: 5px;
460+
margin-top: 20px;
461+
border: none;
462+
background-color: $orange;
463+
color: $white;
464+
font-weight: 400;
465+
padding: 11px 40px;
466+
font-size: 16px;
467+
font-weight: 700;
468+
text-decoration: none;
469+
}
470+
471+
// underline errors.
472+
.hs-input.invalid {
473+
border-bottom: 2px dashed red !important;
474+
}
475+
476+
// hide general error message.
477+
.hs_error_rollup {
478+
display: none;
479+
}
480+
}
481+
}
482+
483+
// success message for newsletter footer only.
484+
.submitted-message {
485+
display: flex;
486+
align-content: center;
487+
align-items: center;
488+
justify-content: center;
489+
border: 2px solid $white;
490+
min-height: 280px;
491+
font-size: 18px;
492+
padding: 20px 20px 0;
493+
@media (min-width: 500px) {
494+
min-height: 80px;
495+
}
496+
@media (min-width: 1000px) {
497+
min-height: unset;
498+
}
499+
}
500+
501+
.submitted-message p {
502+
max-width: none;
503+
}
504+
}

0 commit comments

Comments
 (0)