【问题标题】:Unable to style Contact Form 7 for Wordpress无法为 Wordpress 设置联系表格 7 的样式
【发布时间】:2021-07-24 12:50:58
【问题描述】:

相关网站:https://loopcycle.io/contact-us/

我找到了应该改变表单外观的代码,但它什么也没做,我很困惑,看起来模板中的某些东西或 wordpress 本身阻止了这些?

我添加的使输入框变白的代码:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

为了使提交按钮居中:

input.wpcf7-form-control.wpcf7-submit {
   display: block;
   margin: 0 auto;
}

表格的代码是:

<div class="form-group" style="padding-bottom: 30px;">[radio contact-reason use_label_element default:1 "Curious about Loopcycle" "Demo for manufacturers" "Demo for end users" "Collaboration" "Careers & Internships" "Speaker request" "Press" "Other"]</div>
<div class="form-group">[text* your-name placeholder "Your Name (required)"]</div>
<div class="form-group">[email* your-email placeholder "Your Email (required)"]</div>
<div class="form-group">[text your-company placeholder "Your Company"]</div>
<div class="form-group">[text* your-subject placeholder "Subject (required)"]</div>
<div class="form-group">[textarea your-message placeholder "Your message"]</div>
<div class="submit-group">[submit class:eut-extra-round "Send your message"]</div> 

我觉得我点击了所有可能的选项卡和面板,试图找出覆盖我的编辑的内容,但找不到任何东西。

【问题讨论】:

  • 您的主题有一个包装类来为所有 cf7 css #eut-theme-wrapper 添加前缀,因此在您的 css 前添加 body #eut-theme-wrapper,您将覆盖它。
  • 非常感谢霍华德,它有效,我现在正在使用它:)

标签: wordpress styling contact-form-7


【解决方案1】:

试试这个 CSS。会成功的

input.wpcf7-form-control.wpcf7-submit {
    display: block !important;
    margin: 0 auto !important;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    background-color: #fff !important;
    color: #000 !important;
    width: 50% !important;
    margin: 10px auto !important;
}
span.wpcf7-form-control.wpcf7-radio > span {
    width: 50% !important;
    margin: 0 auto !important;
}

【讨论】:

  • 谢谢,它有效,但另一个用户指出,该主题使用了我错过的包装器 #eut-theme-wrapper - 所以在我的代码中添加 body #eut-theme-wrapper 会覆盖它。无论如何,两种解决方案都有效,谢谢你们:)
猜你喜欢
  • 2012-11-01
  • 1970-01-01
  • 2020-05-30
  • 1970-01-01
  • 1970-01-01
  • 2017-01-16
  • 2012-02-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多