<section class="o-mailchimp o-mailchimp--static" data-mailchimp="iis-mailchimp-static-form" id="iis-mailchimp-static-form">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
<p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
</div>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<fieldset class="field-group">
<legend>Årskurs</legend>
<div class="checkbox">
<input id="F-3" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="F-3" />
<label for="F-3" class="u-p-r-0"><span>F-3</span></label>
</div>
<div class="checkbox">
<input id="4-6" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="4-6" />
<label for="4-6" class="u-p-r-0"><span>4-6</span></label>
</div>
<div class="checkbox">
<input id="7-9" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="7-9" />
<label for="7-9" class="u-p-r-0"><span>7-9</span></label>
</div>
<div class="checkbox">
<input id="Gymnasiet" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="Gymnasiet" />
<label for="Gymnasiet" class="u-p-r-0"><span>Gymnasiet</span></label>
</div>
</fieldset>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">Integritetspolicy</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-static-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-static-form" class="u-p-r-0"><span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span></label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">Prenumerera</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="o-mailchimp o-mailchimp--sliding" data-mailchimp="iis-mailchimp-sliding-form" id="iis-mailchimp-sliding-form" data-slider-delay="5000" aria-hidden="true">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup" aria-controls="iis-mailchimp-sliding-form">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
<p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
</div>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<fieldset class="field-group">
<legend>Årskurs</legend>
<div class="checkbox">
<input id="F-3" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="F-3" />
<label for="F-3" class="u-p-r-0"><span>F-3</span></label>
</div>
<div class="checkbox">
<input id="4-6" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="4-6" />
<label for="4-6" class="u-p-r-0"><span>4-6</span></label>
</div>
<div class="checkbox">
<input id="7-9" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="7-9" />
<label for="7-9" class="u-p-r-0"><span>7-9</span></label>
</div>
<div class="checkbox">
<input id="Gymnasiet" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="Gymnasiet" />
<label for="Gymnasiet" class="u-p-r-0"><span>Gymnasiet</span></label>
</div>
</fieldset>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">Integritetspolicy</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-sliding-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-sliding-form" class="u-p-r-0">
<span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">Prenumerera</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="o-mailchimp o-mailchimp--static" data-mailchimp="iis-mailchimp-static-form" id="iis-mailchimp-static-form">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
{{#if has_image}}
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
{{else}}
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<div class="o-mailchimp__image-missing">
{{>@icon id="email"}}
</div>
</div>
{{/if}}
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">{{heading}}</h1>
<p class="o-mailchimp__preamble">{{preable}}</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">{{label}}</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="{{label}}" required/>
</div>
</div>
{{#if has_groups}}
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<fieldset class="field-group">
<legend>{{group_name}}</legend>
{{#each groups}}
<div class="checkbox">
<input id="{{text}}" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="{{text}}" />
<label for="{{text}}" class="u-p-r-0"><span>{{{text}}}</span></label>
</div>
{{/each}}
</fieldset>
</div>
{{/if}}
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">{{policy_agree_short}}</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-static-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-static-form" class="u-p-r-0"><span>{{{policy_agree}}}</span></label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">{{subscribe}}</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="o-mailchimp o-mailchimp--sliding" data-mailchimp="iis-mailchimp-sliding-form" id="iis-mailchimp-sliding-form" data-slider-delay="5000" aria-hidden="true">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup" aria-controls="iis-mailchimp-sliding-form">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
{{#if has_image}}
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
{{else}}
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<div class="o-mailchimp__image-missing">
{{>@icon id="email"}}
</div>
</div>
{{/if}}
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">{{heading}}</h1>
<p class="o-mailchimp__preamble">{{preable}}</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">{{label}}</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="{{label}}" required/>
</div>
</div>
{{#if has_groups}}
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<fieldset class="field-group">
<legend>{{group_name}}</legend>
{{#each groups}}
<div class="checkbox">
<input id="{{text}}" name="groups" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="{{text}}" />
<label for="{{text}}" class="u-p-r-0"><span>{{{text}}}</span></label>
</div>
{{/each}}
</fieldset>
</div>
{{/if}}
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">{{policy_agree_short}}</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-sliding-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-sliding-form" class="u-p-r-0">
<span>{{{policy_agree}}}</span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">{{subscribe}}</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
{
"has_image": true,
"heading": "Nyhetsbrev från Internetstiftelsen",
"preable": "Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!",
"label": "Din e-postadress",
"policy_agree": "Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href=\"https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/\" target=\"_blank\" class=\"u-link\">integritetspolicyn</a>",
"policy_agree_short": "Integritetspolicy",
"subscribe": "Prenumerera",
"email_help_text": "E-post är obligatoriskt",
"has_groups": true,
"group_name": "Årskurs",
"groups": [
{
"text": "F-3"
},
{
"text": "4-6"
},
{
"text": "7-9"
},
{
"text": "Gymnasiet"
}
]
}
@charset 'UTF-8';
@include organism(mailchimp) {
clear: both;
@include e(wrapper) {
@include card-shadow($color-cyberspace, 0.2);
margin-top: rhythm(4);
margin-bottom: rhythm(8);
padding: rhythm(2);
border-radius: $border-radius;
background-color: $color-snow;
}
@include e(close) {
display: none;
}
@include e(image-container) {
margin-bottom: rhythm(2);
@include bp-up(lg) {
display: flex;
display: -webkit-box; // Weird Sarafi bug needs this
width: 50%;
margin-bottom: 0;
}
}
@include e(image) {
display: block;
flex-grow: 0;
border-radius: $border-radius;
object-fit: cover;
}
@include e(image-missing) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: rhythm(4);
border-radius: $border-radius;
background-color: $color-cyberspace;
svg {
width: 80%;
height: 80%;
min-height: rhythm(20);
fill: $color-jade;
}
}
@include e(content) {
padding: 0 rhythm(3) 0 rhythm(3);
@include bp-up(lg) {
padding-right: rhythm(4);
}
}
@include m(sliding) {
position: fixed;
z-index: z_index(foregroundMinus);
top: rhythm(1);
right: -500px;
bottom: rhythm(1);
max-width: 420px;
transition: right ease-out 0.35s;
&.is-visible {
right: 0;
@include e(wrapper) {
display: block;
border: 1px solid $color-ash;
}
}
@include bp-up(sm) {
top: auto;
}
@include e(wrapper) {
display: none;
margin-top: 0;
margin-bottom: 0;
}
@include e(row-bottom) {
max-height: calc(100vh - 94px);
overflow-x: hidden;
overflow-y: auto;
@include bp-up(sm) {
max-height: none;
overflow: visible;
}
}
@include e(close) {
display: flex;
}
@include e(image-container) {
display: none;
}
@include e(content) {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding-right: rhythm(3);
padding-bottom: rhythm(2);
overflow-y: auto;
max-height: calc(100vh - 77px);
}
@include b(m-form__row) {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
}
}
import debounce from '../../assets/js/debounce';
const slidingForm = document.querySelector('[class*="--sliding"]');
const staticForm = document.querySelector('[class*="--static"]');
const closeButton = document.querySelector('[class*="--sliding"] .js-close-mailchimp-popup');
let timeout;
let timer;
const throttle = 66; // Trigger event every 66ms
const visibleClass = 'is-visible';
const cookieName = 'internetstiftelsen-mailchimp-form-closed';
const currentProtocol = document.location.protocol;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const noForm = urlParams.get('noForm');
// Set cookie
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
if (currentProtocol === 'https:') {
document.cookie = `${name}=${value};path=/;SameSite=Strict;Secure;expires=${d.toGMTString()}`;
} else {
document.cookie = `${name}=${value};path=/;SameSite=Strict;expires=${d.toGMTString()}`;
}
}
// Get cookie
function getCookie(name) {
const v = document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
return v ? v[2] : null;
}
// User is sent from email campaign with URL parameter ?noForm=true,
// set cookie and don't show slide-in form
if (noForm) {
setCookie(cookieName, 'YES', 7);
}
if (slidingForm) {
timeout = slidingForm.getAttribute('data-slider-delay');
// Add hidden attribute on page load
slidingForm.setAttribute('aria-hidden', 'true');
}
function isInViewport(element) {
let top = element.offsetTop;
const height = element.offsetHeight;
while (element.offsetParent) {
element = element.offsetParent; // eslint-disable-line
top += element.offsetTop;
}
return (
top < (window.pageYOffset + window.innerHeight)
&& (top + height) > window.pageYOffset
);
}
function slideForm() {
if (!getCookie(cookieName)) {
const inViewport = isInViewport(staticForm);
clearTimeout(timer);
if (!inViewport) {
// The static form is not in the viewport, start timeout to show the sliding form
timer = setTimeout(() => {
slidingForm.classList.add(visibleClass);
slidingForm.setAttribute('aria-hidden', 'false');
}, timeout);
} else {
slidingForm.classList.remove(visibleClass);
slidingForm.setAttribute('aria-hidden', 'true');
}
}
}
const elementIsInViewport = debounce(() => {
if (slidingForm) {
slideForm();
}
}, throttle);
window.addEventListener('scroll', () => {
elementIsInViewport();
});
function closeForm() {
setCookie(cookieName, 'YES', 7);
slidingForm.classList.remove(visibleClass);
slidingForm.setAttribute('aria-hidden', 'true');
}
if (closeButton) {
closeButton.addEventListener('click', () => {
closeForm();
});
}
This component is specifically made to work together with the iis-mailchimp plugin. It consists of two forms, one static and one “slide-in” form. The slide-in form has a delay attribute on it controlled from Wordpress admin.
The two forms are never shown on screen at once, when the static form scrolls into view, the slide-in form is hidden if visible and the timer is cleared. If the static forms is once again out of viewport the timer restarts.
It the user clicks the slide-in form close button, a cookie is set and the slide-in form no longer slides into view. The cookie lasts 1 week. If the user is sent from email campaign with URL parameter ?noForm=true, the cookie is set show slide-in form won’t show.