Which CTA button – Icegram's or my contact form's?

  • Hi,

    I’d like the popup to close once my form’s CTA button has been clicked. Should I be using my contact form’s (Mailpoet’s contact form via shortcode) button or Icegram’s button? I’ve tried the following:
    1. Not filling in Icegram’s ‘Button Label’. In this case, mailpoet’s CTA button is used but my popup won’t close when the CTA is clicked.
    2. Filling in Icegram’s ‘Button Label’. Again, mailpoet’s CTA button is used but upon form submission, the page refreshes and the popup re-appears using Icegram’s button.

    Hope that was clear.

    Thanks,
    Ruby

    https://www.ads-software.com/plugins/icegram/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Icegram

    (@icegram)

    @ruby

    When you use a form with Icegram form embed functionality,
    It take only form button.

    Have you checked the option “Once CTA is clicked, do NOT show this campaign again for” in “Targeting Rules > Retargeting”.

    Please share the URL of your page/site with above popup.
    so we can check that.

    It seems like Mailpoet specific issue.
    We will check and update you accordingly.

    Thanks,
    Ravi Oza
    Team Icegram.

    Thread Starter rubyt

    (@rubyt)

    Hi Ravi,

    I’ve followed your instructions to remove Icegram’s button label and checking “Once CTA is clicked, do NOT show this campaign again for”. Now, the popup closes when CTA is clicked but the form is not submitting. Please see here

    Thanks
    Ruby

    Thread Starter rubyt

    (@rubyt)

    Hi again,

    Not sure why I wasn’t able to edit my message above.

    Anyways, I tried embedding the mailpoet form with HTML code and everything is working fine except for alignment issues. Please see here. Would you be able to help me out with that? Or you can help me solve the issue with the shortcode, whichever is easier.

    This is the mailpoet form HTML code:

    <!--START Scripts : this is the script part you can add to the header of your theme--><script src="https://movemankind.com/wp-includes/js/jquery/jquery.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-en.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/jquery.validationEngine.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var wysijaAJAX = {"action":"wysija_ajax","controller":"subscribers","ajaxurl":"https://movemankind.com/wp-admin/admin-ajax.php","loadingTrans":"Loading..."};
// ]]></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><!--END Scripts-->
<div class="widget_wysija_cont html_wysija">
<div id="msg-form-wysija-html55fa2d10ec928-1" class="wysija-msg ajax">Get the MANKIND roundup every second Sunday</div>
<form id="form-wysija-html55fa2d10ec928-1" class="widget_wysija html_wysija" action="#wysija" method="post">
<p class="wysija-paragraph"><label>First name</label> <input class="wysija-input " title="First name" name="wysija[user][firstname]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][firstname]" name="wysija[user][abs][firstname]" type="text" value="" /> </span></p>
<p class="wysija-paragraph"><label>Email <span class="wysija-required">*</span></label> <input class="wysija-input validate[required,custom[email]]" title="Email" name="wysija[user][email]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][email]" name="wysija[user][abs][email]" type="text" value="" /> </span></p>
<input class="wysija-submit wysija-submit-field" type="submit" value="BE GOOD" />

<input name="form_id" type="hidden" value="1" /> <input name="action" type="hidden" value="save" /> <input name="controller" type="hidden" value="subscribers" /> <input name="wysija-page" type="hidden" value="1" />

<input name="wysija[user_list][list_ids]" type="hidden" value="6" />

</form></div>

    Thank you very much.

    Ruby

    Plugin Author Icegram

    (@icegram)

    @ruby,

    Thank you for your reply.
    There are two options.

    1. You can leave “Button label” field empty and add some CSS code to button from Mailpoet.
    2. Remove button from Mailpoet form HTML and use “Button label” from Icegram message.It is working fine with Mailpoet form.

    Hope this helps you.

    Let us know how it goes?

    Thanks,
    Sandhya
    Team Icegram

    Thread Starter rubyt

    (@rubyt)

    Hi Sandhya,

    1. I don’t understand how the CSS code will affect the form submission?
    2. I tried this but the Icegram button appeared above my form and did not submit…perhaps I did something wrong when removing the Mailpoet button? This is the code I used:

    <!--START Scripts : this is the script part you can add to the header of your theme--><script src="https://movemankind.com/wp-includes/js/jquery/jquery.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-en.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/jquery.validationEngine.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var wysijaAJAX = {"action":"wysija_ajax","controller":"subscribers","ajaxurl":"https://movemankind.com/wp-admin/admin-ajax.php","loadingTrans":"Loading..."};
// ]]></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><!--END Scripts-->
<div class="widget_wysija_cont html_wysija">
<div id="msg-form-wysija-html55fbc5e88dc66-1" class="wysija-msg ajax"></div>
<form id="form-wysija-html55fbc5e88dc66-1" class="widget_wysija html_wysija" action="#wysija" method="post"><label>First name</label> <input class="wysija-input " title="First name" name="wysija[user][firstname]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][firstname]" name="wysija[user][abs][firstname]" type="text" value="" /> </span> <label>Email <span class="wysija-required">*</span></label> <input class="wysija-input validate[required,custom[email]]" title="Email" name="wysija[user][email]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][email]" name="wysija[user][abs][email]" type="text" value="" /> </span> <input name="form_id" type="hidden" value="1" /> <input name="action" type="hidden" value="save" /> <input name="controller" type="hidden" value="subscribers" /> <input name="wysija-page" type="hidden" value="1" /> <input name="wysija[user_list][list_ids]" type="hidden" value="6" /></form></div>

    I ended up getting the code below to work perfectly, though I’d prefer if my form was wider, like how Icegram displays the form. Would you be able to help me tweak the css for that?

    <strong>Do-Good Sundays</strong> - Get the MANKIND Roundup every second Sunday
<br/>
<p><!--START Scripts : this is the script part you can add to the header of your theme--><script src="https://movemankind.com/wp-includes/js/jquery/jquery.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-en.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/validate/jquery.validationEngine.js?ver=2.6.17" type="text/javascript"></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var wysijaAJAX = {"action":"wysija_ajax","controller":"subscribers","ajaxurl":"https://movemankind.com/wp-admin/admin-ajax.php","loadingTrans":"Loading..."};
// ]]></script><script src="https://movemankind.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.17" type="text/javascript"></script><!--END Scripts-->
<div class="widget_wysija_cont html_wysija">
<div id="msg-form-wysija-html55fbc5e88dc66-1" class="wysija-msg ajax"></div>
<form id="form-wysija-html55fbc5e88dc66-1" class="widget_wysija html_wysija" action="#wysija" method="post"><label>First name</label> <input class="wysija-input " title="First name" name="wysija[user][firstname]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][firstname]" name="wysija[user][abs][firstname]" type="text" value="" /> </span> <label>Email <span class="wysija-required">*</span></label> <input class="wysija-input validate[required,custom[email]]" title="Email" name="wysija[user][email]" type="text" value="" /> <span class="abs-req"> <input class="wysija-input validated[abs][email]" name="wysija[user][abs][email]" type="text" value="" /> </span> <input class="wysija-submit wysija-submit-field" type="submit" value="BE GOOD" /> <input name="form_id" type="hidden" value="1" /> <input name="action" type="hidden" value="save" /> <input name="controller" type="hidden" value="subscribers" /> <input name="wysija-page" type="hidden" value="1" /> <input name="wysija[user_list][list_ids]" type="hidden" value="6" /></form></div></p>

    Thanks very much.

    Cheers,
    Ruby

    Plugin Author Icegram

    (@icegram)

    @ruby,

    Can you please help us with URL where you have embeded form?
    We will help you to tweak CSS.

    Thanks,
    Sandhya
    Team Icegram

    Thread Starter rubyt

    (@rubyt)

    Hi Sandhya,

    Please see here

    Thanks a lot!

    Ruby

    Plugin Author Icegram

    (@icegram)

    Hi Ruby,

    You can use inline css to increase the width of form.
    Add style=”width:30em!important;” inside your form input type tag for First Name and Email.
    So final code will look like
    <input class=”wysija-input ” title=”First name” name=”wysija[user][firstname]” type=”text” value=”” style=”width:30em!important;”/>

    You can change the width as per your requirement.

    Let me know if you need any further assistance, we are happy to assist you.

    Thanks,
    Nishit Shah
    Team Icegram

    Thread Starter rubyt

    (@rubyt)

    Thank you Nishit!

    Plugin Author Icegram

    (@icegram)

    Hi Ruby,

    Have you tried the above solution?
    Let us know, how it goes?

    Thanks,
    Ravi Oza
    Team Icegram.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Which CTA button – Icegram's or my contact form's?’ is closed to new replies.