Instantly share code, notes, and snippets.

@pateskinasy /newsletter.html Secret
Last active Apr 19, 2018

Embed
What would you like to do?
Ugly-looking Mailchimp embed (missing to CSS it properly, button to close missing, nav-header messed-up)
<!--
http://talk.jekyllrb.com/t/anyone-made-a-mailchimp-subscribe-pop-up-work-on-click/1706/3
https://mikeindustries.com (subscribe source code)
<a href="#" onclick="toggleMailKaimp('true'); return false;">Join Newsletter</a> placed in 'masthead.html'
-->
<html>
<head>
<!--<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> -->
<style type="text/css">
/* #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } */
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
#mc_embed_modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
top: 0;
left: 0;
position: fixed;
z-index: 5;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
max-height: 100vh;
max-width: 100vw;
}
#mc_embed_modal.hiddenform {
opacity: 0;
top: -99999px;
left: -99999px;
}
#mc_embed_signup {
background-color: rgba(0,0,0,.75);
border-radius: .5em;
padding: 2em;
color: #fff;
font-size: 1em;
text-align: center;
max-height: calc(100% - 100px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
}
#mc_embed_signup h2 {
font-size: 1.4em;
}
#mc_embed_signup input {
width: 12em;
color: #222;
}
#mc_embed_signup input[type="submit"] {
background-color: #666;
border: none;
padding: .5em 1em .5em 1em;
width: auto;
color: #fff;
}
#mc_embed_signup label {
display: block;
margin-bottom: .5em;
}
#mc_embed_signup .mc-field-group {
margin-bottom: 1em;
}
#mc_embed_signup p {
margin-top: .5em;
margin-bottom: 0;
font-size: 80%
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<script>
function toggleMailKaimp(show) {
if (show == 'true') {
document.getElementById('mc_embed_modal').className = '';
} else {
document.getElementById('mc_embed_modal').className = 'hiddenform';
}
}
function submitMailKaimp() {
document.getElementById('mc-embedded-subscribe-form').submit();
document.getElementById('mc-embedded-subscribe-form').reset();
toggleMailKaimp('false');
}
</script>
</head>
<body>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_modal" class="hiddenform">
<div id="mc_embed_signup">
<form action="https://pateskinasy.us12.list-manage.com/subscribe/post?u=6aec26e81999396b8c544b7f5&amp;id=8cfaf7db79" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Join Pat's Newsletter!</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_6aec26e81999396b8c544b7f5_8cfaf7db79" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="button" onclick="submitMailKaimp(); return false;"></div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
<script type='text/javascript'>
!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content");for(c=0;c<i.length;c++){if(d=i[c],!d.getAttribute("data-secret"))f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f);if(g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.removeAttribute("style"),"height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(~~g<200)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment