CSS Wordpress 联系表单自定义

Question

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

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

我的表单短代码是

[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 表单，而不仅仅是上面提到的那个，我如何使用这种样式只针对上面指定的表单？

非常感谢您的帮助

Answer 1

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

将不同 div 标签中的元素分开，并将它们放入 contact form 7 插件的表单部分

然后在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>

Answer 2

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

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

CSS Wordpress 联系表单自定义

CSS Wordpress Contact Form Customisation

css

wordpress

contact-form-7