聯繫表單7 欄位樣式

一行兩個欄位

聯繫表單7 編碼

<div class="phone-record">


<div class="clearfix">
	<div id="left">
		<label>紀錄時間 </label>
		[date date]
	</div>

	<div id="right">
		<label>處理人員 </label>
		[select phone-staff "jamie" "蕊薪" "芳茹"]
	</div>

</div>	

<div class="clearfix">
	<div id="left">
		<label> 客戶名稱 </label>
		[text customer-name placeholder "客戶姓名"]
	</div>

	<div id="right">
		<label> 聯絡電話 </label>
		[text customer-phome placeholder "0912-345678"]
	</div>
</div>

<div class="clearfix">
	<div id="left">
		<label> Line ID </label>
		[text customer-line]
	</div>

	<div id="right">
		<label> 電子郵件 </label>
		[email customer-email placeholder "[email protected]"]
	</div>

</div>

<label> 客戶地區 </label>
	[select customer-area "不清楚" "北部" "中部" "南部" "東部" "外島"]

<div class="clearfix">
	<div id="left">
		<label> 客戶需求 </label>
		[select customer-needs "保修" "詢價-機器" "詢價-代工" "詢價-其他" "業務諮詢"]
	</div>

	<div id="right">
		<label> 商品 </label>
		[text products]
	</div>
</div>


<div class="clearfix">
	<div id="left">
		<label> 電話內容 </label>
		[textarea phone-content placeholder "詳細說明電話中的談話內容"]
	</div>

	<div id="right">
		<label> 處理內容 </label>
		[textarea process-content placeholder "詳細說明如何幫助客戶處理問題"]
	</div>

</div>


<label> 轉發部門人員 </label>
<label class="forward-format"> (格式：業務部-人員名稱、巧繪網-人員名稱、市場部-人員名稱) </label>
	[text* forward-department placeholder "部門-人員姓名"] 

[submit "紀錄"]

</div>

CSS編碼

#left {
	width: 49%;
	float: left;
	margin-right:2%;
}

#right {
	width: 49%;
	float: left;
}

.clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
	margin-bottom:10px;
}

.clearfix {
	display:block;
}

一行三個欄位

想這樣設定表單

需要使用div 與css編寫

以下為做出此表單的Contact form 7 編碼

<div class="cf7-len">
姓名<font color=red>*</font>
    [text* your-name]

公司名稱
    [text text-company]

手機<font color=red>*</font>
    [tel* tel-phone maxlength:9 placeholder "0912345678" ]

</div>

<div class="cf7-1">
	<div id="left">
		地址<font color=red>*</font>[select menu-country id:add-left "---" "基隆市" "臺北市" "新北市" "桃園市" "新竹縣" "新竹市" "苗栗縣" "臺中市" "彰化縣" "南投縣" "雲林縣" "嘉義縣" "嘉義市" "臺南市" "高雄市" "屏東縣" "臺東縣" "花蓮縣" "宜蘭縣" "連江縣" "金門縣" "澎湖縣"]
		[text* text-address id:add-middle placeholder "行政區域"]
	</div>
	<div id="right">
		[text* text-address id:add-right placeholder "地址"]
	</div>
</div>

<div class="cf7-len">
電子郵件<font color=red>*</font>
    [email* your-email id:email]

主旨
    [text your-subject]

你的訊息
    [textarea your-message]
</div>

[submit "送出"]

以下為CSS編碼

#left{
	width:48%;
	float:left;
	margin-right:5px;
}

#right{
	width:48%;
	float:left;
}

#add-left{
	width:46%;
	float:left;
}

#add-middle{
	width:48%;
	float:right;
	margin-right:5px
}

#add-right{
	width:99%;
	margin-top:25.5px;
}

.cf7-1:{
	display:block;
}

.cf7-1:after{
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
	margin-bottom:10px;
}

.cf7-len{
	width:97%
}

參考來源為此影片