Spirit theme , PopUp Pro and mailchimp Embedded form

Hello

I´m working on a site and i have make a popup with PopUp Pro that work great with a default theme i have,the popup have inside a embedded mailchimp form, when I change the theme to Spirit the popup open but the script don´t run i already search on the forum but i can find anything that resolve this problem.

Here is the code i put inside the PopUp Pro banner :

<!-- Begin MailChimp Signup Form -->
<link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>
<style type=&quot;text/css&quot;>
	#mc_embed_signup{background:##e1e3de; 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=&quot;mc_embed_signup&quot;>
<form action=&quot;//zeroseuns.us11.list-manage.com/subscribe/post?u=f9acd515fcf06aba6a52dabbd&id=04003bc037&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>
    <div id=&quot;mc_embed_signup_scroll&quot;>

<div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> Campo obrigatório</div>
<div class=&quot;mc-field-group&quot;>
	<label for=&quot;mce-EMAIL&quot;>Correio Electrónico  <span class=&quot;asterisk&quot;>*</span>
</label>
	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;>
</div>
<div class=&quot;mc-field-group&quot;>
	<label for=&quot;mce-NOME&quot;>Nome  <span class=&quot;asterisk&quot;>*</span>
</label>
	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;NOME&quot; class=&quot;required&quot; id=&quot;mce-NOME&quot;>
</div>
<div class=&quot;mc-field-group&quot;>
	<label for=&quot;mce-CIDADE&quot;>Cidade </label>
	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;CIDADE&quot; class=&quot;&quot; id=&quot;mce-CIDADE&quot;>
</div>
<div class=&quot;mc-field-group size1of2&quot;>
	<label for=&quot;mce-MMERGE1&quot;>Telefone </label>
	<input type=&quot;text&quot; name=&quot;MMERGE1&quot; class=&quot;&quot; value=&quot;&quot; id=&quot;mce-MMERGE1&quot;>
</div>
<div class=&quot;mc-field-group&quot;>
	<label for=&quot;mce-CATEGORIA&quot;>Categoria </label>
	<select name=&quot;CATEGORIA&quot; class=&quot;&quot; id=&quot;mce-CATEGORIA&quot;>
	<option value=&quot;&quot;></option>
	<option value=&quot;Terapias&quot;>Terapias</option>
<option value=&quot;Astrologia&quot;>Astrologia</option>
<option value=&quot;Cursos&quot;>Cursos</option>

	</select>
</div>
	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;>
		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>
		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_f9acd515fcf06aba6a52dabbd_04003bc037&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>
    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Inscrever&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//www.eterhum.com/wp-content/uploads/2015/07/bss.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[2]='NOME';ftypes[2]='text';fnames[3]='CIDADE';ftypes[3]='text';fnames[1]='MMERGE1';ftypes[1]='phone';fnames[4]='CATEGORIA';ftypes[4]='dropdown'; }(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

The screenshot on the old theme and on the new theme , the old one have verification.

  • Kasia Swiderska

    Hi Bruno,

    I tried to replicate this issue on my testing site and I'm not able to see PopUp with the same code you provided. I've tested this on Spirit and the default WordPress theme (2013).
    It looks like, the problem lay with this lines:

    <script type='text/javascript' src='//www.eterhum.com/wp-content/uploads/2015/07/bss.js'></script>
    <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[2]='NOME';ftypes[2]='text';fnames[3]='CIDADE';ftypes[3]='text';fnames[1]='MMERGE1';ftypes[1]='phone';fnames[4]='CATEGORIA';ftypes[4]='dropdown'; }(jQuery));var $mcj = jQuery.noConflict(true);
    </script>

    This exact file here: http://www.eterhum.com/wp-content/uploads/2015/07/bss.js is jQuery library attached to your script.
    And Upfront already attached jQuery - so this here makes a conflict.

    Did you prepare those line to have a custom validation for your from? I'm checking the standard MailChimp form and it have other kind of validation.
    Because this is causing conflict, and if you are sure you want use this script, the better option would be use it in iframe.
    Create new html file (call it popup.html) on your server and put there your script. Then in popup pro put this code

    <iframe src="http://yoursite.com/popup.html" width="300" height="300"></iframe>

    This will display form with working validation. Adjust the size of the iframe to one that fits you.
    I've tested this on default theme and the Spirit theme, and on both the validation works.

    Let me know how this works for you.

    Kind regards,
    Kasia

  • Bruno

    Hello

    The script bss.js is the same as mc-validate.js, I have only copy to my hosting and translate the validation. I already try with the mc-validate.js and the error is the same, this problem is with the popup pro because I have the same code working on the http://www.eterhum.com main page.
    I already try the iframe solution, work but i don´t like the final result because lost the auto screen size adjustment. I can´t understand why the script work on the main page and don´t work on the popup pro. But work great on the popup pro on other theme.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.