<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"
    }
  ]
}
  • Content:
    @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(foreground);
    		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);
    		}
    
    		@include b(m-form__row) {
    			flex: 0 0 100%;
    			width: 100%;
    			max-width: 100%;
    		}
    	}
    }
    
  • URL: /components/raw/mailchimp/_mailchimp.scss
  • Filesystem Path: src/organisms/mailchimp/_mailchimp.scss
  • Size: 2 KB
  • Content:
    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();
    	});
    }
    
  • URL: /components/raw/mailchimp/mailchimp.js
  • Filesystem Path: src/organisms/mailchimp/mailchimp.js
  • Size: 2.7 KB

MailChimp Newsletter component

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.