Open embedded Mailchimp form in lightbox

Site URL: https://www.dogoodlabs.com.au/qantas-copy

Hi team,

Need some help with coding. 

I've created a signup embed form in Mailchimp and added it to my website through code block.

I need to adjust the code so it creates a button before the form appears (exactly as the current button on the page "where should we donate").

On the screenshot: white rectangle form to match top button. 

Code: 

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{
      background:#fff;
      clear:left;
      font:14px Helvetica,Arial,sans-serif; 
      width:600px;
     margin: 0 auto;
      padding: 25px;
      border-radius: 15px;
    }
	/* 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. */
</style>
<div id="mc_embed_signup">
    <form action="https://dogoodlabs.us4.list-manage.com/subscribe/post?u=aec73f42b3989b36b374e1ca1&amp;id=6f17420f09&amp;f_id=00085ae9f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <h2>Have a say and let us know where we should make our quarterly donations</h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group input-group">
    <strong>Where should we donate? </strong>
    <ul><li>
    <input type="checkbox" value="1" name="group[77031][1]" id="mce-group[77031]-77031-0">
    <label for="mce-group[77031]-77031-0">OzHarvest - Feeding People in Need</label>
</li>
<li>
    <input type="checkbox" value="2" name="group[77031][2]" id="mce-group[77031]-77031-1">
    <label for="mce-group[77031]-77031-1">RMHC Australia -Supporting Seriously Ill Children &amp; their Families</label>
</li>
<li>
    <input type="checkbox" value="4" name="group[77031][4]" id="mce-group[77031]-77031-2">
    <label for="mce-group[77031]-77031-2">Lifeline - Supporting Mental Health Services for the Nation</label>
</li>
<li>
    <input type="checkbox" value="8" name="group[77031][8]" id="mce-group[77031]-77031-3">
    <label for="mce-group[77031]-77031-3">All of the above</label>
</li>
</ul>
    <span id="mce-group[77031]-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
	<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div hidden="true"><input type="hidden" name="tags" value="6872823"></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_aec73f42b3989b36b374e1ca1_6f17420f09" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='HIDDEN99F';ftypes[3]='text';fnames[4]='TEXTYUI_3';ftypes[4]='text';fnames[5]='TEXTAREAY';ftypes[5]='text';fnames[6]='HIDDEN6CD';ftypes[6]='text';fnames[7]='HIDDENA5B';ftypes[7]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Thank you

Hi,

The url doesn't work

You mean click button > Show Mailchimp on Popup?

I suggest you use a Lightbox Plugin (affiliate link) to achieve this. 

Quick instruction

• Install plugin
• Add a Page in Not Linked > Add a Code Block > Add Mailchimp Form Code
• Add a button on page
• Add Lightbox Url on a button
• All done.