写文章
KeenTalk
2015-09-06 23:59
代码零基础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;
}
}}}
举报
收藏
转发
0/500
添加表情
评论
评论 (41)
最近
最早

KeenTalk

成长最快的方式就是公开学习,学一点,分享一点,坚持输出,最终乱拳打死老师傅😄。 我是keen则木,目前深入研究SEO,致力于打造赚钱的网站,定期分享自己的学习心得,希望能帮到5000个人。

向TA提问

举报

举报原因:

垃圾广告
人身攻击
抄袭侵权
违法信息
取消 确定

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示