Contact Form 7：求助将邮箱字段设置为全屏宽度的方法

嘿，恭喜你搞定了Contact Form 7的列布局，这已经迈出了一大步！关于邮箱字段要和消息字段一样全屏宽度的问题，咱们来快速解决它：

从你给出的代码片段来看，你的字段是被包裹在主题的content-column one_half这类半宽布局容器里的——这就是邮箱字段没法全屏的原因。要让它占满宽度，只需要把邮箱字段所在的容器改成全宽类，或者直接移除半宽的布局类就行。

具体修改方案 #

假设你原来的邮箱字段是放在第二个半宽容器里，修改后的CF7代码可以这样写：

<!-- 姓名字段保持半宽布局 -->
<div class="content-column one_half">
  <div style="padding: 0;">
    <label> Contact Name* [text* your-name] </label>
  </div>
</div> 

<!-- 邮箱字段改成全宽，单独占一行 -->
<div class="content-column one_full">
  <div style="padding: 0;">
    <label> Email Address* [email* your-email] </label>
  </div>
</div>

<!-- 消息字段保持全宽（和你原来的设置一致） -->
<div class="content-column one_full">
  <div style="padding: 0;">
    <label> Message* [textarea* your-message] </label>
  </div>
</div>

补充说明 #

1. 如果你的主题没有one_full这个全宽类，也可以直接去掉content-column相关的布局类，用普通div包裹邮箱字段：

<div>
  <div style="padding: 0;">
    <label> Email Address* [email* your-email] </label>
  </div>
</div>

2. 如果修改后还是有宽度限制，可以添加一点自定义CSS来强制全屏：

.wpcf7-form input[type="email"] {
  width: 100% !important;
  box-sizing: border-box;
}

这段CSS会让所有邮箱输入框占满父容器的宽度，box-sizing: border-box是为了避免输入框因为内边距或边框超出容器范围。

内容的提问来源于stack exchange，提问作者Emigriff