jQuery - 如何在嵌入式 Mailchimp 表单电子邮件提交后添加 "Thank you" 消息?
jQuery - How to add "Thank you" message after embedded Mailchimp form email submission?
我在登录页面上嵌入了一个简单的 Mailchimp 表单,我试图在用户插入他们的电子邮件地址后向 return 发送一条成功消息 ("Thank you!")。是否有一个使用 jQuery 的简单函数可以完成这项工作?我还想阻止 Mailchimp 打开重定向成功页面。
这是我现在拥有的。
$(function(){
$(".success-msg").hide();
$(".signup").on("click", function(){
$(this).next(".success-msg").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="newsletter-module" id="mc_embed_signup">
<a href="#" class="news-show"><p>Join mailing list</p></a>
<!-- MC SIGNUP FORM -->
<form class="signup validate" action="mailchimp-link-here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onsubmit="return Validate()">
<span class="newsletter-input-wrapper mc-field-group">
<input class="input-text required email" id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required>
</span>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f2d244c0df42a0431bd08ddea_aeaa9dd034" tabindex="-1" value=""></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>
<label>
<input type="submit" name="subscribe" value="Sign Up" id="mc-embedded-subscribe" class="button">
</label>
<div id="success-msg"><p>Thank you!</p></div>
</form>
</div> <!-- .newsletter-module -->
试试这个 https://jsfiddle.net/hxrzwv63/
$(function(){
$("#success-msg").hide();
$(".button").on("click", function(){
$("#success-msg").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="newsletter-module" id="mc_embed_signup">
<a href="#" class="news-show"><p>Join mailing list</p></a>
<!-- MC SIGNUP FORM -->
<form class="signup validate" action="mailchimp-link-here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onsubmit="return Validate()">
<span class="newsletter-input-wrapper mc-field-group">
<input class="input-text required email" id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required>
</span>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f2d244c0df42a0431bd08ddea_aeaa9dd034" tabindex="-1" value=""></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>
<label>
<input type="button" name="subscribe" value="Sign Up" id="mc-embedded-subscribe" class="button">
</label>
<div id="success-msg"><p>Thank you!</p></div>
</form>
</div> <!-- .newsletter-module -->
希望对您有所帮助。
我在登录页面上嵌入了一个简单的 Mailchimp 表单,我试图在用户插入他们的电子邮件地址后向 return 发送一条成功消息 ("Thank you!")。是否有一个使用 jQuery 的简单函数可以完成这项工作?我还想阻止 Mailchimp 打开重定向成功页面。
这是我现在拥有的。
$(function(){
$(".success-msg").hide();
$(".signup").on("click", function(){
$(this).next(".success-msg").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="newsletter-module" id="mc_embed_signup">
<a href="#" class="news-show"><p>Join mailing list</p></a>
<!-- MC SIGNUP FORM -->
<form class="signup validate" action="mailchimp-link-here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onsubmit="return Validate()">
<span class="newsletter-input-wrapper mc-field-group">
<input class="input-text required email" id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required>
</span>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f2d244c0df42a0431bd08ddea_aeaa9dd034" tabindex="-1" value=""></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>
<label>
<input type="submit" name="subscribe" value="Sign Up" id="mc-embedded-subscribe" class="button">
</label>
<div id="success-msg"><p>Thank you!</p></div>
</form>
</div> <!-- .newsletter-module -->
试试这个 https://jsfiddle.net/hxrzwv63/
$(function(){
$("#success-msg").hide();
$(".button").on("click", function(){
$("#success-msg").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="newsletter-module" id="mc_embed_signup">
<a href="#" class="news-show"><p>Join mailing list</p></a>
<!-- MC SIGNUP FORM -->
<form class="signup validate" action="mailchimp-link-here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onsubmit="return Validate()">
<span class="newsletter-input-wrapper mc-field-group">
<input class="input-text required email" id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required>
</span>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f2d244c0df42a0431bd08ddea_aeaa9dd034" tabindex="-1" value=""></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>
<label>
<input type="button" name="subscribe" value="Sign Up" id="mc-embedded-subscribe" class="button">
</label>
<div id="success-msg"><p>Thank you!</p></div>
</form>
</div> <!-- .newsletter-module -->
希望对您有所帮助。