Ajax Mailchimp Integration in WordPress Without Plugin

If you want to add Ajax Mailchimp into your site/theme/plugin and are you looking for a simple way? Then you are in the right place! Using plugins on the WordPress website is of course not a problem until you are not overloading your website with a bunch of plugins. For such a simple task I didn’t prefer to use a plugin. You can add this quickly even if you haven’t better coding knowledge. So let’s get started!

Step 01:

Download Ajax Mailchimp from here

Copy jquery.ajaxchimp.min.js from the downloadable file and paste into your Theme/Plugin directory JS folder.

Step 02:

Open your theme/plugin functions.php or plugin-name.php file and past this code. Make sure file path is updated.

function tsh_scripts($hook) {
	wp_enqueue_script('jquery');
	wp_enqueue_script( 'jquery-ajaxchimp', get_template_directory_uri() . '/js/jquery.ajaxchimp.min.js', array(), '1.2.0', false );
}
add_action('wp_enqueue_scripts', 'tsh_scripts');

Step 03:

Open your file into the editor. Where you want to display the newsletter. I’m using into theme index.php file.

<div id="colophon">
    <div class="widget-area">
        <div class="subscribe-content">
            <span class="sub-title"><?php esc_html_e( 'GO AT YOUR OWN PACE', 'your-domain' ); ?></span>
            <h2><?php esc_html_e( 'Subscribe to Our Newsletter', 'your-domain' ); ?></h2>
            <p><?php esc_html_e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'your-domain' ); ?></p>

            <form class="mailchimp newsletter-form" method="post">
                <div class="subcribes">
                    <input type="email" class="input-newsletter memail" placeholder="<?php esc_attr_e( 'Enter your email address', 'your-domain' ); ?>" name="EMAIL" required>
                        <button type="submit" class="default-btn"><?php echo esc_html( 'Subscribe Now', 'your-domain' ); ?></button>
                </div>
                <p class="mchimp-errmessage" style="display: none;"></p>
                <p class="mchimp-sucmessage" style="display: none;"></p>
            </form>
        </div>
    </div>
</div>
<script>
    ;(function($){
        "use strict";
        $(document).ready(function () {
            // MAILCHIMP
            if ($(".mailchimp").length > 0) {
                $(".mailchimp").ajaxChimp({
                    callback: mailchimpCallback,
                    url: "<?php echo esc_js('url') ?>" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside url
                });
            }
            if ($(".mailchimp_two").length > 0) {
                $(".mailchimp_two").ajaxChimp({
                    callback: mailchimpCallback,
                    url: "<?php echo esc_js('url') ?>" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside url
                });
            }
            $(".memail").on("focus", function () {
                $(".mchimp-errmessage").fadeOut();
                $(".mchimp-sucmessage").fadeOut();
            });
            $(".memail").on("keydown", function () {
                $(".mchimp-errmessage").fadeOut();
                $(".mchimp-sucmessage").fadeOut();
            });
            $(".memail").on("click", function () {
                $(".memail").val("");
            });

            function mailchimpCallback(resp) {
                if (resp.result === "success") {
                    $(".mchimp-errmessage").html(resp.msg).fadeIn(1000);
                    $(".mchimp-sucmessage").fadeOut(500);
                } else if (resp.result === "error") {
                    $(".mchimp-errmessage").html(resp.msg).fadeIn(1000);
                }
            }
        });
    })(jQuery)
</script>

Step 04:

Now need to add your Mailchimp post URL into here

url: "<?php echo esc_js('url') ?> 

Replace this with your own Mailchimp post URL. Don’t remove the ”. Just paste the URL inside the url Text

Get MailChimp Newsletter Form Action URL

Locating your MailChimp form action URL is pretty simple. Please follow the steps below and if you run into any issues let us know or submit a help request to MailChimp and they’ll help you get the correct URL to use.

Step: 01 Login into your MailChimp account and click on the Audience from the top menu.  Create a mailing list for the people to sign up if you haven’t already.

Step: 02 Go to your Signup Forms or Lists

• 

• 

Step: 03 Click on the right down arrow (along with the Stats) of your selected List to see options dropdown.

Step: 04 Click on the Embedded forms link from the list of form types.

Step: 05 Then the Embedded Form code will appear. Look for the action keyword in the form code. This is the Action URL that you are looking for. Copy the action URL from there. Please have a look at the screenshot below.

That’s it 😊

If you have any queries then please let me know in the comments section. I have checked this code with WordPress latest version. If you think this post saved your time, please subscribe to our newsletter for regular updates.

Happy coding.

Thank you in advance!