首页 文章

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

提问于
浏览 次
-1

我很兴奋，我学会了如何成功创建一个包含列的CF7表单 . http://venturekitchen.co/它's close to looking exactly how I want but can' t破解这最后一件事 - 我希望电子邮件字段是全宽度的，如消息字段 .

这是我的联系表格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但不起作用 . 还有其他建议吗？

css wordpress forms contact-form-7

3 回答

  • 0

    尝试这样的somenthing

    [text* your-name class:your-class]
    回复于
  • 1

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

    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%;
}
    回复于
  • 0

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

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

    回复于

相关问题