Recently I had a task at my work to add two Mailchimp embedded subscription sign up forms in a single page, one was a popup and another one in a sidebar.

At first, it went very straight forward, but when I tested them a problem accrued! The second form would redirect me to another page.

Alt Text

That wasn’t acceptable!!!

So the hunting started… To find a solution online xD

The only article that I found was from 2011 and it wasn't even for the exact same problem so I thought this article might help someone in the future :)

So at first, I generated an embedded form in MailChimp -> Create -> Signup form and I implemented my own CSS so I generated an Unstyled Form.

Alt Text

*BONUS TIP*
If you want to have an unstyled form but want to keep the default validation, copy just the script tag from the Classic tab and paste it at the bottom

Alt Text

I pasted this piece of code on my page.

The first one you don't need to do anything else, as it will render the first so no conflict will accur..

But for the second one, I had to come up with another solution to submit the form using AJAX

Here is what I did:

At first, I created a simple HTML form with the action set to the link of the Mailchimp unstyled form code that we got earlier but I removed the User and the ID parameters or (u and id)
So this is the action

<form class="mailchimpform" action="https://YOURLINK.list-manage.com/subscribe/post" method="POST" target="formResult">
</form>

For the Target, I will explain later, but It has to have a target like that (Spoiler it is an iFrame element)

Now we need to add the 'u' and 'id' parameters
I added them as hidden inputs with the names as u and id and the values from the embedded link that we got earlier

<form action="https://YOTLIST.list-manage.com/subscribe/post?u=YOURUSER&amp;id=YOURID" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

So this is the default one, but now we modified it like this:

<form class="mailchimpform" action="https://YOURLINK.list-manage.com/subscribe/post" method="POST" target="formResult">
                <input type="hidden" name="u" value="YOURUSER">
                <input type="hidden" name="id" value="YOURID">

</form>
Enter fullscreen mode Exit fullscreen mode

Now we need to add the email input field and the submit button we don't need to modify them at all, so simply copy-paste it from the default one

<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
Enter fullscreen mode Exit fullscreen mode

So now our form should look something like this:

<form class="mailchimpform" action="https://YOURLINK.list-manage.com/subscribe/post" method="POST" target="formResult">
                <input type="hidden" name="u" value="YOURUSER">
                <input type="hidden" name="id" value="YOURID">


<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">



  <!-- 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_48b29e32bc4058dcd9aeae377_c8f8d249ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</form>
Enter fullscreen mode Exit fullscreen mode

Now we need to create an iFrame so the form after submission won't redirect us anywhere else.

I just added this after the closing form tag

<iframe name="formResult" style="display:none !important;" frameborder="0"></iframe>

Now to the FUN part :D

Please don’t judge me for using jQuery this project was developed using WordPress :)

<script>
    jQuery('.mailchimpform').submit(function (e) {
        var $this = jQuery(this);
        jQuery.ajax({
            type: "GET", 
            url: "https://YOUTLINK.list-manage.com/subscribe/post-json?c=?",
            data: $this.serialize(),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function (err) {
                alert("Could not connect to the registration server.");
            },
            success: function (data) {
                if (data.result != "success") {
                    jQuery('#thankYouMessage').css("display","block");
                    jQuery('#thankYouMessage').text(data.msg.substr(0, data.msg.indexOf('<')));
                } else {
                    jQuery('.myform').hide();
                    jQuery('#thankYouMessage').css("display","block");
                    jQuery('#thankYouMessage').text(data.msg);

                }
            }
        });
        return false;
    });
</script>
Enter fullscreen mode Exit fullscreen mode

So the thing that is different here is that the link is a bit modified at the end: so this is the link that we got earlier:

https://YOURLINK.list-manage.com/subscribe/post
We changed it to this
https://YOUTLINK.list-manage.com/subscribe/post-json?c=?

At the success function we can do whatever we want but I needed to do this quickly and I added some dirty code that I wouldn’t recommend to do it this way, but something more creative :P

So now once again the complete file:

<aside id="secondary" class="sidebar">
     <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <div class="news-updates mt-4 mt-lg-0">
        <h3>News Updates</h3>


        <!-- Begin Mailchimp Signup Form -->

        <div id="mc_embed_signup">
            <form class="mailchimpform" action="https://YOURLINK.list-manage.com/subscribe/post" method="POST" target="formaReturning">
                <input type="hidden" name="u" value="YOURUSER">
                <input type="hidden" name="id" value="YOURID">
                <input type="email" value="" name="EMAIL" class="button border-0 w-100" id="mce-EMAIL" placeholder="email address"
                    required>
                <input style="display:none" type="checkbox" value="1" name="group[16169][1]" id="mce-group[16169]-16169-0" checked>

                <input type="submit" class="button button-primary w-100 border-0" value="Send" name="submit" id="mc-embedded-subscribe">
            </form>
            <div id="thankYouMessage" style="display:none;">
                <p>Thank you for subscribing!</>
            </div>
        </div>

        <iframe name="formaReturning" style="display:none !important;" frameborder="0"></iframe>
        <!--End mc_embed_signup-->

    </div>
</aside><!-- #secondary -->


<script>
    jQuery('.myform').submit(function (e) {
        var $this = jQuery(this);
        jQuery.ajax({
            type: "GET", 
            url: "https://YORLINK.list-manage.com/subscribe/post-json?c=?",
            data: $this.serialize(),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function (err) {
                alert("Could not connect to the registration server.");
            },
            success: function (data) {
                if (data.result != "success") {
                    jQuery('#thankYouMessage').css("display","block");
                    jQuery('#thankYouMessage').text(data.msg.substr(0, data.msg.indexOf('<')));
                } else {
                    jQuery('.mailchimpform').hide();
                    jQuery('#thankYouMessage').css("display","block");
                    jQuery('#thankYouMessage').text(data.msg);

                }
            }
        });
        return false;
    });
</script>
Enter fullscreen mode Exit fullscreen mode

This would have helped me a lot, so I would be happy if I am helping someone with this article.

I am sure that this isn't the best solution, but it worked for me :)

Btw this is my first post here, sorry about the bad styling... I will get the hang of it :P

Thank you for reading :)

# javascript # xhtml
Logo
CMS

更多推荐

我们从奥斯汀·金德那里学到的关于自己管理 1,300 (!!!) 网站的 5 个技巧

Anchor Hosting 创始人 Austin Ginder 对营销和销售的看法确实是独一无二的......而且也非常有效。作为一名独立开发人员和企业主,他自己管理着 1,300 多个 WordPress 网站。继续阅读,看看他是如何管理这一切的,以及他是如何从头开始创业的...... 1.收入不是唯一目标 “从项目过渡到服务对我和我想要追求的东西来说是有意义的。收入方面,从每个项目的基础到收

avatar CMS

从 WordPress 搜索结果中排除页面

如何从 WordPress 搜索结果中排除页面。默认情况下,您 WordPress 网站上的内部搜索将覆盖 WordPress 搜索结果中的所有帖子和页面。为了让您的网站用户更轻松地找到他们正在寻找的内容,您可能需要排除某些页面或帖子,这样它就不会再出现在这些结果中。 在本文中,您将学习如何从 WordPress 搜索结果中排除页面或帖子。让我们分开。 在这里,我们将看到两种不同的方法来做到这一

avatar CMS

最常见的 WordPress 错误

简介 WordPress 平台非常适合构建网站,但也容易出错。我们都会犯错。这在讨论 WordPress 时尤其准确,即使是最简单的任务对初学者来说也可能令人生畏。但是,只要有一点知识和一些有用的建议,您就可以避免常见的 WordPress 错误,这些错误经常会让人绊倒。 在这篇博文中,我们将探讨一些最常见的 WordPress 错误,并为您提供如何修复它们的建议。因此,请继续阅读以了解如何避免这

avatar CMS