如何使用 WordPress 添加邮件中继订阅表单

已发表: 2019-04-16

如果您想吸引新订阅者以增加您的邮件列表,您应该在您的网站上提供订阅表格。 如果您使用 WordPress,您可以轻松地将这些表单添加到您的博客中。

为什么? 主要是因为它允许您从对您提供的产品或服务感兴趣的人那里获取数据,以便您可以定期与他们联系。

此时,您可能会想:我很感兴趣,但是我必须做什么才能在我的 WordPress 网站上创建订阅表单? 我不熟悉 HTML 代码,我需要一些简单易行的东西。

别担心,在本教程中; 我们将向您展示在使用 WordPress 创建的网站中添加由 Mailrelay 生成的 HTML 代码的不同方法,无论是否使用插件。

很有趣,对吧?

重要说明:对于本教程,我们将假设您已经在您的帐户中创建了一个选择加入表单,并且您已经复制了 HTML 代码。 因此,我们将重点解释如何在 WordPress 上添加此代码。 如果您还没有创建表单,或者您还没有复制 HTML 代码,我们建议您先阅读另一篇文章并按照指示的步骤操作:Mailrelay V3 订阅表单

  • 1 ·如何在不使用任何插件的情况下集成Mailrelay订阅表单
  • 2 ·如何将 WordPress 中的 Mailrelay 订阅表单与 Elementor 集成(免费版)
  • 3 ·如何在WordPress与Bloom中集成Mailrelay订阅表单
  • 4 ·结论
    • 4.1相关帖子:

Envia hasta 75.000 emails gratis!

· 如何在不使用任何插件的情况下集成Mailrelay订阅表单

我们要开始这个教程说我们不能欺骗自己; 我们中的大多数人会尝试找到一个插件来为我们在我们的网站上完成所有任务,因为它们使我们的生活变得更加简单。

但是,请务必记住,在我们的网站上安装许多插件可能会使页面过载。

在很多情况下,这意味着页面加载时间的增加,直接影响我们的 SEO 策略和用户体验。

对于这一切,如果您想避免网站超载或者只是不想在您的 WP 网站上安装更多插件,您可以将 HTML 代码直接集成到您的网站上,无需任何插件。

如何?

通过以下步骤:

首先,您必须登录 WordPress,然后单击“外观”和“小部件”。

在小部件部分,我们必须找到一个名为“自定义 HTML ”的小部件 ” 找到后,我们可以将其拖动到要添加选择加入表单的小部件区域。

默认情况下,WordPress 在页面的侧边栏中有一个小部件区域。

我们可以在那里插入它,或者如果我们的主题或模板启用小部件的其他区域我们可以更改位置(例如,在页脚中)。

在这种情况下,我们将把它添加到最常见的小部件区域,因为所有 WordPress 网站默认都有这个选项; 让我们在侧边栏中添加HTML 代码。

我们只需要将小部件拖到这个区域,添加一个标题,然后粘贴 Mailrelay 生成的代码。 请记住,在开始阅读本教程之前,您已经生成了HTML 代码

命名小部件(在标题部分)并插入代码(在内容部分)后,您必须单击保存按钮。

稍后,要检查是否一切正常,您可以访问您的博客,您将在侧栏中看到订阅表单。

ya tienes incorporado el formulario

* 请务必记住,表单将在您的模板或主题中配置样式(颜色和字体)。

在这种情况下,我们已经看到了如何在侧边栏中集成表单。 如果您的站点启用了小部件的任何其他区域,您可以按照我们之前解释的相同步骤进行操作,但您应该将小部件拖动到该区域。

结果是一样的; 唯一的区别是您的选择加入表单将显示在指定区域而不是侧边栏中。

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Elementor (version gratuita)

· 如何将 WordPress 中的 Mailrelay 订阅表单与 Elementor 集成(免费版)

如何将 WordPress 中的 Mailrelay 订阅表单与 Elementor 集成(免费版)

Elementor 是目前最著名的 WordPress 布局设计师之一,事实上,它是最常用的编辑选择加入表单的插件之一。

我们可以找到其主要功能之一:具有许多功能的免费版本,它允许任何用户创建有吸引力和个性化的部分,而无需投资。

Elementor 是目前免费提供的插件,具有更多有限的功能以及带有一些额外选项的付费/高级版本。

但是,无论您使用免费版还是付费版,都可以将 Mailrelay 表单集成到所需的部分和位置。 您将通过几个步骤学习如何做到这一点:

第一个要求是在我们的网站上安装 Elementor 插件。 如果您还没有安装它,您应该转到插件选项卡并单击“添加新的”。

plugins y hacer clic en “anadir nuevo”

在 WordPress 存储库中搜索“Elementor page builder” ,然后单击“安装”。

Busca en el repositorio de WordPress “Elementor Page Builder” y haz clic en Instalar.

安装后,记得启用它,我们将准备好集成我们的代码。

要开始集成,您应该打开要输入订阅表格的页面或部分。 访问此部分后,您将必须查找 HTML 代码模块。

tendras que buscar el modulo de codigo HTML.

找到后,将模块添加到要显示表单的页面的列或部分中。 将它拖到有问题的区域后,我们将不得不粘贴我们之前保存的 HTML 代码。

pega el codigo HTML que habiamos guardado con anterioridad.

输入 HTML 代码后,您将看到该表单如何在所选部分或列的订阅表单中可用。 确保一切正确并发布更改。 结果将显示在您的网站上:

veras como aparece el formulario

正如我们之前提到的,在这种情况下和前一种情况下,重要的是要记住表单将在您的模板或主题中设置样式。

要更改或修改样式,您需要编辑 HTML 或使用允许我们自定义订阅表单的特定插件(例如 Bloom)。

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Bloom

· 如何将 WordPress 中的 Mailrelay 订阅表单与 Bloom 集成

Bloom 是我们可以找到的用于创建订阅表单的最完整的插件之一。 如果您已经在 WordPress 中安装了此插件,或者您正在考虑购买许可证,我们将解释如何将其与您的 Mailrelay 帐户集成。

访问管理面板后,您应该做的第一件事是单击 Bloom / Opt-in 表单。 在此选项卡中,您可以找到所有已创建的订阅表单。 在这种情况下,我们将从头开始创建一个新表单,以了解如何轻松地将其与 Mailrelay 集成。

Bloom/ optin forms

要创建新表单,只需单击屏幕顶部的蓝色按钮“新选择加入 ”或新形式。

系统将打开一个下拉列表,您必须在其中选择要创建的表单类型。 让我们选择“内联”选项,因为它允许您稍后在所需的部分或页面中实施它。

Escogeremos la opcion “inline”

在下一个窗口中,您必须开始配置我们的新表单。 您应该做的第一件事是命名它以便能够在内部识别它(此名称仅对您可见,不会向访问者显示。)

之后,我们将不得不选择一个电子邮件提供商。 在这种情况下,由于我们有来自 Mailrelay 的 HTML 代码,我们可以直接转到下拉列表的底部并选择“自定义 HTML 表单”选项。

Custom HTML form

选择此选项后,系统会立即显示一个灰色框,我们可以在其中插入表单的片段代码。 在这种情况下,您应该粘贴 Mailrelay 生成的 HTML 代码,然后单击“下一步设计您的选择”按钮。

“Next, design your optin”

下面,我们将看看不同的形式,具有不同的颜色和样式。 您应该根据站点的布局选择最佳选项以适合页面配色方案。 需要理解的是,由于我们已经介绍了代码,所以风格不会和插件显示的一样,但最终的结果通常是很不错的。

下一步将是自定义我们要在表单中使用的字段。 在“选择加入标题”中,我们应该写下将在表单标题中突出显示的标题。 如果不想输入标题,可以将此字段留空。

之后,我们将必须填写表格的文本。 如果您正在考虑解释为什么您的访问者应该订阅您的时事通讯,或者您向订阅者提供什么以换取订阅,这是您应该用来添加所有这些信息的字段。

texto del formulario

所以我们可以调整图像。 大多数 Bloom 的标准模板在顶部都包含一个图像,但如果您想修改它和/或用您的徽标替换它,例如,您必须在本节中执行此操作。

我们来到了样式部分。 如果您想进一步自定义您的订阅表格,更改字体、颜色、背景或任何其他美学方面,这里就是您的最佳选择。 在选择加入样式和表单样式中,您可以从许多选项和替代方案中进行选择。

之后,我们将找到更多选项来自定义表单。 我们可以在页脚中添加文本(非常适合澄清或快速评论)和确认消息,这是访问者成功订阅时事通讯后将显示的文本。

设置完所有字段后,我们可以单击“保存”来保存我们的工作。 当我们点击保存时,插件会将我们带离屏幕并显示所有活动的选择加入表单。

好吧,我们已经创建并配置了我们的 Bloom 表单。 下一步是将其正确集成到我们的网站中。

为此,在 Bloom / opt-in 表单中,我们将查找我们刚刚创建的表单,并在左侧找到这个符号“[]”。

Bloom/optim forms

当我们点击它时,我们将看到一个带有此表单短代码的新窗口。 将此代码复制或保存在某处,因为您稍后需要使用它。

ventana con el shortcode

复制短代码后,我们必须将其添加到我们要显示此表单的网站。 如果我们有像Elementor 或 Divi这样的视觉布局我们可以将它与代码模块或短代码集成到任何我们想要的地方。

相反,如果我们已经在使用 WordPress 创建的新系统 Gutenberg,我们可以使用专门用于此目的的嵌入式小部件来集成我们的短代码。

因此,我们应该打开页面或部分进行编辑。 访问后,我们将单击“+”按钮,在小部件中,我们将选择“Shortcode”块。 之后,我们必须输入我们之前保存的代码或简码。 在这里,您只需粘贴内容并保存更改。

Pegaremos el contenido y guardaremos los cambios.

按照这些步骤操作后,您的新表单将在您的网站上可用。 这个过程比你想象的要容易得多,对吧?

· 结论

正如我们在整篇文章中看到的,使用 WordPress 集成 Mailrelay HTML 表单有很多选项。 在这篇文章中,我们希望关注我们认为简单的方法,这样您就不会害怕操纵代码。

正如我们所见,您可以通过小部件部分甚至使用 WordPress 提供的新功能 Gutenberg,在没有插件的情况下将 Mailrelay 与 WordPress 集成

但是,如果您已经拥有 Divi、Elementor 或任何其他选择加入的插件等可视化编辑器,您也可以使用它们在任何您想要的地方添加表单。 在 Bloom 的案例中,我们的主要优势是该插件允许我们轻松编辑表单样式,赋予它们更个性化的风格,并使代码适应我们网站的布局。

但是,如果您已经熟悉 HTML 并且想要对代码进行一些更改,以添加样式或颜色,那也是可能的。 当然,请记住要谨慎,因为如果您的选择加入表格无法正常工作,它将影响您的电子邮件营销策略。

现在,您想将您的 Mailrelay 表单集成到您的 WordPress 网站吗?

Cristina Aguayo