需要结合内联字段和模块全角字段 联系表格 de Divi ?
Le 联系表 如果您想捕获电子邮件并将访问者转化为客户，则这是一个重要的元素，需要包含在您的网站上。
模块 联系表格 de Divi 可以轻松定制创建 形式 适用于所有类型网站的精美名片。 该模块带有两个可应用于每个表单域的显示选项： 恩利涅 ou 全宽.
在本教程中，我们将为您展示四种独特的布局可能性 联系表 Divi 使用内联和全角字段。
让我们开始吧！
概观
这是我们将要设计的预览。
第一个布局
二次布局
第三种布局
第四种布局
你需要什么才能开始
在开始之前， 安装并激活Divi主题 并确保您的网站上有最新版本的 Divi。
现在您可以开始了！
使用内联和全角字段的 Divi 联系表单模块的 4 个示例布局
选择预定义布局
4 个模板中的每一个都是从 Shoe Repair Contact Page 布局修改而来的 修鞋布局包，您可以在 Divi 库中找到它。
将新页面添加到您的网站并为其命名，然后选择选项 使用 Divi Builder.
在本示例中，我们将使用 Divi 库中的预制布局，因此选择 浏览布局.
查找并选择 Shoe Repair Contact Page 布局。
选择 使用此布局 将布局添加到您的页面。
我们现在准备设计我们的示例。
第一个布局
首先，移动包含模块的行 联系表格 到上面的部分，就在 Blurb 模块的下面。 然后您可以删除剩余的空白部分。
打开行设置并添加左右填充，
- 填充（左右）：15%
选择响应选项并为移动设备设置填充。
- 填充（左右）：5%
更改了带有内联和全角字段的联系表单布局
对于此布局，我们将为名字和姓氏创建两个单独的字段。
打开 Contact Form 模块设置，将 Last name 字段的 ID 和 Title 字段更改为 First name。
在 First Name 字段下方添加一个新字段。 将 ID 和标题字段设置为名称。
在名称字段设置中，打开布局设置并将 Make Fullwidth 设置为 No。
- 制作全角：否
然后，在设置下 联系表，更改主题和电话的顺序，以便电话列在主题之前。
打开主题字段布局设置并将字段设置为全宽。
- 制作全角：是
联系方式设计定制
现在让我们更改一些设置来完成设计。 导航到“联系表单”模块设置的“设计”选项卡。
首先，更改按钮的背景颜色。
- 按钮背景：#DBC2B3
为按钮添加上边距。
- 按钮边距（顶部）：10px
最后，转到边框设置并为字段添加圆角。
- 输入圆角：30px
也可以看看： Divi：如何将响应式徽标添加到“全角菜单”模块
示例 1 的最终结果
这是桌面和移动设备上的最终结果。
第二个例子
对于我们的第二个示例，我们会将 Blurb 模块移动到页面的左侧，并将联系表单放在页面的右侧。 将 Blurb 模块移至一列。
更改行布局。
打开线路设计设置并关闭 使用自定义装订线宽度.
- 使用自定义装订线宽度：否
将代码添加到主元素的自定义 CSS 以垂直对齐 Blurb 和 Contact Form 模块。
align-items:center;
现在我们需要删除列之间的细边框。 打开行设置，然后打开列设置 1. 在设计选项卡下，转到边框设置并删除边框。
- 右边框宽度：0px
接下来，打开第 2 列设置并重复删除边框的步骤。
- 右边框宽度：0px
将“联系我们”文本设置为居中。
将联系表移至右栏。 删除剩余的空白部分。
更改了带有内联和全角字段的联系表单布局
此布局还将有两个单独的字段用于名字和姓氏。 打开 Contact Form 模块设置，将 Last name 字段的 ID 和 Title 字段更改为 First name。
在 First Name 字段下方添加一个新字段。 将 ID 和标题字段设置为名称。
在名称字段设置中，打开布局设置并将 Make Fullwidth 设置为 No。
- 制作全角：否
更改电话和主题字段的顺序，使电话位于主题之前。
打开电子邮件、电话和主题的字段设置，并将布局设置为全宽。
- 制作全角：是
联系方式设计定制
打开行设置，然后打开列设置 2. 设置背景颜色。
- 背景：#DBC2B3
在第 2 列设置中，转到“设计”选项卡并添加填充。
- 填充（顶部、底部、左侧和右侧：50px
选择移动图标以更改响应设置。 为手机设置填充。
- 内边距（上、下、左、右）：30px
然后在列中添加一个框阴影。
最后，打开 Contact Form 模块设置并更改字段文本颜色。
- 字段文本颜色：#000000
示例 2 的最终结果
这是第二个布局的最终结果。
第三个例子
对于第三种布局，我们将在左侧放置联系表，在右侧放置 Blurb 模块。 让我们从更改包含 Blurb 模块的行的列结构开始。
将地址模块移至右栏。
接下来，将“Contact US”文本模块移动到左侧栏，然后删除剩余的空行。
将联系表单模块移动到左栏，在“联系我们”文本模块下。 删除剩余的空白部分。
打开线设置，在设计选项卡下并关闭 使用自定义装订线宽度
- 使用自定义装订线宽度：否
将代码添加到主元素的自定义 CSS 以垂直对齐 Blurb 和 Contact Form 模块。
align-items:center;
打开行设置，然后打开列设置 1. 在设计选项卡下，转到边框设置并删除边框。 重复这些步骤以删除第 2 列的边框。
- 右边框宽度：0px
更改联系表格的布局
我们将保留第三个设计中的字段宽度，但是，打开联系表单设置并更改电话号码和主题字段的顺序，以便电话排在第一位。
示例 3 的最终结果
这是第三种布局的最终结果。
第四个例子
对于第四个也是最后一个布局，联系表单模块将位于左侧，而 Blurb 模块将位于右侧。 同样，我们将从更改包含 Blurb 模块的行的列结构开始。
将地址模块移至右栏。
接下来，将 Contact Form 模块移至左列。 删除剩余的空白部分。
在“设计”选项卡中打开线路设置并禁用 使用自定义装订线宽度.
- 使用自定义装订线宽度：否
将代码添加到主元素的自定义 CSS 以垂直对齐 Blurb 和 Contact Form 模块。
align-items:center;
打开行设置，然后打开列设置 1. 在设计选项卡下，转到边框设置并删除边框。
- 右边框宽度：0px
接下来，打开第 2 列设置并重复删除边框的步骤。
- 右边框宽度：0px
打开“联系我们”文本的文本模块设置并将文本居中。
- 文本对齐方式：居中
更改了带有内联和全角字段的联系表单布局
对于这个设计，我们所有的字段都是全角的。 打开联系表单模块设置，然后打开每个字段的设置。 在“设计”选项卡上，选择 布局 并定义 制作全角 河畔 可以.
创建每个全角字段后，表单应如下所示。
现在将 Last Name 字段的 ID 和 Title 字段更改为 First Name。
在 First Name 字段下方添加一个新字段。 将 ID 和标题字段设置为名称。
更改电话和主题字段的顺序，使电话位于主题之前。
自定义联系表单模块设计
在模块设置中，在“设计”选项卡中，将字段文本颜色设置为黑色。
- 字段文本颜色：#000000
打开部分设置并添加背景颜色。
- 背景：#DBC2B3
最后，添加一个背景遮罩。
- 背景蒙版：拱门
- 蒙版变换：水平
为了使背景蒙版在移动设备上更好地工作，让我们使用响应式设置。
- Mask Transform (Phone)：水平和旋转
最终结果
这是第四种布局的最终结果。
最终结果
让我们再看一遍我们所有的例子。
第一个例子
第二个例子
第三个例子
第四个例子
立即下载DIVI！！！
结论
拥有一个有吸引力的联系表可以增加您的转化率，并让您的访问者直接与您联系。
正如我们在本文中演示的那样，您可以使用内联和全角字段选项为您的表单创建不同的外观和布局，而 Divi 的内置设计选项允许您创建独特且有吸引力的设计以帮助表单脱颖而出。
希望这项技术能为未来的项目增加另一种有用的设计技能。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
