代码零基础2——contact form 7 表单设置同行，缩小表单长度
============================**11月23日重大更新**==============================
很久之前写的设置contact form 7 表单样式，后来发现太繁琐了，今天发布另一个简洁的方法。如下：
**放置与Contact下Form内**
{{{
<div class="fusion-one-third fusion-layout-column fusion-spacing-yes">[text* your-name placeholder "Name*"]</div>
<div class="fusion-one-third fusion-layout-column fusion-spacing-yes">[text your-company name placeholder "Company Name"] </div>
<div class="fusion-one-third fusion-layout-column fusion-spacing-yes">[text* your-phone placeholder "Phone"]</div>
<div class="fusion-one-third fusion-layout-column fusion-spacing-yes">[email* your-email placeholder "Email*"] </div>
<div class="fusion-two-third fusion-layout-column fusion-spacing-yes">[text your-subject placeholder "Subject"] </div>
<div class="fusion-two-third fusion-layout-column fusion-spacing-yes">[textarea your-message placeholder "Message"] </div>
<div class="fusion-one-third fusion-layout-column fusion-spacing-yes">[submit "Send"]</div>
}}}
刷新页面之后是这样样式：
[attach]12491[/attach]
到是不好看对不对！！！那就加一段css放到custom css下：
{{{
.wpcf7-captchar, .wpcf7-form .wpcf7-date, .wpcf7-form .wpcf7-number, .wpcf7-form .wpcf7-quiz, .wpcf7-form .wpcf7-select, .wpcf7-form .wpcf7-text, .wpcf7-form textarea, input.s, input[type="text"], select, textarea{background:#DDDFE2!important;border-radius:5px;color:#333;}
}}}
当当当当，刷新之后变变变：
[attach]12492[/attach]
如果对于长短不是很满意，那么请注意这段代码中修改：
{{{
<div class="**fusion-one-third** fusion-layout-column fusion-spacing-yes">[text* your-name placeholder "Name*"]</div>
}}}
上段代码加粗就是avada的1/1,1/2,1/3 Column的控制class，所以，fusion-one-third就表示放在1/3里，可以调成two-third就表示2/3，以此类推，1/1是one-full。
如果对你有帮助，欢迎点赞，分享给有需要的人。
**注意：如果想要company name显示在邮件里，要在mail里添加一段[your-company]**
============================**原帖（建议放弃观看）**==============================
cf7表单有时候嫌很长，用户体验糟糕，可以将名字和邮件弄在同一行，如下图效果
[attach]8347[/attach]
首先表单代码
{{{
<div id="two-column">
<div id="left">
<p>First Name
[text* first-name]</p>
<p>Email
[email* your-email] </p>
</div>
<div id="right">
<p>Last Name
[text* last-name] </p>
<p>Phone
[text* your-phone] </p>
</div>
<p>Subject
[text* your-subject] </p>
<p>Your message
[textarea your-message]</p>
<p>[submit "Send"]</p>
</div>
}}}
其次Css样式，惯例是要添加到theme options ->custom css
{{{
#two-column{
width: 100%;
}
#two-column #left{
width: 45%;
float: left;
}
#two-column #right{
width: 45%;
float: right;
}
}}}
如果想弄成如下图样式
[attach]8348[/attach]
请移步以下代码到custom css
{{{
#two-column{
width: 550px;
}
#two-column #left{
width: 300px;
float: left;
}
#two-column #right{
width: 250px;
float: right;
}
#two-column p{
margin-bottom: 12px;
}
#two-column input[type="text"]{
border:none;
border:1px solid #000;
font-size :14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 540px;
padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
width:240px;
}
#two-column textarea {
position: relative;
padding: 5px;
border:1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 540px;
}
#two-column input[type="submit"]{
padding:8px 18px;
background:#222;
color:#fff;
border: 1px solid #fff;
float:right;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
background: #eee;
}
#two-column input[type="submit"]:hover{
background:#fff;
color:#222;
border: 1px solid #222;
}
}}}
添加表情
