jQuery - 如何在嵌入式 Mailchimp 表单电子邮件提交后添加“谢谢”消息？

Posted 2023-03-24

【中文标题】jQuery - 如何在嵌入式 Mailchimp 表单电子邮件提交后添加“谢谢”消息？

【英文标题】：jQuery - How to add "Thank you" message after embedded Mailchimp form email submission?

【发布时间】：2018-04-16 20:42:02

【问题描述】：

我在登录页面上嵌入了一个简单的 Mailchimp 表单，我正在尝试在用户插入他们的电子邮件地址后返回成功消息（“谢谢！”）。是否有一个使用 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 -->

【参考方案1】：

试试这个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 在此功能中打开重定向成功页面？