如何在Wordpress中将Contact Form 7与自定义HTML和CSS一起使用？

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覆盖它。

希望对您有所帮助。