设计 Divi 联系表单模块的 5 种独特方式
已发表: 2018-11-05联系表格是许多网站的重要组成部分。 他们的主要目的是直观并帮助访问者轻松取得联系。 但这并不意味着所有的联系表单都应该以特定的和预定义的方式呈现。 您可以轻松地将直观体验与精美设计相结合。 这正是我们在这篇文章中要做的。 我们将分享 5 个独特的 Divi 联系表单模块设计，您只能使用 Divi 的内置选项构建它们。
让我们开始吧！
Divi 联系表单模块设计预览
桌面
让我们先来看看桌面上的 Divi 联系表单模块设计。
移动的
这就是 Divi 联系表单模块设计在较小屏幕尺寸上的样子：
设计 Divi 联系表单模块的 5 种独特方式
订阅我们的 YouTube 频道
创建联系表 #1
添加新部分
渐变背景
让我们从第一个例子开始吧！ 添加一个新部分，转到背景设置并添加渐变背景。
- 颜色 1：#4c00ff
- 颜色 2：#ffd400
- 渐变类型：径向
- 径向：左下
- 起始位置：34%
- 结束位置：34%
间距
然后，转到间距设置并添加一些自定义填充值。
- 顶部填充：200px
- 底部填充：200px
添加新行
列结构
使用以下列结构添加新行：
第 1 列背景颜色
尚未添加任何模块，打开行设置并添加第 1 列渐变背景。
- 第 1 列背景颜色：rgba(255,255,255,0.55)
第 1 列背景图像
还将背景图像添加到第一列。
- 第 1 列背景图像重复：无重复
- 第 1 列背景图像混合：屏幕
第 2 列背景颜色
和第二列的白色背景颜色。
- 第 2 列背景颜色：#ffffff
浆纱
接下来更改大小设置。
- 均衡柱高：是
间距
也删除所有默认的自定义填充。
- 顶部填充：0px
- 底部填充：0px
列边界半径
向高级选项卡中的两列添加一些边框半径。
border-radius: 10px;
将文本模块添加到第 1 列
添加内容
是时候开始添加各种模块了！ 将文本模块添加到具有一些选择内容的第一列。
文字设置
然后，转到文本设置并进行一些更改。
- 文字字体：满意
- 文字颜色：#333333
- 文字大小：100px
- 文本行高：1em
- 文字方向：居中
间距
添加一些自定义填充值。
- 顶部填充：600px
- 底部填充：100px
盒子阴影
要增加设计的深度，请使用微妙的框阴影。
- 框阴影模糊强度：80px
- 框阴影扩散强度：-16px
- 阴影颜色：rgba(0,0,0,0.3)
将图像模块添加到第 2 列
上传PNG图片
继续向第二列添加图像模块。 上传所选的 PNG 图像。
浆纱
更改此模块的大小设置。
- 宽度：25%（桌面）、50%（平板）、60%（手机）
- 模块对齐：居中
间距
通过使用一些负上边距创建重叠。
- 最高利润率：-60%
将文本模块 #1 添加到第 2 列
添加内容
在图像模块的正下方，添加一个包含一些内容的文本模块。
文字设置
更改此模块的文本设置。
- 文字字体：满足
- 文字颜色：#333333
- 文字大小：44px
- 文字方向：居中
将文本模块 #2 添加到第 2 列
添加内容
接下来添加另一个文本模块。
文字设置
也更改此模块的文本设置。
- 文字字体：Arial
- 文字颜色：#ffd400
- 文字大小：18px
- 文字字母间距：2px
- 文字方向：居中
间距
接下来添加一些底部边距。
- 下边距：100px
将联系表单模块添加到第 2 列
在姓名和电子邮件字段上启用“制作全角”选项
需要的最后一个模块是联系表单模块。 在执行任何其他操作之前，请打开姓名和电子邮件字段并更改布局。
- 制作全角：是
添加主题字段
为了创建此设计，我们为该主题添加了另一个字段。
元素
接下来禁用验证码选项。
- 显示验证码：否
表单域文本设置
对此联系表单模块的表单域文本设置进行一些更改。
- 表单字段背景颜色：rgba(255,255,255,0)
- 表单域字体：Arial
- 表单域字体粗细：轻
- 表单域文本大小：16px
- 表单字段字母间距：2px
按钮设置
我们也在修改按钮外观。
- 为按钮使用自定义样式：是
- 按钮文字颜色：#ffd400
- 按钮边框宽度：0px
- 按钮字母间距：2px
- 按钮字体：Arial
- 字体样式：下划线
- 下划线颜色：#4c00ff
间距
接下来添加一些自定义填充值。
- 底部填充：100px
- 左填充：50px
- 右填充：50px
边界
并为每个字段添加一个微妙的底部边框。
- 底部边框宽度：2px
- 底部边框颜色：#efefef
单个字段间距
最后但并非最不重要的一点是，为除消息字段之外的每个字段添加一些底部边距。
- 下边距：20px
创建联系表 #2
添加新部分
渐变背景
继续下一个例子！ 添加具有渐变背景的新部分。
- 颜色 1：#562fef
- 颜色 2：#ffffff
- 渐变类型：线性
- 起始位置：50%
- 结束位置：50%
间距
在本节的间距设置中添加一些自定义填充值。
- 顶部填充：200px
- 底部填充：200px
添加新行
列结构
使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并为该行添加背景颜色。
- 背景颜色：#ffffff
第 2 列渐变背景
将渐变背景添加到下一行的第二列。
- 颜色 1：#9932ff
- 颜色 2：#562fef
- 第 2 列梯度类型：线性
- 第 2 列梯度方向：160 度
浆纱
还要更改行的大小设置。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
间距
然后，添加一些自定义间距值。
- 顶部填充：0px
- 底部填充：0px
- 第 1 列顶部填充：100px
- 第 1 列底部填充：50px
- 第 1 列左填充：50px
- 第 1 列右填充：50px
- 第 2 列顶部填充：100px
- 第 2 列底部填充：100px
- 第 2 列左填充：50px
- 第 2 列右填充：50px
边界
将“20px”添加到行的每个边框。
盒子阴影
最后，为该行添加一个微妙的框阴影。
- 框阴影模糊强度：45px
- 框阴影扩散强度：-11px
- 阴影颜色：rgba(0,0,0,0.3)
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 从第一列中的文本模块开始。
文字设置
更改此模块的文本设置。
- 文字字体粗细：超粗
- 文本字体样式：大写
- 文字颜色：#562fef
- 文字 Suze：100 像素（桌面）、80 像素（平板电脑）、60 像素（手机）
- 文字字母间距：-10px
- 文本行高：1em
间距
添加一些底部边距。
- 下边距：50px
将联系表单模块添加到第 1 列
元素
我们在第一列中需要的第二个模块是联系表单模块。 添加模块后，禁用“显示验证码”选项。
- 显示验证码：否
表单域文本设置
接下来更改表单域的背景颜色。
- 表单字段背景颜色：#ffffff
按钮设置
还可以使用按钮设置来创建一个图标按钮而不是包含文本的按钮。
- 为按钮使用自定义样式：是
- 按钮文字大小：73px
- 底部文字颜色：rgba(0,0,0,0)
- 悬停按钮背景颜色：rgba(255,255,255,0)
- 按钮边框宽度：0px
- 按钮图标颜色：#9932ff
- 仅在悬停按钮时显示图标：否
盒子阴影
最后，为每个字段添加一个微妙的框阴影。
- 框阴影模糊强度：36px
- 框阴影模糊强度：-14px
- 阴影颜色：rgba(0,0,0,0.3)
将文本模块添加到第 2 列
添加内容
我们在第二列中需要的第一个模块是另一个文本模块。
文字设置
添加内容后，更改此模块的文本设置。
- 文字字体粗细：超粗
- 文字颜色：#ffffff
- 文字大小：23px
- 文字字母间距：-1px
将 Blurb 模块 #1 添加到第 2 列
添加内容
我们需要的第二个模块是 Blurb 模块。 继续并输入一些联系信息。
选择图标
然后，选择一个匹配的图标。
图标设置
更改此图标的设置。
- 图标颜色：#ffffff
- 图标位置：左
标题文字设置
接下来继续对标题文本设置进行一些更改。
- 标题文字大小：15px
- 标题字母间距：-0.5px
间距
并添加一些上边距。
- 上边距：120px
克隆 Blurb 模块两次
完成第一个 Blurb 模块的修改后，您可以继续克隆该模块两次。
更改两个副本的内容和图标
更改两个副本的内容和图标以与访问者共享不同类型的联系信息。
更改两个副本的间距
两个副本的上边距也需要更改。
- 上边距：30px
创建联系表 #3
添加新部分
背景颜色
继续第三个例子！ 添加具有以下背景颜色的新部分：
- 背景颜色：#3491CE
间距
继续在间距设置中添加一些自定义填充值。
- 顶部填充：200px
- 底部填充：200px
添加第 1 行
列结构
然后，使用以下列结构添加新行：
添加文本模块
添加内容
是时候开始添加模块了！ 我们需要添加到第一列的第一个模块是文本模块。 输入一些选择的内容。
文字设置
然后，更改文本设置。
- 文字字体粗细：超粗
- 文字颜色：rgba(255,255,255,0.24)
- 文字大小：100px（桌面）、86px（平板）、60px（手机）
- 文本行高：1em
- 文字方向：居中
间距
还要添加一些负底边距。
- 下边距：-100px
添加第 2 行
列结构
我们需要完成此示例的第二行包含以下列结构：
渐变背景
尚未添加任何模块，打开行设置并添加渐变背景。
- 颜色 1：#11CE84
- 颜色 2：#10C77F
- 渐变类型：线性
- 渐变方向：160度
- 起始位置：50%
- 结束位置：50%
浆纱
还要更改大小设置。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
间距
接下来添加一些自定义填充值。
- 顶部填充：150px
- 底部填充：100px
- 左填充：50px
- 右填充：50px
边界
然后，转到边框设置并为每个角添加“20px”。 也使用底部边框。
- 底部边框宽度：10px
- 底部边框颜色：#1ba35a
盒子阴影
通过添加微妙的框阴影来完成行设置。
- 框阴影模糊强度：80px
- 框阴影传播强度：-24px
- 阴影颜色：rgba(0,0,0,0.3)
将联系表单模块添加到第 1 列
在姓名和电子邮件字段上启用“制作全角”选项
我们在行的第一列中需要的第一个模块是联系表单模块。 打开姓名和电子邮件字段并更改布局设置。
- 制作全角：是
元素
接下来禁用验证码。
- 显示验证码：否
按钮设置
并更改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字颜色：#ffffff
- 颜色 1：#3AA0E3
- 颜色 2：#3491CE
- 渐变类型：线性
- 梯度方向：155deg
- 起始位置：50%
- 结束位置：50%
- 按钮边框宽度：0px
- 按钮边框半径：10px
- 框阴影扩散强度：-2px
- 阴影颜色：#0a60af
边界
我们还为每个字段添加了“5px”的圆角。
将文本模块添加到第 2 列
添加内容
在第二列中，我们需要的第一个模块是文本模块。 继续输入一些内容。
背景颜色
然后，更改背景颜色。
- 背景颜色：rgba(255,255,255,0.13)
文字设置
也可以使用文本设置。
- 文字字体粗细：轻
- 文字颜色：#ffffff
- 文字大小：15px
- 文字字母间距：-0.5px
间距
并添加一些自定义填充来为模块提供呼吸空间。
- 顶部填充：12px
- 底部填充：12px
- 左填充：10px
- 右填充：10px
边界
我们还在左上角和左下角添加了“20px”。 最重要的是，我们将添加一个左边框。
- 左边框宽度：34px
- 左边框颜色：#edf000
能见度
为了使此设计匹配不同的屏幕尺寸，我们将禁用手机和平板电脑上的文本模块。
克隆文本模块两次
完成第一个文本模块的修改后，继续克隆该模块两次。
更改两个副本的内容
将两个副本的内容更改为其他内容。
更改两个副本的间距
并添加一些顶部边距以在每个模块之间创建空间。
- 上边距：20px
更改两个副本的边框
最后但并非最不重要的一点是，单独更改每个副本的左边框颜色。
- 颜色 1：#00faff
- 颜色 2：#00f76f
创建联系表 #4
添加新部分
背景颜色
继续第四个例子！ 使用以下背景颜色添加新部分：
- 背景颜色：#FFBABD
间距
删除此部分的默认填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加新行：
渐变背景
尚未添加任何模块，打开行设置并添加渐变背景。
- 颜色 1：#ffffff
- 颜色 2：rgba(41,196,169,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：38%
- 结束位置：38%
浆纱
接下来更改大小设置。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
并添加一些自定义填充。
- 顶部填充：160px
- 底部填充：160px
添加文本模块
添加内容
我们需要的第一个模块是文本模块。 继续输入一些内容。
文字设置
相应地更改文本设置：
- 文字字体：Abril Fatface
- 文字颜色：#640076
- 文字大小：45px（桌面）、34px（平板电脑）、20px（手机）
- 文本行高：1em
- 文字方向：居中
间距
接下来添加一些自定义间距值。
- 上边距：300px
- 顶部填充：50px
- 底部填充：50px
添加联系表单模块
在姓名和电子邮件字段上启用“制作全角”选项
我们需要的第二个也是最后一个模块是联系表单模块。 打开姓名和电子邮件字段并更改布局设置。
- 制作全角：是
元素
然后，禁用元素设置中的验证码选项。
- 显示验证码：否
表单域文本设置
还要对表单字段文本设置进行一些更改。
- 表单字段背景颜色：#fff6f6
- 表单字段文本颜色：#ff7c7c
按钮设置
使用以下设置将按钮更改为图标按钮：
- 为按钮使用自定义样式：是
- 按钮文字大小：88px
- 按钮文字颜色：rgba(255,255,255,0)
- 悬停按钮背景颜色：rgba(255,255,255,0)
- 按钮边框宽度：0px
- 按钮图标颜色：#e60085
- 仅在悬停按钮时显示图标：是
浆纱
并调整大小值以使设计匹配所有屏幕尺寸。
- 宽度：42%（桌面）、50%（平板）、77%（手机）
- 模块对齐：居中
间距
继续向模块添加一些自定义间距值。
- 下边距：200px
- 左填充：50px
- 右填充：50px
边界
并在每个角上添加“10px”。
按钮边距
最后但并非最不重要的一点是，使用高级选项卡中的以下 CSS 代码行将图标按钮推到右侧：
margin-right: -100px;
创建联系表 #5
添加新部分
渐变背景
继续最后一个例子！ 添加具有以下渐变背景的新部分：
- 颜色 1：#4bf2d0
- 颜色 2：#ffffff
- 渐变类型：径向
- 径向：左
- 起始位置：36%
- 结束位置：36%
间距
然后，转到间距设置并添加一些自定义填充。
- 顶部填充：250px
- 底部填充：250px
添加新行
列结构
完成修改部分设置后，使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并添加背景颜色。
- 背景颜色：#ffffff
第 1 列背景颜色
向第一列添加另一种背景颜色。
- 第 1 列背景颜色：#f9f9f9
浆纱
然后，更改行的大小设置。
- 使用自定义宽度：是
- 单位：PX
- 自定义宽度：1730px
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
间距
并添加一些自定义间距值以匹配所有屏幕尺寸。
- 顶部填充：0px
- 底部填充：0px
- 第 1 列顶部填充：200 像素（桌面）、0 像素（平板电脑和手机）
- 第 1 列底部填充：150 像素（桌面）、0 像素（平板电脑和手机）
- 第 1 列左填充：50px
- 第 1 列右填充：50px
- 第 2 列顶部填充：200 像素（桌面）、100 像素（平板电脑和手机）
- 第 2 列底部填充：150 像素、100 像素（平板电脑和手机）
盒子阴影
您需要在行设置中做的最后一件事是添加一个微妙的框阴影。
- 框阴影模糊强度：56px
- 框阴影传播强度：-17px
- 阴影颜色：rgba(0,0,0,0.3)
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 将文本模块添加到第一列。
文字设置
添加内容后，转到文本设置并进行一些更改。
- 文字字体：Cambay
- 文字颜色：#000000
- 文字大小：26px
- 文字字母间距：-0.5px
- 文字方向：右
间距
添加一些上边距。
- 上边距：60px
能见度
并在手机和平板电脑上隐藏模块。
克隆文本模块两次
更改两个副本的内容
完成第一个文本模块的修改后，继续克隆该模块两次。 更改两个副本的内容。
更改两个副本的间距
还要修改两个重复项的上边距。
- 上边距：80px
将联系表单模块添加到第 2 列
在姓名和电子邮件字段上启用“制作全角”选项
我们在第二列中唯一需要的模块是联系表单模块。 打开姓名和电子邮件字段并更改布局设置。
- 制作全角：是
元素
接下来禁用验证码选项。
- 显示验证码：是
表单域文本设置
然后，转到表单字段文本设置并进行一些修改。
- 表单字段背景颜色：rgba(255,255,255,0)
- 表单字段字体：Cambay
按钮设置
并使用以下按钮设置创建一个独特的按钮：
- 为按钮使用自定义样式：是
- 按钮文字大小：64px（桌面）、50px（平板电脑）、40px（手机）
- 按钮文字颜色：#000000
- 颜色 1：#4bf2d0
- 颜色 2：rgba(41,196,169,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：25%
- 结束位置：25%
- 按钮边框宽度：0px
- 仅在悬停按钮时显示按钮：否
间距
也为这个模块添加一些上边距。
- 上边距：50px
边界
并为每个字段使用一个微妙的底部边框。
- 底部边框宽度：0.5px
- 底部边框颜色：#000000
单个字段间距
最后但并非最不重要的一点是，将以下底部边距分别添加到每个字段中，您就完成了！
- 下边距：50px
预览
桌面
现在我们已经完成了所有步骤，让我们最后看看桌面上的 Divi 联系表单模块设计。
移动的
这就是您可以从较小屏幕尺寸的 Divi 联系表单模块设计中获得的期望：
最后的想法
在这篇文章中，我们分享了 5 个漂亮的 Divi 联系表单模块设计，您可以轻松地为您创建的任何网站使用和修改它们。 联系表格是许多网站的重要组成部分，因此确保您的设计说服访问者取得联系非常重要。 如果您有任何问题或建议，请务必在下方评论区留言！