你想创建一个 联系表 通过模块访问您的网站 联系表格 来自迪维？ 这里有 3 个定制想法……
该 形式 联系方式是许多网站的重要组成部分。 他们的主要目标是直观并帮助访问者轻松取得联系。
但这并不意味着所有 形式 联系人必须具有精确和预定义的外观。 您可以轻松地将直观的体验与精美的设计结合起来。 这正是我们在本教程中要做的。
我们将分享模块的3个独特设计 联系表格 de Divi 您可以仅使用 Divi 的内置选项创建。
走吧！
Divi Contact Form 模块设计概览
桌面版本
我们首先来看看桌面版的模块的不同设计 联系表格 我们将在本教程中设计。
移动版本
这是它们在较小屏幕尺寸上的样子：
立即下载DIVI！！！
如何自定义 Divi Contact Form 模块：3 个示例
另请参阅： Divi：如何将团队成员部分创建为轮播
创建联系表格#1
添加新部分
渐变背景
让我们从第一个例子开始！ 添加一个新部分，转到背景设置并添加渐变背景。
- 梯度停止
- 34%：#4c00ff
- 34%：#ffd400
- 类型：圆形
- 渐变方向：左下
间距
接下来，转到“设计”选项卡中的“间距”选项并按如下方式更改设置。
- 内边距（顶部和底部）：200px
添加新行
列的结构
使用以下列结构添加新行：
第 1 列：背景颜色
在不添加任何模块的情况下，打开行设置，然后是第 1 列设置并添加下面的背景颜色
- 背景：rgba(255,255,255,0.55)
第 1 列：背景图片
还要向第一列添加背景图像。
- 背景图像重复：不重复
- 背景图像混合：屏幕
第 2 列：背景图片
第二列的背景色为白色。
- 背景：#ffffff
浆纱
然后修改尺寸参数。
- 均衡列高：是
间距
同时删除所有默认的自定义填充。
- 内边距（顶部和底部）：0px
列边界半径
为高级选项卡中的两列添加边框半径。
border-radius: 10px;
将文本模块添加到第 1 列
添加内容
是时候开始添加不同的模块了！ 将文本模块添加到包含您选择的内容的第一列。
文字设定
接下来，转到文本模块的设计选项卡并进行一些更改。
- 文字：
- 字体：满足
- 文字颜色：#333333
- 尺寸：100 像素
- 线高：1 em
- 对齐方式：中心
间距
还添加自定义填充值。
- 填充（顶部）：600px
- 填充（底部）：100px
影盒
要增加设计的深度，请使用微妙的框阴影。
- 盒子阴影模糊强度：80px
- 盒子阴影传播强度：-16px
- 阴影颜色：rgba(0,0,0,0.3)
将图像模块添加到第 2 列
上传图片
继续将图像模块添加到第二列。 上传您选择的图像。
浆纱
更改此模块的大小设置。
- 宽度：25%（台式机）、50%（平板电脑）、60%（手机）
- 模块对齐：中心
间距
使用负上边距创建重叠。
- 保证金（顶部）：-60%
边框
修改图片的边框如下：
- 圆角：100px（所有角）
将文本 #1 模块添加到第 2 列
添加内容
在图像模块下方，添加一个包含内容的文本模块。
文字设定
编辑此模块的文本设置。
- 文字：
- 字体：满足
- 文字颜色：#333333
- 文字大小：44px
- 方向：中心
将文本 #2 模块添加到第 2 列
添加内容
然后添加另一个文本模块。
文字设定
同时更改此模块的文本设置。
- 文字：
- 字体：宋体
- 文字颜色：#ffd400
- 文字颜色：18px
- 字母间距：2px
- 方向：中心
间距
然后添加底边距。
- 边距（底部）：100px
将联系表单模块添加到第 2 列
激活名称和电子邮件字段中的“设为全角”选项
最后一个需要的模块是联系表单模块。 在执行任何其他操作之前，打开名称和电子邮件字段并更改布局。
- 制作全角：是
添加主题字段
为了创建这个设计，我们为主题添加了另一个字段。
垃圾邮件防护
然后禁用验证码选项。
- 使用基本验证码：否
表单域文本设置
对此联系表单模块的表单字段文本设置进行一些更改
- 领域：
- 背景颜色：rgba(255,255,255,0)
- 字体：宋体
- 字体粗细：轻
- 文字大小：16px
- 字母间距：2px
按钮设定
我们还更改了按钮的外观。
- 为按钮使用自定义大小：是
- 按键：
- 文字颜色：#ffd400
- 边框宽度：0 像素
- 字母间距：2px
- 字体：宋体
- 字体样式： U
- 下划线颜色：#4c00ff
间距
然后添加一些自定义填充值。
- 填充（底部）：100px
- 内边距（左右）：50px
接壤
并为每个字段添加一个微妙的底部边框。
- 输入底部边框宽度：2px
- 输入底部边框颜色：#efefef
各个字段的间距
最后，为除消息字段之外的每个单独字段添加底部边距。
- 边距（底部）：20px
创建联系表格#2
添加新部分
渐变背景
让我们继续下一个例子！ 添加具有渐变背景的新部分。
- 梯度停止：
- 50%：#562fef
- 50%：#ffffff
- 渐变类型：线性
间距
在本节的间距设置中添加自定义填充值。
- 内边距（顶部和底部）：200px
添加新行
列的结构
使用以下列结构添加新行：
背景颜色
在不添加任何模块的情况下，打开行设置并为行添加背景颜色。
- 背景颜色：#ffffff
2列渐变背景
向行中的第二列添加渐变背景。
- 梯度停止：
- 0%：#9932ff
- 100%：#562fef
- 类型：线性
- 转向：160度
浆纱
同时修改线尺寸参数。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡列高：是
间距
接下来，添加自定义间距值。
- 线 ：
- 内边距（顶部和底部）：0px
- 第 1 列：
- 填充：100px（顶部），50px（底部）
- 填充（左和右）：50px
- 第 2 列：
- 填充（顶部和底部）：100px
- 填充（左和右）：50px
接壤
将“20px”添加到每个线条边框。
影盒
最后，在线条上添加一个微妙的框阴影。
- 盒子阴影模糊强度：45px
- 框阴影传播强度：-11px
- 颜色：rgba(0,0,0,0.3)
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 从第一列中的文本模块开始。
文字设定
编辑此模块的文本设置。
- 文字：
- 字体粗细：超粗体
- 字体样式：TT
- 颜色：#562fef
- 尺寸：100px（台式机）、80px（平板电脑）、60px（手机）
- 字母间距：-10px
- 线高：1 em
间距
还要添加底部边距。
- 边距（底部）：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 列
添加内容
我们在第二列中需要的第一个模块是另一个文本模块。
文字设定
添加内容后，编辑此模块的文本设置。
- 文字：
- 字体粗细：超粗体
- 字体样式：TT
- 颜色：#ffffff
- 尺寸：23 像素
- 字母间距：-1px
将 Blurb 模块 #1 添加到第 2 列
添加内容
我们需要的第二个模块是 Blurb 模块。 继续并输入一些联系信息。
选择图标
然后选择相应的图标。
图标设置
更改此图标的设置。
- 图标颜色：#ffffff
- 图像/图标放置：右
标题文字设定
接下来继续对标题文本设置进行一些更改。
- 标题文字大小：15px
- 标题字母间距：-0,5 像素
间距
并添加上边距。
- 边距（顶部）：120px
克隆 Blurb 模块两次
完成第一个 Blurb 模块的编辑后，您可以继续克隆该模块两次。
修改两个副本的内容和图标
编辑两个副本的内容和图标，以与访问者共享不同类型的联系信息。
更改两个副本的间距
两个副本的上边距也应该改变。
- 边距（顶部）：30px
创建联系表格#3
添加新部分
背景颜色
让我们继续第三个例子！ 添加具有以下背景颜色的新部分：
- 背景颜色：#3491CE
间距
继续在间距设置中添加自定义填充值。
- 内边距（顶部和底部）：200px
添加第 1 行
列的结构
接下来，使用以下列结构添加一个新行：
添加文本模块
添加内容
是时候开始添加模块了！ 我们需要添加到第一列的第一个模块是文本模块。 输入选择的内容。
文字设定
接下来，更改文本设置。
- 文字：
- 字体粗细：超粗体
- 文字颜色：rgba(255,255,255,0.24)
- 文字大小：100px（桌面）、70px（平板）、36px（手机）
- 线高：1 em
- 方向：中心
间距
还要添加负底边距。
- 保证金（底部）：-100px
添加第 2 行
列的结构
我们需要完成此示例的第二行包含以下列结构：
渐变背景
在不添加任何模块的情况下，打开线条设置并添加渐变背景。
- 梯度停止：
- 50%：#11CE84
- 50%：#10C77F
- 渐变类型：线性
- 转向：160度
浆纱
同时更改尺寸参数。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡列高：是
间距
然后添加一些填充值。
- 填充：150px（顶部），100px（底部）
- 填充：50px（左右）
接壤
然后转到边框设置并为每个角添加“20px”。 也使用底部边框。
- 圆角：20px
- 底部边框宽度：10px
- 底部边框颜色：#1ba35a
影盒
通过添加细微的框阴影来完成线条设置。
- 盒子阴影模糊强度：80px
- 盒子阴影传播强度：-24px
- 阴影颜色：rgba(0,0,0,0.3)
将联系表单模块添加到第 1 列
激活名称和电子邮件字段中的“设为全角”选项
该行第一列中我们需要的第一个模块是联系表单模块。 打开姓名和电子邮件字段并更改布局设置。
- 制作全角：是
分子
然后禁用验证码。
- 使用基本验证码：否
按钮设定
并更改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字颜色：#ffffff
- 梯度停止：
- 50%：#3AA0E3
- 50%：#3491CE
- 渐变类型：线性
- 渐变方向：155度-
- 按钮边框宽度：0 像素
- 按钮边框半径：10px
- 盒子阴影传播强度：-2px
- 灯罩颜色：#0a60af
也可以看看： Divi：如何自定义“全角菜单”模块的篮子和搜索图标
接壤
我们还为每个字段添加了“5px”的圆角。
将文本模块添加到第 2 列
添加内容
在第二列中，我们需要的第一个模块是文本模块。 继续并输入一些内容。
背景颜色
然后改变背景颜色。
- 背景：rgba(255,255,255,0.13)
文字设定
还可以使用文本设置进行编辑。
- 文字：
- 字体重量：轻
- 文字颜色：#ffffff
- 文字大小：15px
- 字母间距：-0,5px
间距
并添加自定义填充，为模块提供呼吸空间。
- 内边距（顶部和底部）：12px
- 填充（左和右）：10px
接壤
我们还在左上角和左下角添加了“20px”。 最重要的是，我们将添加一个左边框。
- 圆角：20px（左上角和左下角）
- 左边框宽度：34px
- 左边框颜色：#edf000
能见度
为了让这个设计匹配不同的屏幕尺寸，我们将禁用手机和平板电脑上的文本模块。
克隆文本模块两次
完成第一个文本模块的编辑后，继续克隆该模块两次。
修改两个副本的内容
将两个副本的内容更改为其他内容。
更改两个副本的间距
并添加顶部边距以在每个模块之间留出空间。
- 边距（顶部）：20px
修改两个副本的边框
最后，分别更改每个副本左边框的颜色。
- 颜色 1：#00faff
- 颜色 2：#00f76f
另请参阅我们的文章 如何创建响应式手风琴滑块
概观
桌面版
现在我们已经完成了所有步骤，让我们最后看一下桌面上的 Divi Contact Form 模块设计。
联络号码
以下是 Divi 在较小屏幕尺寸上的联系表单模块设计的期望：
立即下载DIVI！！！
结论
在这篇文章中，我们分享了 3 个很棒的 Divi Contact Form 模块设计，您可以轻松地为您创建的任何网站使用和修改它们。
该 形式 联系人是许多网站的重要组成部分，因此确保您的设计能够说服访问者进行联系非常重要。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
