Skip to content

Instantly share code, notes, and snippets.

@pateskinasy
Last active December 19, 2020 11:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pateskinasy/211aa0381b57f3eebedaf4a210356438 to your computer and use it in GitHub Desktop.
Save pateskinasy/211aa0381b57f3eebedaf4a210356438 to your computer and use it in GitHub Desktop.
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