CSS Wordpress 联系表格定制答案

【问题标题】：CSS Wordpress Contact Form CustomisationCSS Wordpress 联系表格定制
【发布时间】：2020-12-24 16:53:20
【问题描述】：

我有一个使用 Contact Form 7 的联系表单，它只有两个字段，一个电子邮件地址输入字段和一个提交按钮。它将被插入我网站上的多个位置，每个位置的宽度都不同。

我希望电子邮件地址和提交按钮位于同一行，两者之间有一个边距。但是我希望它们的大小能够填充 100% 的可用空间。

我的表单短代码是

[contact-form-7 id="5345" title="Quick Signup"]

表格的代码是

<div class="elementor-row">
[email* your-email][submit "Submit"] 
</div>

我有以下CSS

 .wpcf7 input[type="email"]
 {
     width: 75%!important;
     margin-right:10px;
 }
 .wpcf7 input[type="submit"]
 {
     width: 25%!important;
 }

但这会影响我所有的contact-form-7表单，而不仅仅是上面提到的那个，我如何使用这种样式只针对上面指定的表单？

非常感谢您的帮助

【问题讨论】：

他们有这个contactform7.com/styling-contact-form 的文档，通读一遍，试一试，如果您无法实现，请使用您尝试过的 CSS 和您的预期结果发布另一个问题。跨度>
谢谢@JHeth 这绝对有用:) 我已经修改了我的问题
太好了，最后一部分将帮助人们找出您的问题，发布浏览器从 elementor-row 类中获取的样式，如果您什么都没修改，我假设它是 width: 100%; display: flex。
是的，如你所料:)

标签： css wordpress contact-form-7

【解决方案1】：

将 div 标签添加到您的两个元素，然后通过 WordPress 自定义面板将 CSS 应用到这些 div 是前进的方向。

将不同div标签中的元素分开放在contact form 7插件的form部分

然后在WordPress的自定义面板中添加CSS代码

    .elementor-row {
        float:left;
        width:50%; /* using percentages is good practice */
    }

    .submit-button {
        float:right;
        width: 49%;  /* add percentage according to your margin requirement */
    }

   <div class="elementor-row">
    [email* your-email]
    </div>

    <div class="submit-button">
    [submit "Submit"] 
    </div>

【讨论】：

【解决方案2】：

在您的 CSS 中使用 id 而不是通用的 cf7 类。您说它是“5345”，但它可能是您应该使用代码中的浏览器工具检查的其他内容。在以下代码中，我使用“5345”作为 ID，但如果不同，请将其调整为您的真实 ID：

#5345 input[type="email"]
 {
     width: 75%!important;
     margin-right:10px;
 }
#5345 input[type="submit"]
 {
     width: 25%!important;
 }

【讨论】：