Ajax Mailchimp Integration In WordPress Without Plugin
PreviousajaxChimp (ok)NextHướng dẫn sử dụng Mailchimp làm email marketing (Free 100% – cập nhật 2020)
Last updated
Last updated
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/99dd59ca18e94ced829d10c4e/1883e478b446bccd4409f3834.js");</script>
<?php wp_head(); ?>
</head><div id="mc_embed_signup">
<form action="https://work.us20.list-manage.com/subscribe/post?u=99dd59ca18e94ced829d10c4e&id=ddf38752d8" 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</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 </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group size1of2">
<label for="mce-BIRTHDAY-month">Birthday </label>
<div class="datefield">
<span class="subfield monthfield"><input class="birthday " type="text" pattern="[0-9]*" value="" placeholder="MM" size="2" maxlength="2" name="BIRTHDAY[month]" id="mce-BIRTHDAY-month"></span> /
<span class="subfield dayfield"><input class="birthday " type="text" pattern="[0-9]*" value="" placeholder="DD" size="2" maxlength="2" name="BIRTHDAY[day]" id="mce-BIRTHDAY-day"></span>
<span class="small-meta nowrap">( mm / dd )</span>
</div>
</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;" aria-hidden="true"><input type="text" name="b_99dd59ca18e94ced829d10c4e_ddf38752d8" 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';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>// jquery-ajaxchimp
function tsh_scripts($hook) {
wp_enqueue_script('jquery');
wp_enqueue_script( 'jquery-ajaxchimp', get_template_directory_uri() . '/assets/js/jquery.ajaxchimp.min.js', array(), '1.2.0', false );
}
add_action('wp_enqueue_scripts', 'tsh_scripts');<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package Gutener
*/
get_header();
?>
<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('https://work.us20.list-manage.com/subscribe/post?u=99dd59ca18e94ced829d10c4e&id=ddf38752d8') ?>" //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('https://work.us20.list-manage.com/subscribe/post?u=99dd59ca18e94ced829d10c4e&id=ddf38752d8') ?>" //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>
<?php
get_footer();