如何在WordPress中创建联系人表单弹出窗口-分步指南

[ad_1]

如何在Wordpress中创建联系人表单弹出窗口

当用户单击联系人按钮或链接时,是否要弹出您的联系表单?

这样做的好处是,每次用户单击联系人按钮或链接时,而不是转到新页面,联系人表单都会以弹出窗口的形式打开,这将增加表单的提交。在本文中,我们将向您展示如何在WordPress网站中创建联系人表单弹出窗口,而不逐步影响用户体验。

在WordPress中轻松创建联系人表单弹出窗口

使用WordPress,可以轻松创建联系人表单弹出窗口。要开始使用,您只需要具备以下两点:

  1. 一个强大的弹出插件
  2. 强大的表单生成器插件

为了获得最佳结果,我们建议您使用 WP表格 用于创建您的联系表单。它是一个功能强大的表单生成器插件,可让您在不到5分钟的时间内构建几乎所有类型的表单。进一步了解 WPForms在这里

WPForms,用户注册,插件,用户登录插件

到那个时刻 弹出插件,我们认为没有其他选择比这更好 OptionMonster。它是最受欢迎的 强大的潜在客户生成插件 这样一来,您就可以吸引访问者的注意力,并鼓励他们使用令人惊叹的optins对您的网站采取行动。通过此插件,您可以提高用户参与度并提高转化次数和销售量。

Optinmonster弹出窗口

要了解有关OptinMonster的更多信息,请阅读我们的 OptinMonster详细评论

步骤1:安装WPForms和OptinMonster插件

add-wordpress-plugins“ width =” 745“ height =” 353“ class =” alignnone size-full wp-image-220382“ srcset =” https://www.isitwp.com/wp-content/uploads/2018/ 06 / add-wordpress-plugins.jpg 745w,https://www.isitwp.com/wp-content/uploads/2018/06/add-wordpress-plugins-300x142.jpg 300w“ size =”(max-width: 745px)100vw,745px“></p>
<p>首先下载 <a href=WP表格 插入。然后,安装并激活它。不确定如何?没问题。您可以跳到我们的指南 如何安装WordPress插件 得到所有整理。我们将等待。

搞定?完善。

按照相同的过程激活OptinMonster插件。但是仅安装插件是不够的。你必须 创建一个帐户 也可以使用OptinMonster应用。该插件仅充当将WordPress网站与OptinMonster应用程序连接的媒介。因此,要使其正常工作,您必须安装插件并使用该应用程序创建一个帐户。

步骤2:使用WPForms为弹出窗口创建联系表单

我们将首先使用WPForms插件创建联系表单。但是,如果您一直在使用WPForms并已使用它创建了联系表单,则可以跳过此步骤。

如果没有联系表单,请转到仪表板,然后单击WPForms»Add New。

wpforms-dashboard“ width =” 740“ height =” 324“ class =” alignnone size-full wp-image-228947“ srcset =” https://www.isitwp.com/wp-content/uploads/2018/12/ wpforms-dashboard.jpg 740w,https://www.isitwp.com/wp-content/uploads/2018/12/wpforms-dashboard-300x131.jpg 300w“ size =”(最大宽度:740px)100vw,740px“ ></a></p>
<p>这将带您到另一个页面,您可以在其中选择表单模板并为表单添加名称。选择简单联系人表单模板,然后为表单命名。 </p>
<p><a href=WPForms Lite模板

完成该过程后,将启动表单生成器,这使您可以轻松设计表单。您可以使用拖放生成器轻松添加或删除文件。

https://www.isitwp.com/“ width =” 775“ height =” 500“ class =” alignnone size-full wp-image-239206“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/WPForms-builder.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/WPForms-builder-300x194.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / WPForms-builder-768x495.png 768w“ size =”(最大宽度:775px)100vw,775px“></a></p>
<p>您可以添加您认为对表单必不可少的所有字段。完成所有操作后,请点击保存按钮以保存您的更改。您的联系表格现已准备就绪。</p>
<p>现在点击保存按钮旁边的嵌入标签,然后复制简码。 </p>
<p><a href=https://www.isitwp.com/“ width =” 775“ height =” 537“ class =” alignnone size-full wp-image-239439“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/WPForms-Builder-shortcode.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/WPForms-Builder-shortcode-300x208.png 300w,https:/ /www.isitwp.com/wp-content/uploads/2019/11/WPForms-Builder-shortcode-768x532.png 768w“ size =”(max-width:775px)100vw,775px“></a></p>
<h3>步骤3:使用OptinMonster创建WordPress弹出窗口</h3>
<p>下一步是在您的网站上创建一个弹出窗口。我们将使用创建一个模式弹出窗口 <a href=OptinMonster。因此,转到您的WordPress仪表板,然后单击OptinMonster»创建新活动。

https://www.isitwp.com/“ width =” 561“ height =” 206“ class =” alignnone size-full wp-image-239207“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/optinmonster-popups.jpg 561w,https://www.isitwp.com/wp-content/uploads/2019/11/optinmonster-popups-300x110.jpg 300w“ size =”(max-width :561px)100vw,561px“></a></p>
<p>这将打开一个新屏幕,您可以在其中选择广告系列类型,然后选择您的选择模板。对于广告系列类型,我们将选择弹出选项。 </p>
<p><a href=https://www.isitwp.com/“ width =” 775“ height =” 325“ class =” alignnone size-full wp-image-239435“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/OptinMonster-Campaign-1-1.jpg 775w,https://www.isitwp.com/wp-content/uploads/2019/11/OptinMonster-Campaign-1-1-300x126.jpg 300w ,https://www.isitwp.com/cn/wp-content/uploads/2019/11/OptinMonster-Campaign-1-1-768x322.jpg 768w“ size =”(最大宽度:775px)100vw,775px“></a></p>
<p>对于模板,我们来看一下Canvas。这是一块空白画布,支持所有形式的短代码。因此,您可以在此处插入任何HTML,CSS,JavaScript,甚至WordPress短代码。</p>
<p><a href=https://www.isitwp.com/“ width =” 756“ height =” 454“ class =” alignnone size-full wp-image-239436“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/template-optinmonster.jpg 756w,https://www.isitwp.com/wp-content/uploads/2019/11/template-optinmonster-300x180.jpg 300w“ size =”(max-width :756px)100vw,756px“></a></p>
<p>选择模板后,将转到一个新屏幕,您可以在其中命名广告系列。 </p>
<p><a href=https://www.isitwp.com/“ width =” 537“ height =” 519“ class =” alignnone size-full wp-image-239437“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/name-your-optinmonster-campaign.png 537w,https://www.isitwp.com/wp-content/uploads/2019/11/name-your-optinmonster-campaign-300x290.png 300w “ size =”(最大宽度:537px)100vw,537px“></a></p>
<p>接下来单击开始构建选项卡。现在,您将被定向到拖放生成器。您会注意到,画布在设计上是空白的。您可以使用此画布创建任何弹出窗口,并从头开始设计它们。您可以使用“设计”选项卡下的选项进行操作。  </p>
<p>完成后,单击“设计”选项卡下的“添加块”选项卡。向下滚动以找到“元素块”选项。在此下方,您将看到一个HTML块。将其拖放到设计区域。 </p>
<p><a href=https://www.isitwp.com/“ width =” 775“ height =” 472“ class =” alignnone size-full wp-image-239438“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/Add-blocks.jpg 775w,https://www.isitwp.com/wp-content/uploads/2019/11/Add-blocks-300x183.jpg 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / Add-blocks-768x468.jpg 768w“ size =”(最大宽度:775px)100vw,775px“></a></p>
<p>在这里,您可以输入联系方式简码以及您可能想要添加的任何其他自定义HTML。因此,我们添加如下的简码:</p>
<h3>你有任何问题吗?</h3>
<p class=想进一步询问我们的服务吗?只需填写表格,我们会尽快与您联系。

以下是有关操作方法的预览。

https://www.isitwp.com/“ width =” 775“ height =” 425“ class =” alignnone size-full wp-image-239441“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/HTML-code.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/HTML-code-300x165.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / HTML-code-768x421.png 768w“ size =”(最大宽度:775px)100vw,775px“></a></p>
<p>请注意,我们之前创建的表单的短代码也已嵌入到代码中。您可以用您的短代码代替。现在保存您的更改。之后,转到“显示规则”选项卡,并将时间设置为零,如屏幕截图所示。 </p>
<p><a href=https://www.isitwp.com/“ width =” 633“ height =” 395“ class =” alignnone size-full wp-image-239442“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/Editing-popup-form-timing.jpg 633w,https://www.isitwp.com/wp-content/uploads/2019/11/Editing-popup-form-timing-300x187.jpg 300w “ size =”(最大宽度:633px)100vw,633px“></a></p>
<p>向下滚动此屏幕,您会发现更多选项。如果要在特定页面或帖子上显示此表单,可以使用它们。完成后点击“保存”按钮。 </p>
<h3>步骤4:发布弹出式表单</h3>
<p>完成更改后,请点击顶部的是/否选项,然后点击激活标签。 </p>
<p><a href=https://www.isitwp.com/“ width =” 604“ height =” 508“ class =” alignnone size-full wp-image-239443“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/Editing-popup-form-OptinMonster-App.jpg 604w,https://www.isitwp.com/wp-content/uploads/2019/11/Editing-popup-form-OptinMonster-App- 300x252.jpg 300w“ size =”(最大宽度:604px)100vw,604px“></a></p>
<p>最后,转到“发布”选项卡,然后将状态切换为实时。</p>
<p><img loading=

完成后,返回到WordPress仪表板,然后转到OptinMonster»广告系列。在这里,您会看到自己的广告系列。在其下单击“编辑输出设置”链接。它将展开以显示一些选项。选中在网站上启用广告系列选项旁边的框。

https://www.isitwp.com/“ width =” 752“ height =” 448“ class =” alignnone size-full wp-image-239444“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/enable-optin-2.jpg 752w,https://www.isitwp.com/wp-content/uploads/2019/11/enable-optin-2-300x179.jpg 300w“ size =” (最大宽度:752px)100vw,752px“></a></p>
<p>最后,单击页面末尾的“保存设置”选项。</p>
<h3>步骤5:添加链接以触发“联系人”表单弹出窗口</h3>
<p>首先复制OptinMonster广告活动子弹。您可以在广告系列名称旁边找到它。 </p>
<p><a href=https://www.isitwp.com/“ width =” 758“ height =” 359“ class =” alignnone size-full wp-image-239446“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/publish-optin-1.jpg 758w,https://www.isitwp.com/wp-content/uploads/2019/11/publish-optin-1-300x142.jpg 300w“ size =” (最大宽度:758px)100vw,758px“></a></p>
<p>现在,在WordPress中创建一个新页面,或编辑要在其中添加联系人表单弹出链接或按钮的帖子或页面。我们将在这里创建一个新的。转到您的文本编辑器并添加以下代码。别忘了用自己的弹头替换弹头。  </p>
<p><a href=联系我们

https://www.isitwp.com/“ width =” 775“ height =” 491“ class =” alignnone size-full wp-image-239447“ srcset =” https://www.isitwp.com/wp-content /uploads/2019/11/text-editor.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/text-editor-300x190.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / text-editor-768x487.png 768w“ size =”(最大宽度:775px)100vw,775px“></a></p>
<p>完成后,点击右侧的“发布”按钮。您的表格现已生效。从前端访问您的网站,您会看到它。 </p>
<p>希望本文对您有所帮助。如果您想进一步了解 <a href=创建联系表格 使用WPForms,这里是详细的指南。

相关文章