Stop scrollbox from showing after successful subscribe

bump.

Sorry for delay. I had to look it over, because I haven’t used MailChimp for a while.

About feedback not appearing inside box: what comes to my mind is, that you must paste into Scrollbox html view complete script what you got from MailChimp, including <!– Begin MailChimp Signup Form –> and <!–End mc_embed_signup–>
I’m afraid you have left something out, like that part of mailchimp html:

<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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

I actually understand why you have erased that from your Scrollbox – you wanted to implement your own email validation, because MailChimp’s way is not ok for you. But maybe you can still use MailChimp own validation, perhaps adding some style=”” parameters to MailChimp fields etc. Because, otherwise MailChimp AJAX will not work and you will not get your desired result.

To close Scrollbox automatically after MailChimp submission, add following piece of script after <!– End mc_embed_signup –>

<!--End mc_embed_signup-->
<script type="text/javascript">// <![CDATA[
jQuery('#mce-success-response').bind("DOMSubtreeModified",function(){
    var boxid = jQuery(this).closest('.dgd_stb_box').attr('id');
    $DGD.closeAfterSubmit(boxid);
});
// ]]></script>

In this case Scrollbox will be closed automatically after showing Mailchimps success message after time period defined in “Close box automatically after “Thank You” message is shown for” in Admin page. And If you have ticked “Close permanently” checkbox, then it will be closed for that user permanently as well.

Eero, thank you SO much for the reply….no worries on the delay. I am just trying to get this working as I think(aka “hope”) it can work.

I have implemented all the code you mentioned above. however the following things are still “broken”.

#1. When user clicks submit, it still opens a new browser window with MailChimp thank you message. Is it possible to have this show inside my scrollbox?

#2. There is no “success message” showing up inside the scrollbox after user clicks subscribe.

#3. I am not sure if the box will permanently close for any members who subscribe, so I can’t comment on this, but i have a feeling it will keep showing for them.

#4. Is it possible for me to add a check box for users, who don’t want to subscribe, but also don’t want to see this scrollbox pop-up ever again? I have seen this on many other plugins, but was wondering how i can do it with yours.

Thanks again for your help
Mike

Do you have in some page this broken Scrollbox working at the moment? I looked but couldn’t find any.

I think #1 and #2 will be solved if you take exactly the MailChimp html code – maybe you can copy it again from MailChimp and paste. The code you posted above showed that you used incomplete code.
If those are fixed, we can move to solving #3, and perhaps also #4 – my solution requires that MailChimp own code is pasted and working correctly.

i LOVE that you are still helping me with this Eero…..so let me turn the plugin so it is visible to all members (currently it is set to Admin only). I have now set it to be visible on this page:
https://www.honeytrek.com/you-know-youre-in-zambia-when/Y on this page:

I have the code copied exactly from MailChimp, then i included the code you told me to put after it, exactly as you posted it.

So let me know if you see it working, or how I can make it work ??
Mike
https://www.HoneyTrek.com (if you are looking to travel the world on a seriously tight budget ??

Thing is that you are currently using either “Naked” or “Super Slim” version of MailChimp Embedded form, but instead you should use “Classic” version.

Those first two will always open response in new page. So if you want that response would appear inside Scrollbox, you must use “Classic”, there’s no other way I’m afraid. If it doesn’t have desired look then you can override MailChimp styles by adding style parameters to MailChimp html elements.

I am using the “classic” inside the scrollbox, with one or two CSS mods to style it the way i like. here is the code i am using compared with the code directly from MailChimp, did i change anything that is important to make it work the way we want?

CLASSIC MAILCHIMP CODE

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.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="//HoneyTrek.us2.list-manage.com/subscribe/post?u=2dafec07ca68edc4b80a35aaa&id=6fcfbcef2d" 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="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</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;"><input type="text" name="b_2dafec07ca68edc4b80a35aaa_6fcfbcef2d" 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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

MY CODE AFTER A FEW SMALL CSS TWEAKS (include the code you told me to include at the end):

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//HoneyTrek.us2.list-manage.com/subscribe/post?u=2dafec07ca68edc4b80a35aaa&id=6fcfbcef2d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

<div class="mc-field-group"><input type="text" placeholder="Enter Your Name" value="" name="FNAME" class="required" id="mce-FNAME"></div>
<div class="mc-field-group"><input type="email" placeholder="Enter Your 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;"><input type="text" name="b_2dafec07ca68edc4b80a35aaa_6fcfbcef2d" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<!--End mc_embed_signup-->

<!--End mc_embed_signup-->
<script type="text/javascript">// <![CDATA[
jQuery('#mce-success-response').bind("DOMSubtreeModified",function(){
    var boxid = jQuery(this).closest('.dgd_stb_box').attr('id');
    $DGD.closeAfterSubmit(boxid);
});
// ]]></script>

Removing this row:

<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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

cannot be considered “small tweak” because this causes your submits to go into new page!

Eero, you are 100% right, that is definitely not a small tweak. i totally didn’t intend to remove that…not sure how that happened, possibly i was working off an older version of the code or something, super sorry i didn’t see that difference.

well I put that code back in, refreshed my cache, and i am still having the same 4 issues. Here is the code I have in there now, and you can see the scrollbox functioning on this URL: https://www.HoneyTrek.com/niagara-falls/

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//HoneyTrek.us2.list-manage.com/subscribe/post?u=2dafec07ca68edc4b80a35aaa&id=6fcfbcef2d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

<div class="mc-field-group"><input type="text" placeholder="Enter Your Name" value="" name="FNAME" class="required" id="mce-FNAME"></div>
<div class="mc-field-group"><input type="email" placeholder="Enter Your 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;"><input type="text" name="b_2dafec07ca68edc4b80a35aaa_6fcfbcef2d" 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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

<!--End mc_embed_signup-->
<script type="text/javascript">// <![CDATA[
jQuery('#mce-success-response').bind("DOMSubtreeModified",function(){
    var boxid = jQuery(this).closest('.dgd_stb_box').attr('id');
    $DGD.closeAfterSubmit(boxid);
});
// ]]></script>

Thank you so much for sticking with me and helping solve this,
Mike

Eero,

I am still having these 4 issues, and there is actually a 5th issue that has arisen after I added the code you mentioned above.

#5. I am now only seeing the scrollbox in Firefox. You should be able to see this yourself if you hit this page from Google Chrome (no pop) and Firefox (pop after scrolling to 40%.

https://www.honeytrek.com/test/

Thanks again for your help….and I hope I am helping debug this for future users as well. Great tool!
Mike

Hi

I now think the reason of MailChimp malfunctioning is that you have two instances of MailChimp submission forms in your site: one inside of page text and another inside scrollbox. You shouldn’t have 2 html elements with identical id in one and the same page. MailChimp javascript seems to recognize always the first one, and therefore submit on second form makes wrong action.

Maybe you can try so that you remove that first form.

About #5 – for me your example opens in Chrome. You should clear cookies of your Chrome.

Ok. I have turned off the widget on the test page (so it is now only once on that page). https://www.honeytrek.com/test/ (and clearing cookies in Chrome did make it start showing up)

With regards to the ID, can i change that ID name for one of them (if so, will that break the form?), so it is different and i can have the widget in the sidebar and also the scrollbox.

but with regards to my original 4 items i noted last month, none of those have been fixed by any of our tweaks.

#1. When user clicks submit, it still opens a new browser window with MailChimp thank you message. Is it possible to have this show inside my scrollbox?

#2. There is no “success message” showing up inside the scrollbox after user clicks subscribe.

#3. I am not sure if the box will permanently close for any members who subscribe, so I can’t comment on this, but i have a feeling it will keep showing for them.

#4. Is it possible for me to add a check box for users, who don’t want to subscribe, but also don’t want to see this scrollbox pop-up ever again? I have seen this on many other plugins, but was wondering how i can do it with yours.

You cannot have 2 equal MailChimp embedded submission forms at one and the same page. That’s the reason for errors #1, #2. There’s nothing to do with Scrollbox!

And no, you must not and can not change MC code element id’s as you like. Please don’t change MailChimp code at all, as long as you don’t understand how it exactly works and what breaks it.

My piece of code what I wrote you to solve to fix the problem #3 (it’s not actually error, as explained in FAQ), actually works: as you noticed, it created cookie to your Chrome browser so that Scrollbox stopped appearing (it also means that error #5 wasn’t a error but instead proof of working concept). But still: till the first errors are not fixed, you cannot test it properly.

Error #4 is actually not a error because that is not directly supported.