css - 联系表格 7 - 输入一个字段全宽
问题描述
我非常兴奋,我学会了如何成功创建带有列的 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 但没有用。对此还有其他建议吗?
解决方案
尝试类似的东西
[text* your-name class:your-class]
推荐阅读
- c# - 询问用户在 C# 控制台上导出文件的路径
- python - 轴的绝对定位
- rxjs - 如何使用 RxJS 创建队列
- javascript - 在 Highcharts 漏斗可视化的左侧或右侧添加标签
- sql-server - 将图像字段数据从 SQL Server 复制到 Azure Blob 存储作为 blob 块
- php - php MySQL查询两个日期时间之间的时间,但如果在范围内完成,则包括范围外的分钟数
- javascript - 使用 map() 和 filter() 从嵌套数组映射的新数组中删除未定义的元素
- wpf - WPF - 另一个程序集中的样式中的图像源
- c++ - 我有一个返回字符串向量的函数。它需要两个字符串,并返回一个字符串中缺少的字符串
- c# - 使用 GetUserASync(用户)的单元测试控制器