为 Contact 7 表单 Wordpress 添加边框和背景答案

【问题标题】：Add border and background to Contact 7 form Wordpress为 Contact 7 表单 Wordpress 添加边框和背景
【发布时间】：2023-03-15 13:55:02
【问题描述】：

我正在尝试向 Contact Form 7 添加边框和背景颜色。我使用“检查元素”来查看要定位的类/ID，但我还没有找到将整个表单作为一个整体来定位的类/ID。我尝试过的所有内容（例如 .wpcf7-form 和 .wpcf7）都只针对文本区域。有人可以帮忙吗？谢谢！

【问题讨论】：

谢谢，这真的很有帮助！我有一个后续问题：为什么我的表格看起来这么糟糕？ nycofficesuites.com/new/?page_id=164 我的代码：
选择位置
[选择您的位置“Plaza”“Greybar”Flatiron““Other”]

会议日期
[日期* MeetingDate]

姓名
[文本您的姓名]

电子邮件
[电子邮件您的电子邮件]

公司
[email* your-email]
[textarea Company]
电话
[email your-email]
p>[tel* tel-63]
Message
[textarea your-message]

[submit "Send Message"]
我知道为什么这不起作用。现在唯一的问题是日期。为什么没有下拉日历？
我知道为什么这不起作用。现在唯一的问题是日期。为什么没有下拉日历？页面nycofficesuites.com/new/?page_id=164和代码：Select Location [select your-location "Plaza" "Greybar" "Flatiron" "Other"] Meeting Date [date* date-926 step:30] Name * [text* your-name] Email * [email* your-email] Company [text your-company] Telephone * [tel* tel-63] Message [textarea your-message] [submit "Request Reservation"]

【解决方案1】：

您可以在 html 中用 div 包围表单：

<div class="custom-styling">
    // contact form 7 code here
</div>

然后使用 CSS 设置 custom-styling 类的样式。

【讨论】：

【解决方案2】：

联系表单的顶级元素有wpcf7 类。要设置整个联系表单的样式，请为类选择器添加样式规则，如下所示：

.wpcf7
{
    background-color: #f7f7f7;
    border: 2px solid #0f0;
}

欲了解更多详细信息，请在此处查看：http://contactform7.com/styling-contact-form/

希望对你有帮助。

【讨论】：