如何自定义表单联系表7

联系表格7是一个插件 WordPress 在创建联系表单时非常受欢迎。它使您无需HTML编码即可创建表单。这些形式可以提供诸如 CAPTCHA，下载文件， 调查领域 等等......

尽管默认的联系表单7样式对于大多数基本的联系表单已足够，但是您经常必须对其进行更改。

这将更改默认表单结构以使其更易于访问。他还添加了 SHORTCODE [响应]在表格上方，以便在提交表格时出现错误时在表格上显示。

如果您从未创建过WordPress网站，请查找 如何使用FTP客户端安装WordPress博客

对于标准格式，插件生成的代码为：

[响应]您的姓名（必填） [文本*您的姓名ID：您的名字]您的电子邮件（必填） [电子邮件*您的电子邮件ID：您的电子邮件]您的主题[文字您的主题ID：您的主题]您的消息[textarea您的消息ID：您的消息] [提交“发送”]

有些插件自定义表单联系表7

1。联系表格7样式

插件 联系表格7样式 有多种样式可供选择。

对于“二十一十五”主题的用户，还有一种兼容的样式。

要应用样式，请转到“ 联系人样式>快速编辑 选中您要应用样式的表单，然后点击“ 更新 “。

2。联系表格7皮肤

使用皮肤 联系表7，创建一个新的联系表然后向下滚动页面到“皮肤”部分。您可以为表单选择模板和样式。

您会发现专用于以下形式的模型événements，注册和通知。

这就是使用二十十五岁主题的黄玉风格的调查表的外观。

3。联系表格的材料设计

这些样式是基于风格 材料设计.

该插件建议您删除默认表单并使用其短代码。

这是Hestia主题的示例。当指针移动到窗体上的字段时，请注意浮动标签。

联系表格 7 测试一些 WordPress主题

带有ColorMag WordPress主题的联系表

大多数情况下，联系表格7将继承WordPress主题的样式。主题就是这种情况 珊瑚黑暗.

带有WordPress ColorMag主题的联系表

这是没有自定义样式的表单。他继承了蓝色按钮的颜色 ColorMag WordPress主题.

首先，我上传一张照片用作表单的背景图像，然后将表单标签的代码从灰色更改为白色，并在文本上添加蓝色阴影。

以下更改是为了增加表单标签和表单域之间的边距，修改减号按钮并在指针进入表单域时添加边框。

提交表单时，错误/成功消息的显示也应更改，以便正确显示。

提交表单时旋转的GIF没有正确显示，我找到了Loading.io的替代方法，并用CSS引用了它。

这是结果形式：

这是代码：

div.wpcf7 {margin：0; 填充：1.5em; background：url（'your_background_image_url_here'）; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; } .wpcf7 label，.wpcf7-submit {color：white; 文字阴影：1px 1px 0px RGBA（40，157，204，1）; } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit：hover {background：#186d8e; } .wpcf7-form-control：focus {border：2px solid #289dcc; div.wpcf7-response-output {background：#F8F8F8; text-align：center; 宽度：92.5％; margin：1em 0em 1em 0em; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; } span.wpcf7-not-valid-tip {background：#F8F8F8; display：inline-block; 宽度：自动; 填充：1％; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; div.wpcf7 .ajax-loader {background-image：url（'your_loading_image_url_here'）; 宽度：50px; 身高：50px; }

如果您不需要随意编写代码，建议您查看我们的代码 10 WordPress插件可在您的博客上创建联系表

还发现3高级替代品，这些替代品将帮助您创建联系表。

1。 W8联系表格

W8 Contact Form是的插件之一联系表 WordPress 上最受欢迎的。它提供了许多功能，例如提交给多个收件人、支持动画、无限的表单创建、不同的样式以及各种其他自定义选项。

此外，它为您的网站或博客提供了一个专业的系统，使您与客户的联系变得更加容易。您将能够根据自己的需求和喜好自定义所有表格。

下载 | 演示 | 虚拟主机

2。联系我们表格

“联系我们表单”是一个响应迅速的WordPress插件，是一个简单的工具，但具有丰富的自定义选项，可让您显示清晰，令人鼓舞的表单，访问者可以通过在表单上留下信息来与您联系。

您将能够定义必要的字段，选择最佳的字段布局并完全自定义字段，以鼓励您的客户或访客留下他们的建议或消息。

只需在您想接收消息的位置设置电子邮件地址，并使用它来朝着最有利可图的方向发展您的业务。

下载 | 演示 | 虚拟主机

3。 Slick Popup Pro

Slick Popup Pro 是一个 WordPress扩展非常简单和轻量级，可以转换插件创建的任何形式 联系表7 在弹出窗口中。她使用表单并将其转换为美观且完美响应的弹出窗口。

弹出表单可以有多种用途，包括：信息收集表单，联系表，注册表，报价单，建议/投诉表等。

下载 | 演示 | 虚拟主机

结论

瞧！这就是本教程的全部内容，希望您有更多的想法来定制您的联系表。不要犹豫 与您最喜欢的社交网络上的朋友分享.

但是，您也可以咨询我们的 RESSOURCES，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建。

但是，与此同时，请告诉我们您的评论和专用部分中的建议。

...

如何自定义表单联系表7