Jump to content

Open embedded Mailchimp form in lightbox

Recommended Posts

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

 

Screen Shot 2022-10-05 at 2.01.53 pm.png

Link to comment
  • Replies 1
  • Views 470
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.