CSS Wordpress联系人表单自定义

问题描述

我有一个使用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表单，而不仅是上述表单，我该如何使用上述样式仅定位上面指定的表单？

非常感谢您的帮助

解决方法

将div标签添加到两个元素中，然后通过WordPress自定义面板将CSS应用于这些div是

。

将不同div标签中的元素分开，并将其放在联系表单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>

在CSS中使用id代替常规的cf7类。您说它是“ 5345”，但是可能还需要检查代码中的浏览器工具。在以下代码中，我使用“ 5345”作为ID，但如果不同，则将其调整为您的真实ID：

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

contact-form-7 wordpress