add GDPR unit to newsletter form

This commit is contained in:
Matthias Kretschmann 2018-05-09 12:32:44 +02:00
parent 118f458c3c
commit 799a412e5f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 110 additions and 59 deletions

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="26" viewBox="0 0 23 26">
<g fill="none" transform="translate(1 .861)">
<path d="M10.501,17.211 C10.501,17.211 16.29,13.043 16.29,9.955 C16.29,6.391 11.553,5.266 10.501,9.598 C9.447,5.266 4.71,6.391 4.71,9.955 C4.71,13.043 10.501,17.211 10.501,17.211 Z"/>
<path stroke="currentColor" d="M10.508,0.5 L10.491,0.5 C8,2.997 0.5,5.021 0.5,5.021 C0.5,12.983 1,19.983 10.5,23.5 C20,19.982 20.5,12.982 20.5,5.021 C20.5,5.021 13,2.997 10.508,0.5 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 524 B

View File

@ -90,3 +90,4 @@
@import '_sections/section-partners';
@import '_sections/section-blog';
@import '_sections/section-getstarted';
@import '_sections/section-newsletter';

View File

@ -0,0 +1,85 @@
.section--newsletter {
background: $brand-primary;
align-items: flex-start;
.form-group,
.grid { margin-bottom: 0; }
.form-control {
border-color: $gray-dark;
&:focus {
border-color: #000;
}
}
.btn {
background: $brand-main-blue;
}
.form-label,
.form-control,
.form-control:focus ~ .form-label {
color: $gray-dark;
}
.form-control-feedback {
@extend .bold;
margin-top: $spacer / 2;
}
.form--newsletter {
margin-top: $spacer * 2;
}
}
.newsletter__title {
@extend .h5;
margin-top: 0;
margin-bottom: $spacer / 4;
}
.newsletter__title,
.newsletter__text,
.newsletter__gdpr {
color: $gray-dark;
}
.form__gdpr {
opacity: .8;
font-size: $font-size-sm;
position: relative;
.icon {
stroke: #fff;
color: #fff;
stroke-width: 1.5;
opacity: .5;
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: -.25rem;
top: .25rem;
}
.text {
margin-left: $spacer * 2;
}
}
.newsletter__gdpr {
.icon {
stroke: $brand-main-blue;
color: $brand-main-blue;
}
a {
box-shadow: inset 0 -1px 0 $brand-main-blue;
&:hover,
&:focus {
background: $brand-main-blue;
}
}
}

View File

@ -44,7 +44,6 @@
@import 'bigchain/content-page';
@import 'bigchain/comments';
@import 'bigchain/toc';
@import 'bigchain/newsletter';
@import 'bigchain/testimonials';
// Section specific styles

View File

@ -1,54 +0,0 @@
.section-newsletter {
background: $brand-primary;
// .sections redefinitions
padding-top: $spacer;
padding-bottom: $spacer;
@media ($screen-sm) {
padding-top: ($spacer * 3);
padding-bottom: ($spacer * 3);
}
}
.newsletter {
p,
.form-group { margin: 0; }
.grid { margin-bottom: 0; }
.form-control {
border-color: $gray-dark;
&:focus {
border-color: #000;
}
}
.btn {
background: $brand-main-blue;
}
.form-label,
.form-control,
.form-control:focus ~ .form-label {
color: $gray-dark;
}
.form-control-feedback {
@extend .bold;
margin-top: ($spacer / 2);
}
}
.newsletter__title {
@extend .h5;
margin-top: 0;
margin-bottom: $spacer / 4;
}
.newsletter__title,
.newsletter__text {
color: $gray-dark;
}

5
_src/_data/gdpr.yml Normal file
View File

@ -0,0 +1,5 @@
newsletter: >
We will only use your email to send you our newsletter and by submitting this form you give us permission to do so. You can change your mind at anytime by clicking the unsubscribe link of any newsletter you receive from us. For more information visit our [Privacy Policy](/pivacy/).
We use Formspree to send this form and MailChimp for our newsletter. By submitting this form, you acknowledge that the information you provide will be transferred to Formspree & MailChimp for processing in accordance with their [Privacy](https://formspree.io/static/PrivacyPolicy.pdf) [Policies](https://mailchimp.com/legal/privacy/).

View File

@ -1,5 +1,5 @@
<form id="newsletter"
class="form-newsletter js-parsley"
class="form--newsletter js-parsley"
action="//ascribe.us9.list-manage.com/subscribe/post?u=56f2d3da26a7d407177d3fba3&id=0a99a9481e"
method="post">

View File

@ -1,8 +1,8 @@
<section class="section section-newsletter newsletter">
<section class="section section--newsletter">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters grid--center">
<div class="grid grid--full grid-medium--half grid--gutters grid--center">
<div class="grid__col">
<h1 class="newsletter__title">
{% if page.newsletter.title %}
@ -18,10 +18,19 @@
No more than one email per month. We're busy too.
{% endif %}
</p>
{% include form-newsletter.html %}
</div>
<div class="grid__col">
{% include form-newsletter.html %}
<div class="form__gdpr newsletter__gdpr">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-heart-protect"></use>
</svg>
<div class="text">
{{ site.data.gdpr.newsletter | markdownify }}
</div>
</div>
</div>
</div>