contact form 7

フォームに入力

<div class="CF7_contact">
<div class="title_contact">
<label> 会社名
    [text* your-company watermark"例:株式会社×××"] </label>
</div>
<div class="title_contact">
<label> ご担当者名 <span class="CF7_req">必須</span>
    [text* your-name watermark"例:あなたのお名前"] </label>
</div>
<div class="title_contact">
<label> フリガナ <span class="CF7_req">必須</span>
    [text* your-kana watermark"例:アナタノオナマエ"] </label>
</div>
<div class="title_contact">
<label> メールアドレス <span class="CF7_req">必須</span>
    [email* your-email watermark"例:×××@×××.com"] </label>
</div>
<div class="title_contact">
<label> メールアドレス(確認用) <span class="CF7_req">必須</span>
    [email* your-email_confirm watermark"確認のためもう一度入力してください"] </label>
</div>
<div class="title_contact">
<label> 電話番号 <span class="CF7_req">必須</span>
    [tel* your-tel watermark"例:0312345678"] </label>
</div>
</div>
<div class="title_contact">
 お問い合わせ内容 <span class="CF7_req">必須</span>
    [checkbox your-checkbox "××について" "××について" "××について" "××について" "その他"]
</div>
<div class="CF7_honbun">
<div class="title_contact">
<label> 本文 <span class="CF7_req">必須</span>
    [textarea your-message] </label>
</div>
</div>
<div class="scroll">
<div class="scroll-inner">
<p class="title01">【個人情報保護方針】</p>
株式会社○○(以下「当社」)は、以下の通り個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性と認識と取組みを徹底させることにより、個人情報の保護を推進いたします。

<p class="title01">個人情報の管理</p>
当社は、お客様の個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行います。

<p class="title01">個人情報の利用目的</p>
お客様からお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。

<p class="title01">個人情報の第三者への開示・提供の禁止</p>
当社は、お客様よりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。

<p class="title01">お客様の同意がある場合</p>
お客様が希望されるサービスを行うために当社が業務を委託する業者に対して開示する場合
法令に基づき開示することが必要である場合

<p class="title01">個人情報の安全対策</p>
当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。

<p class="title01">ご本人の照会</p>
お客様がご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。

<p class="title01">法令、規範の順守と見直し</p>
当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。

<p class="title01">お問い合わせ</p>
当社の個人情報の取り扱いに関するお問い合わせは下記までご連絡ください。

株式会社○○
〒○○
TEL. ○○
</div>
</div>
[acceptance acceptance-168] 入力内容の確認及び、個人情報保護方針に同意する。 [/acceptance]
<p class="CF7_btn">[submit "個人情報保護方針に同意の上、送信する"]</p>

cssに入力

/*お問い合わせページ*/
.CF7_contact{
	width:100%;
}

/*入力欄*/
.CF7_contact input, .CF7_contact textarea {
	width:100%;
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #d8d8d8;
	margin-top:10px;
	margin-bottom:25px
}

.CF7_honbun{
	width:100%;
}

/*入力欄*/
.CF7_honbun input, .CF7_honbun textarea {
	width:100%;
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #d8d8d8;
	margin-top:10px;
	margin-bottom:25px
}

/*タイトル左ライン*/
.title_contact{
   position:relative;
}

span.wpcf7-list-item {
  margin-top: 20px;
  margin-bottom: 20px
}

.title_contact::before{
   content:"";
   display:inline-block;
   width:3px;
   height:30px;
   background-color:green;
   position:absolute;
}

/*「必須」文字*/
.CF7_req{
	font-size:.8em;
	padding: 5px;
	background: #dc143c;/*レッド*/
	color: #fff;
	border-radius: 3px;
}

/*個人情報*/
.title01 {
	font-size:18px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 10px;
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#5cb15b;/* オレンジ*/
	border:0;
	color:#fff;
	font-weight:bold;
}

.CF7_btn{
	text-align:center;
	margin-top:30px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

.scroll{
overflow: auto;
height: 200px;
width: 100%;
}

.scroll{
		border-radius: 3px;
	border: 1px solid #d8d8d8;
}

.scroll-inner{
	padding:20px
}