时间戳

首页 > 解决方案 > CSS Wordpress 联系表格定制

css - CSS Wordpress 联系表格定制

问题描述

我有一个使用联系表格 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表格，而不仅仅是上述表格，我如何使用这种样式仅针对上面的指定表格？

非常感谢您的帮助

标签： csswordpresscontact-form-7

解决方案

将 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>

推荐阅读