小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

如何在WordPress中添加滑出式联系表单

java,大数据,python,html,web 额外说明

收录于:17天前

您想在 WordPress 中添加滑出联系表单吗?如果您的业务依赖于从网站的联系表单中获取新的潜在客户,那么增加潜在客户来源的最佳方法之一就是使您的联系表单更加引人注目。在本文中,我们将向您展示如何在 WordPress 中添加滑出联系表单而不打扰您的用户。

您想在 WordPress 中添加滑出式联系表单吗?如果您的企业依赖于从网站的联系表单中生成新的潜在客户,那么增加潜在客户来源的最佳方法之一就是使您的联系表单更加明显。在本文中,我们将向您展示如何在 WordPress 中添加滑出式联系表单而不打扰用户。

Adding a slide out contact form in WordPress
为什么要在WordPress中添加滑出式联系表单? Why Add a Slide Out Contact Form in WordPress?

Many small business owners 启动他们的网站 hoping that it will help them grow their business.

许多小型企业主启动他们的网站,希望它能帮助他们发展业务。

That’s why you add a 联系表 page, so users can get in touch with you.

因此,您添加了联系表页面,以便用户可以与您取得联系。

然而,问题是大多数可能有疑问的用户会在不与您联系的情况下离开您的网站。

然而,问题是大多数可能有疑问的用户会在不联系您的情况下离开您的网站。

That’s why you might notice that many popular websites add 联系表单弹出窗口, slide in contact forms, or call to action buttons that open contact forms.

因此,您可能会注意到许多受欢迎的网站都添加了联系表格弹出窗口 ,在联系人表单中滑动或打开了联系人表单的号召性用语按钮。

这些动画和交互式选项将用户的注意力转移到联系表单上,并允许他们快速填写表单而无需访问其他页面。这些表单可以显着提高您的转化率,这就是为什么您到处都能看到它们。

这些动画和交互选项将用户的注意力引导到联系表单上,并允许他们快速填写表单而无需访问其他页面。这些表单极大地提高了您的转化率,这就是为什么您随处可见它们的原因。

让我们看看如何在 WordPress 中创建滑出联系表单。

让我们看看如何在 WordPress 中创建滑出式联系表单。

在WordPress中添加滑出式联系表单 Adding a Slide Out Contact Form in WordPress

For this tutorial, you will need WP表格. It is the 最好的 WordPress 联系表单插件 in the market.

对于本教程,您将需要WP表格 。 它是市场上最好的 WordPress 联系表单插件

You can use the a WPForms 的免费版本 contact form plugin if you don’t need all the premium features.

如果不需要所有高级功能,则可以使用WP表格联系人表单插件的免费版

You’ll also need 选择怪物. It is the most powerful conversion optimization software. It helps you convert abandoning website visitors into customers. You’ll need their pro plan which gives you access to the canvas feature that we will be using in this tutorial.

您还需要选择怪物 。 它是功能最强大的转换优化软件。 它可以帮助您将放弃网站访问者转化为客户。 您将需要他们的专业计划,该计划可让您访问我们将在本教程中使用的画布功能。

步骤1.在WordPress中创建联系表单 Step 1. Creating a Contact Form in WordPress

First you need to install and activate the WP表格 plugin. For more details, see our step by step guide on 如何安装 WordPress 插件.

首先,您需要安装并激活WP表格插件。 有关更多详细信息,请参阅有关如何安装 WordPress 插件步指南。

Upon activation, you need to visit WPForms » 添加新内容 page to create your contact form. This will launch the WPForms builder interface.

激活后,您需要访问WPForms » 添加新内容页面以创建您的联系表。 这将启动WPForms构建器界面。

输入联系表单的名称,然后选择“选择联系表单”模板。

输入您的联系人姓名并选择“选择联系人”模板。

Create a new contact form

WPForms 将加载一个简单的联系表单。您将在右侧窗格中看到表单预览。您可以单击任何字段进行编辑或从左列添加新字段。

WPForms 将加载一个简单的联系表单。您将在右侧窗格中看到表单的预览。您可以单击任何字段进行编辑或从左列添加新字段。

Form builder

完成表单编辑后,单击“保存”按钮保存更改。

完成表单编辑后,单击“保存”按钮保存更改。

接下来,您需要单击顶部的嵌入按钮以获取表单的嵌入代码。

接下来,您需要单击顶部的嵌入按钮以获取表单的嵌入代码。

这将弹出一个弹出窗口,显示您表单的短代码。继续复制此短代码,因为您在下一步中将需要它。

这将弹出一个弹出窗口,显示表单简码。继续复制此短代码,因为下一步将需要它。

第2步。 在OptinMonster中创建滑出Optin Step2. Creating a Slide Out Optin in OptinMonster

现在我们将创建一个滑出活动,它将显示您在第一步中创建的联系表单。

现在,我们将创建一个滑出式营销活动,其中将显示您在第一步中创建的联系表单。

First, you need to install and activate the 选择怪物 plugin. For more details, see our step by step guide on 如何安装 WordPress 插件.

首先,您需要安装并激活选择怪物插件。 有关更多详细信息,请参阅有关如何安装 WordPress 插件步指南。

该插件充当您的网站和 OptinMonster 帐户之间的连接器。

该插件充当您的网站和 OptinMonster 帐户之间的连接器。

激活后,单击 WordPress 管理栏中的 OptinMonster 菜单并输入您的 API 密钥。您可以从 OptinMonster 网站上的帐户获取此信息。

激活后,单击 WordPress 管理栏中的 OptinMonster 菜单并输入您的 API 密钥。您可以从 OptinMonster 网站上的帐户获取此信息。

OptinMonster API key

输入许可证密钥后,单击屏幕右上角的“创建新选项”按钮。

输入许可证密钥后,单击屏幕右上角的“创建新选项”按钮。

New optin

这将带您进入 OptinMonster 网站。

这将带您进入 OptinMonster 网站。

OptinMonster 提供不同类型的动态活动。在本教程中,我们将使用“滑入”活动。继续并点击选择“滑入”作为您的广告系列类型。

OptinMonster 提供不同类型的动态活动。在本教程中,我们将使用幻灯片插入活动。继续并单击选择“幻灯片插入”作为您的广告系列类型。

Slide in optin

接下来,您需要选择模板。 OptinMonster 提供了几个现成的模板,但我们需要在本教程中选择“Canvas”。

接下来,您需要选择一个模板。 OptinMonster 提供了几个现成的模板,但在本教程中我们需要选择“Canvas”。

Optin template

选择模板后,系统会要求您提供广告活动的名称。这将帮助您在 OptinMonster 仪表板中轻松找到该活动。

选择模板后,系统会要求您提供广告活动的名称。这将帮助您在 OptinMonster 仪表板中轻松找到您的营销活动。

现在 OptinMonster 将加载其活动构建器界面。

OptinMonster 现在将加载其活动构建器界面。

OptinMonster builder

您将在右侧看到活动的实时预览。由于我们使用的是画布模板,因此此时它完全是空白的。

您将在右侧看到广告系列的实时预览。由于我们使用的是画布模板,因此此时它将完全空白。

在左侧,您会注意到不同的选项卡。在“常规选择设置”部分下,您需要在“选择活动网站”选项下方输入网站的 URL。

在左侧,您会注意到不同的选项卡。在“常规优化设置”部分下,您需要在“优化广告系列网站”选项下输入您网站的网址。

接下来,您需要切换到“选择”选项卡。您可以在此处选择颜色、高度和宽度。

接下来,您需要切换到“Optin”选项卡。在这里您可以选择颜色、高度和宽度。

Design your slide out form

选择你喜欢的颜色并调整宽度和高度,这样它就能很好地展示你的整个形状。

继续选择您喜欢的颜色,然后调整宽度和高度,以便它很好地显示您的整个表单。

之后,您需要向下滚动到“Canvas custom HTML”部分并输入您之前复制的 WPForms 短代码。

之后,您需要向下滚动到“Canvas Custom HTML”部分并输入您之前复制的 WPForms 短代码。

Add shortcode to custom HTML

输入短代码不会立即在滑入式营销活动中显示您的表单。这是因为短代码仅适用于您自己的 WordPress 网站。

输入短代码不会立即在滑入式营销活动中显示您的表单。这是因为短代码只能在您自己的 WordPress 网站上使用。

您现在可以单击顶部的“保存”按钮来存储您的设置,然后单击“发布”按钮。

您现在可以单击顶部的“保存”按钮来存储您的设置,然后单击“发布”按钮。

Save and publish your optin

在下一个屏幕上,您需要将选择状态更改为已发布。这将使您的 WordPress 网站可以选择该选项。

在下一个屏幕上,您需要将选择状态更改为已发布。这将使 optin 可用于您的 WordPress 网站。

Publish status
第3步。在WordPress中显示滑出联系表 Step 3. Showing Slide Out Contact Form in WordPress

现在您已经创建了联系表单和滑出式营销活动,您可以将其显示在您的网站上。

现在您已经创建了联系表单和滑出式营销活动,是时候将其显示在您的网站上了。

Go ahead and visit 选择怪物 page in your WordPress admin area. You will see your recently created slide out campaign listed there.

继续并在WordPress管理区域中访问选择怪物页面。 您将在此处看到您最近创建的滑出式广告系列。

Edit optin output settings

您需要单击“编辑输出设置”链接来决定如何在网站上显示。

您需要点击“编辑输出设置”链接来决定您希望它在您的网站上的显示方式。

在下一个屏幕上,请确保选中“在网站上启用选择?”选项旁边的框。 OptinMonster 允许您选择谁可以看到 optin。您还可以选择网站的特定区域来显示选择。

在下一个屏幕上,确保选中“在网站上启用选择?”旁边的框。已检查。选项。 OptinMonster 允许您选择谁可以看到 optin。您还可以选择网站的特定区域来显示选择。

Enable optin on your website

不要忘记单击“保存设置”按钮来存储您的更改。

不要忘记单击“保存设置”按钮来存储您的更改。

您现在可以访问您的网站以查看正在运行的滑出联系表单。确保您在浏览器中使用 icognito 模式或注销 WordPress,以便您可以准确地看到用户将看到的内容。

现在您可以访问您的网站以查看滑出式联系表格。确保在浏览器中使用 icognito 模式或注销 WordPress,以便您可以准确地看到用户所看到的内容。

Slide out contact form preview

默认情况下,滑出活动将在页面完全加载后 5 秒出现。然而,OptinMonster 也允许您改变这一点。

默认情况下,滑出式营销活动会在页面完全加载后 5 秒出现。但是,OptinMonster 也允许您更改它。

您可以创建无数规则,以便在满足某些条件时显示营销活动。

您可以创建无数规则来在满足特定条件时显示您的营销活动。

例如,您可以在用户滚动页面 50% 时、用户即将离开页面等时显示滑出表单。

例如,您可以在用户滚动页面的 50% 时、即将离开页面等时显示滑出表单。

Display rules

We hope this article helped you learn how to add slide out contact form in WordPress. You may also want to see our list of 为您的 WordPress 网站带来流量的可行技巧.

我们希望本文能帮助您学习如何在WordPress中添加幻灯片输出联系表单。 您可能还希望查看我们的可行的建议列表, 为您的 WordPress 网站带来流量

If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-a-slide-out-contact-form-in-wordpress/

. . .

相关推荐

额外说明

高德地图info窗体中超链接点击跳转在app中的实现

1.高德地图信息窗体有模板类、默认类、自定义类、带导航栏标签类等。详情 2.简单窗体类型  可以直接设置点击监听,当点击后可以触发超链接效果。当然我这里与博客标题不符,不做阐述。 3.楼主使用的是一个叫AdvancedInfoWindow的窗体结构,很好

额外说明

MFC按钮控制bmp单色矩形图片优化校准切换显示

1. 添加“Picture Control”控件 Type 改为 Bitmap 2. 复制 到“res”文件夹下面 3. 在资源视图,添加“IDB_BITMAP1”对于black.bmp, “IDB_BITMAP2”对应red.bmp 4. 添加处理程序

额外说明

在线教育项目总结

1、项目描述 (1) 在线教育系统,分为前台网站系统和后台运营平台,B2C模式。 前台用户系统包括课程、讲师、问答、文章几大大部分,使用了微服务技术架构,前后端分离开发。 后端的主要技术架构是:SpringBoot + SpringCloud + MyB

额外说明

Unity 热更新技术 |(六)xLua框架学习最新系列完整教程

- 博客主页:https://xiaoy.blog.csdn.net - 本文由 呆呆敲代码的小Y 原创,首发于 CSDN- - 学习专栏推荐:Unity系统学习专栏 - 游戏制作专栏推荐:游戏制作 -Unity实战100例专栏推荐:Unity 实战10

额外说明

【Java基础】类的成员总结(属性,方法,构造器,代码块,内部类)

类的成员总结 1.属性 2.方法 3.构造器 4.代码块 5.内部类 1.属性 属性 = 成员变量 = field = 域、字段 类中属性的使用: 属性(成员变量) vs 局部变量 1.相同点: 1.1 定义变量的格式:数据类型 变量名 = 变量值 1.

额外说明

[Ext JS]5.11 轻量版的树- treelist

treelist, Ext.list.Tree 是一种轻量的用于显示树形结构的组件。 Ext.list.Tree 的继承关系 Ext.list.Tree 继承自 Ext.Gadget, Gadget的中文意思是小工具。 Ext.Gadget 其实不是一个

额外说明

awk变量

awk变量 awk参数 参数 解释 -F 指定分割字段符 -v 定义或修改一个awk内部的变量 -f 从脚本文件中读取awk命令 对于awk而言,变量分为 内置变量 自定义变量 内置变量 解释 FS 输入字段分隔符, 默认为空白字符 OFS 输出字段分隔

额外说明

春招面经总结(获携程Offer)

一、背景介绍 春招期间,从2.20多开始,为防止考研复试被刷,进行了中、大厂的简历投递,包括美团、携程、京东、华为、百度、小红书。历经近两个月,今天打电话收到了携程上海的Java基础架构开发Offer,算是春招的圆满结束啦。接下来简单谈谈自己在春招过程的

ads via 小工具