如何在 Wordpress 中使用带有自定义 HTML 和 CSS 的 Contact Form 7？

Question

我是 WordPress 社区的新手，如果由我来决定，我永远不会涉足它（我只是不涉足 CMS）。这只是我目前正在处理大约一周的情况，所以请假设我对此主题一无所知。

所以，我将 HTML 模板转换为 WordPress 主题，是时候关注联系表单了。它出现在（几乎）所有页面的底部（但不在页脚部分）。设计师使它的结构非常好，适合这个目的，由于我以前的经验，我正在考虑使用插件来完成这项工作，而不是尝试自己编写联系表格。但是，我做了一项研究，发现这是大多数人面临的一个普遍问题，即生成的表单的设计过于僵化而无法适当地设计样式。据我所知，设计方面最容易使用的插件是 Contact Form 7，因为它只生成表单的准系统。我还找到了解释该过程的this tutorial。但是，如果我按照其中提到的说明进行操作，我仍然会得到一个准系统的“无类”表单。请记住，我在 WordPress 后端使用 Contact Form 7 语法添加了类，必须在其中创建/编辑表单，但它们（类）不存在。我尝试将原始 HTML 放入插件的 wp 后端编辑器中，但得到了相同的结果。

您如何在 Contact Form 7 或您使用的任何其他 Contact Form 插件中实现自定义 HTML 和 CSS 设计，我对 Contact Form 7 不满意？

非常感谢您对联系表格 7 的任何帮助以及有关如何处理一般“WordPress 中的自定义设计联系表格”问题的任何其他想法！

Answer 1

您可以使用自定义 div 和类来设计联系表单 7。 这是示例代码：

<div class="row">
    <div class="col-md-6 form-group">[text* your-name class:form-control placeholder "Name"]</div>
    <div class="col-md-6 form-group">[email* your-email class:form-control placeholder "Email"]</div>
</div>

提示*：您必须使用联系表 7 生成的默认简码，并用您的自定义 div 覆盖它。

希望对你有帮助..