如何在WordPress中添加联系人窗体弹出窗口

最近我们收到用户发来的一封电子邮件，内容是：如何将我的联系表单放入我的WordPress网站的弹出窗口中？这是很多网站的常见趋势，当用户点击联系人按钮或链接时，而不是进入新的页面，联系表单将在弹出窗口中打开。在本文中，我们将向您展示如何在WordPress中添加一个联系表单弹出窗口，该窗体将适用于任何联系表单插件。我们还将向您展示如何在用户点击链接或按钮时才打开弹出窗口，以确保最佳的用户体验。

但是，如果你只是想按照文本说明，那么你可以按照我们的一步一步教程如何添加一个联系表单弹出在WordPress中。

步骤0：入门

对于本教程，您将需要安装并激活两个插件。

首先，您需要与Canvas表单类型一起提供的OptinMonster pro计划。 OptinMonster是WordPress的最好的弹出式插件。

接下来，你将需要一个联系表格插件，如WPForms，Gravity Forms，联系表格7等。

为了这篇文章，我们将使用我们最喜欢的联系表单插件的免费版本：WPForms Lite。

我们假设你已经安装并激活了两个插件。如果你需要帮助

现场

话虽如此，让我们继续在WordPress中创建一个联系表单。

第1步：使用WPForms创建联系人表单

首先，您需要使用WPForms创建一个新的联系人窗体。如果您已经有了使用WPForm创建的联系表单，那么您可以跳过这一步。

点击WordPress管理工具条上的WPForms菜单，然后点击添加新按钮。

这将启动Form Builder。只需为表单输入一个名称，例如 ‘联系我们’ 然后点击“简单联系人表单”模板继续。

表单生成器将带您到字段编辑器。您可以添加或删除表单中的字段，也可以通过简单的拖放来重新排列字段。

一旦你完成，你需要点击保存按钮来存储你的变化。您的联系表格现在已准备就绪。

你需要访问 WPForms»所有表单 页。你会发现你的联系表格在那里列出。在它旁边，你会发现一个简码。您将在下一步需要这个简码。

如果您需要更详细的说明，请查看我们的分步指南，了解如何在WordPress中创建联系人表单。

现在我们已经准备好联系表单了，接下来我们继续下一步，在WordPress中创建一个Lightbox popup。

第2步：使用OptinMonster创建一个WordPress弹出窗口

首先我们需要做的是使用OptinMonster创建一个模式弹出窗口。

您需要通过在WordPress管理菜单中点击OptinMonster来创建一个新的选择，然后点击Create New Optin按钮。

这将带你到OptinMonster网站，在那里你将创建你的弹出窗口。首先，您需要为广告系列提供一个标题。你可以任意命名，例如 “联系表单弹出”。

接下来，您需要从下拉菜单中选择您的网站。点击“选择您的设计”选项下的画布。

OptinMonster会显示你可用的模板。目前，Canvas只有Whiteboard模板可用。点击模板继续。

这会将您带到Optin Customizer屏幕。你会注意到Canvas在设计上是空白的。这样做，所以你可以在使用OptinMonster的功能时添加任何你想要的东西。您可以添加一个注册表单，脸谱像框，调查，优惠券代码，或者像我们在这个例子中做一个联系表格。

在设计选项卡下，您可以选择画布的高度宽度。默认情况下，它被设置为700 x 350像素。我们至少把高度设置为520。

在“自定义HTML”框下方，您将输入联系人表单简码以及您可能要添加的任何其他自定义HTML。

以下是我们用来为本教程创建模态弹出窗口的示例HTML。

你有任何问题吗？

想要问我们更多关于我们的服务？只需填写此表格，我们会尽快回复您。

[wpforms id =“119”]

请注意，我们已经在其中嵌入了WPForms简码。如果您正在使用其他联系表格，只需使用您的联系表单简码替换简码。

在自定义HTML之后，下一个选项是输入您的自定义CSS。在自定义CSS框下方，您将看到一串随机文本，看起来像这样 html div＃om-mw7pzo63ch6wpfzi 。这是您将在自定义CSS中使用的CSS前缀。

这里是我们用来为本教程创建模态弹出窗口的CSS。

html div＃om-mw7pzo63ch6wpfzi div＃om-canvas-whiteboard-optin {
 背景色：＃f8f8f8;
 }
 html div＃om-mw7pzo63ch6wpfzi h3 {
 文本对齐：中心;
 }
 html div＃om-mw7pzo63ch6wpfzi .tagline {
 字体样式：斜体;
 }
 html div＃om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {
     填充：10px 0;
     明确：两者;
 }
 html div＃om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
     显示：块;
     font-weight：700;
     font-size：16px;
     float：none;
     行高：1.3;
     保证金：0 0 4px 0;
     填充：0;
     }

 html div＃om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
     显示：无！重要;
     位置：绝对！重要;
     左：-9000px！重要;
 }

如果您现在无法看到预览，请不要担心，稍后可以调整您的CSS。您将能够使用浏览器的检查元素工具来找出您想要定位的CSS类和选择器，然后通过编辑您的选择器来添加自定义CSS。

现在我们已经完成了设计部分。我们切换到定制程序中的配置选项卡。

将“选择Cookie时长”和“选择成功Cookie时长”都设为0.这将停止OptinMonster设置持续时间cookie。