联系表格 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;
}

我考虑为输入字段添加一个自定义类，但不知道该放在哪里，尝试将自定义类放在电子邮件部分的整个 div 周围，然后设置 width: 810px 但没有用。对此还有其他建议吗？

Answer 1

试试类似的东西

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

Answer 2

这是我们在子主题中使用的，以使所有字段都占满容器的宽度。

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%;
}

Answer 3

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

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 中使用控制台添加它时，我得到了这个：