即时设计预设和布局
为什么可以从风格开始时从头开始?从多种设计变体(风格一到十一)中进行选择。每个预设都将完整、协调的外观应用于整个形式 id 容器、字段和按钮 id 立即为您提供专业风格的形式。无论您需要轻微的极简形式、深色卡片还是带有充满活力的口音的卡片,都有一个完美的起点。这是使 Contact Form 7 表格看起来像诞生于 Elementor 页面中的最快方法。
- 11+ 现成款式:立即应用风格一、风格五或风格十一等完整设计。
- 基于预设的设计系统:每个预设将容器、输入和按钮设计在一起,以实现即时和谐。
- 可定制基础:使用任何预设作为起始画布,然后根据您的确切品牌颜色调整每个细节。
完整形式的容器框架
使表单成为页面中具有凝聚力的部分 设计容纳所有内容的表单容器 设置背景类型(颜色或渐变),控制表单宽度,并调整表单填充以创建完美的内部呼吸空间 添加独特的 Border Top Color 或全边框进行定义 此控件可让您创建从微妙的集成表单到大胆的卡片式面板(作为清晰的号召性用语)的任何内容。
- 专业容器:添加背景、控制宽度和设置填充以完美地框架形式。
- Custom Dimensions:设置特定的表单宽度或让它响应性地填充其容器, 确保表单完美地位于您部分的布局中。
- 视觉分离:使用边框和背景颜色在视觉上将表单与其他内容分开。
输入、文本区域和标签造型
Style 用户交互的核心组件 对于输入&Textarea字段,设置背景颜色、文本颜色、内部填充和字段宽度 设计边框(类型、宽度、颜色),并应用边框半径进行柔和的现代边缘。然后,分别对标签进行样式设计,控制其颜色和字体排版,以创建清晰的视觉层次结构。这可以确保您的表单不仅美观而且直观且易于填写。
- 字段设计控制:对所有输入字段的背景、文本、边框和圆角进行样式设计。
- 独立标签造型:给表单标签(姓名、电子邮件等)自己的颜色和字体设置。
- 关注可用性:清晰的标签造型和精心设计的字段自然地引导用户通过表格。
提交按钮和错误消息样式
设计完成操作的按钮 设置"提交"按钮,其中包含"正常"和"悬停"状态 设置背景类型、文本颜色、边框颜色、边框半径和填充 控制其排版使其脱颖而出 然后,通过对错误进行造型来确保即使是错误也能很好地显示错误 使用自己的文本颜色、背景颜色和边框样式自定义错误消息和验证错误。
- 交互式按钮状态:设计独特的外观可查找按钮的默认状态和悬停状态。
- 按钮抛光:使用边框半径和填充来创建形状完美、可点击的按钮。
- 专业错误处理:风格错误消息要有帮助且清晰,而不是刺耳。
- 端到端设计:从打字到提交到纠错的每个交互式元素都经过精心设计。
联系表 7 的常见问题
如何将其连接到现有的联系表 7 表格?
Content 选项卡中, 使用选择联系表单下拉, 它会列出您在联系表单 7 插件仪表板中创建的所有表单, 只需选择您要显示和设计的元素即可自动拉入您的实时表单字段。
我的表格仍然会发送电子邮件并按照联系表 7 中的配置进行工作吗?
是的,绝对。该元素仅控制 Elementor 内的前端视觉设计。所有核心 Contact Form 7 功能(电子邮件路由、条件逻辑、垃圾邮件过滤和数据库条目)均保持 100% 完整,并且与您在 Contact Form 7 插件设置中设置的完全相同。
我可以在我的网站上对不同的形式使用不同的样式吗?
当然。主插件联系表 7 元素的每个实例都是独立样式的,您可以在页脚中拥有一张轻型联系表(使用样式二),并在侧边栏中拥有一张大胆、色彩缤纷的时事通讯注册(使用样式八),且不会发生冲突。
设计的表单在移动设备上是否完全响应?
是表单容器、字段、按钮、标签都是完全响应式的,它们会在平板电脑和移动设备上适当堆叠和缩放,你可以使用Elementor的响应式编辑模式进行高级调整,比如专门针对移动调整字段填充或字体大小。
如果我在联系表 7 插件中添加新字段会发生什么?
Your changes 会同步,您可能需要刷新 Elementor 编辑器页面,才能看到小部件预览中出现新字段,一旦可见,您现有的样式设置通常会自动应用于新字段,从而保持设计的一致性。
我需要了解 CSS 才能对我的表单进行风格设计吗?
Not at all。that’s整个目的这个元素,每一个造型控件 it 颜色,排版,边框,填充 it 通过Elementor熟悉的视觉界面,你完全通过点击实现自定义,专业的表单设计,需要零代码。
