我非常兴奋,我学会了如何成功创建一个包含列的 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 周围,然后设置宽度:810px,但没有用。对此还有其他建议吗?
最佳答案
试试这样的东西
[text* your-name class:your-class]
关于css - Contact Form 7 - 全 Angular 输入一个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50051097/