您如何使按钮填充 Wordpress 中 Mailchimp 弹出表单的模式答案

【问题标题】：How do you make a button populate a modal for a Mailchimp popup form in Wordpress您如何使按钮填充 Wordpress 中 Mailchimp 弹出表单的模式
【发布时间】：2017-01-25 09:01:46
【问题描述】：

我有一个 Wordpress 网站，想添加一个 Mailchimp 模式来注册新闻通讯。但是，我不希望它只在给定时间后出现，这是 Mailchimp 提供的唯一代码。我一直在寻找可以完成工作的插件，但找不到可靠的选择。我在 Github 上找到了一些信息，但没有特定于 Wordpress。

到目前为止，我已经找到了这段代码：

<!-- This is the HTML element that, when clicked, will cause the popup to appear. -->

<button id="open-popup">Subscribe to our mailing list</button>

<!-- This is what I have tried putting in the header. -->


<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>

<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE"}) })
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};

document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

我尝试将代码的第二部分放在几个不同的区域，包括标题和按钮所在的小部件，但没有一个有效。关于我做错了什么有什么想法吗？

【问题讨论】：

标签： javascript php wordpress modal-dialog mailchimp

【解决方案1】：

我解决了这个问题。

这是我的按钮的代码，我直接输入到文本小部件的代码：

<button id="open-mc-popup" onclick ="showMailingPopUp(); return false;">Subscribe</button>

我将下一部分放入主题的标题中。如果您是 wordpress 新手或不知道如何到达，请按照以下步骤操作。 Appearance > Editor > Theme Header (header.php) 如果主题继承自父主题，则必须先单击该父主题的链接。到达那里后，您可以将此代码放在<head> </head> 部分之间，但请注意不要删除任何现有代码。

<!-- This is the Mailchimp Modal. -->

  <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
  <script>function showMailingPopUp() {
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"YOUR_UUID_HERE",
      "lid":"YOUR_LID_HERE"}) })
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
  };</script>

最后确保您已更新 "baseUrl" "uuid" 和 "lid" 以匹配 Mailchimp 为您提供的弹出表单代码。这可以在选择您的 Mailchimp 列表之一（在 Mailchimp 网站上）并选择弹出表单并单击“获取代码”后找到。

【讨论】：