联系表格7 - 输入一个字段全宽

Question

我很兴奋我学会了如何成功创建包含列的CF7表单。 http://venturekitchen.co/它接近于查找我想要的内容，但无法破解最后一件事 - 我希望电子邮件字段的宽度与消息字段一样。

这是我的联系表格7代码：

<div class="content-column one_half"><div style="padding:"0;"><label> Contact Name*
    [text* your-name] </label></div></div>

<div class="content-column one_half last_column" style="padding-bottom: 25px;"><label> Job Title*
    [text* job-title] </label></div><div class="clear_column"></div>

<div class="full_width"><div style="padding:0;padding-bottom:25px;"><label> Contact Email*
    [email* your-email] </label></div><div class="clear_column"></div>

<div class="content-column one_half"><div style="padding:"0;"><label> Company Name*
    [text* company-name] </label></div></div>

<div class="content-column one_half last_column" style="padding-bottom: 25px;"><label> Company Website*
    [url* CompanyWebsite] </label></div><div class="clear_column"></div>

<div class="three">
<div class="content-column one_third"><div style="padding:"0;"><label> Opportunity Type*
[select* OpportunityType "Fast Casual" "QSR" "Casual " "Food CPG"] </label></div></div>

<div class="content-column one_third"><div style="padding:"0;"><label> Revenue in Last 12 Months*
[select* Revenue "Pre-revenue" "0 — 250k" "250k — 1M" "1M — 3M" "3M — 5M" "5M — 10M" "10M+" "Not disclosed"] </label></div></div>

<div class="content-column one_third last_column" style="padding-bottom: 25px;"><label> Zip Code*
    [text* zip-code] </label></div><div class="clear_column"></div>
</div>

<div class="full_width"><div style="padding:"0;"><label> Description
<span style="font-size: 18px;">Business description and reason for reaching out to Venture Kitchen in 250 words or less.</span>
    [textarea description] </label></div><div class="clear_column"></div>

[submit "SUBMIT"]

具体来说，我关注的代码是电子邮件字段：

<div class="full_width"><div style="padding:0;padding-bottom:25px;"><label> Contact Email*
    [email* your-email] </label></div><div class="clear_column"></div>

这是我与CF7有关的CSS：

.wpcf7-form {
    max-width: 800px;
    margin: 0 auto !important;
    font-family:'Bebas Neue';
    line-height: 1.1;
    font-size:22px;
    color:black;
}

.wpcf7-form-control.wpcf7-submit {
    background-color: black;
    border:none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
    border-top-left-radius:0px;
    margin:0 auto !important;
    font-family: 'Bebas Neue';
    font-size:22px;
    letter-spacing:2px;
    padding-top:15px;
}

textarea {
    width:810px;
}
.three {
    max-width:600px;
}

我考虑为输入字段添加一个自定义类JUST，但无法确定放置它的位置，尝试将自定义类放在电子邮件部分的整个div周围，然后制作宽度：810px但不起作用。还有其他建议吗？

Answer 1

尝试像那样

 [text* your-name class:your-class]

Answer 2

尝试将此位置放在联系表单代码中的结束电子邮件输入字段标记之前：

style="width:810px"

示例：

<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" style="width: 810px;">

我在Chrome中使用控制台添加此内容时得到此信息：

Answer 3

以下是我们在子主题中使用的内容，使所有字段都是容器的全宽。

span.wpcf7-form-control-wrap .wpcf7-date, span.wpcf7-form-control-wrap .wpcf7-quiz, span.wpcf7-form-control-wrap .wpcf7-number, span.wpcf7-form-control-wrap .wpcf7-select, span.wpcf7-form-control-wrap .wpcf7-text, span.wpcf7-form-control-wrap .wpcf7-textarea {
    width: 100%;
}

span.wpcf7-form-control-wrap {
    width: 100%;
}