I would like to keep an email value after the displaying of a pop up.
The user will add his email adress in an input and click on "subscribe". But I don't want to use MailChimp there, I want first open a pop up with other fields (like phone number) but I would like to keep the email enter in the previous step by the user and use MailChimp there. How can I do it?
<div class="well">
<form action="#">
<div class="row email">
<input class="btn btn-lg required_email" name="email" id="email" type="email" placeholder="MY EMAIL TO GET FIRST MY LIFE-TIME PREMIUM ACCESS">
</div>
<div class="row okbutton">
<button class="btn btn-info button" data-toggle="modal" data-target="#enquirypopup" type="submit">Subscribe</button>
</div>
</form>
</div>
<div id="enquirypopup" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enquire Now</h4>
</div>
<div class="modal-body">
<!-- Begin MailChimp Signup Form -->
<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. */
</style>
<div id="mc_embed_signup">
<form action="//FellowsNow.us11.list-manage.com/subscribe/post?u=fa1e6ec5c7d8f4d1f04c123e1&id=c761d217cf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value=" <?php echo $_POST['EMAIL'];?>" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE3">Phone Number </label>
<input type="text" name="MMERGE3" class="" value="" id="mce-MMERGE3">
</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_fa1e6ec5c7d8f4d1f04c123e1_c761d217cf" 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]='MMERGE3';ftypes[3]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div></div>
Try use js onclick function for first subscribe button. And get entered email value using js or jquery. Then set it for email field in pop-up form.
To get value from input field:
JS: var email = document.getElementById('id_name');
Jquery: var email = $('#id_name').val();
To set value to input field:
JS: document.getElementById("id_name").value = email;
Jquery: $('#id_name').val(email);
<div class="well">
<form action="#">
<div class="row email">
<input class="btn btn-lg required_email" name="email" id="email" type="email" placeholder="MY EMAIL TO GET FIRST MY LIFE-TIME PREMIUM ACCESS">
</div>
<div class="row okbutton">
<button class="btn btn-info button" data-toggle="modal" data-target="#enquirypopup" onclick="copyEmail();" >Subscribe</button>
</div>
</form>
</div>
<div id="enquirypopup" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enquire Now</h4>
</div>
<div class="modal-body">
<!-- Begin MailChimp Signup Form -->
<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. */
</style>
<div id="mc_embed_signup">
<form action="//FellowsNow.us11.list-manage.com/subscribe/post?u=fa1e6ec5c7d8f4d1f04c123e1&id=c761d217cf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value=" <?php echo $_POST['EMAIL'];?>" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE3">Phone Number </label>
<input type="text" name="MMERGE3" class="" value="" id="mce-MMERGE3">
</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_fa1e6ec5c7d8f4d1f04c123e1_c761d217cf" 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]='MMERGE3';ftypes[3]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
<script type="text/javascript>
function copyEmail(){
var email = document.getElementById('email');
document.getElementById("mce-EMAIL").value = email;
return true;
}
</script>