ワードプレス
Contact7：確認画面あり
★Contact7の確認画面あり
プラグイン：Contact Form 7 add confirm
<p class="cText wpcf7c-elm-step1">
このたびはお問い合わせいただきありがとうございます。
以下のフォームに必要事項をご入力のうえ、「確認画面へ」のボタンを
クリックしてください。 なお、<span class="orange">※</span>のついた項目は必ずご入力ください。</p>
<p class="cText wpcf7c-elm-step2">
以下の内容で宜しければ、「送信する」のボタンをクリックしてください。</p>
<div id="hSpec">
<table class="pc_spec wpcf7c-elm-step1 wpcf7c-elm-step2">
<tbody><tr>
<td class="company_item">お名前<span class="orange">※</span></td>
<td class="company_spec"> 様</td>
</tr>
<tr>
<td class="company_item">ふりがな<span class="orange">※</span></td>
<td class="company_spec"> さま </td>
</tr>
<tr>
<td class="company_item">電話番号</td>
<td class="company_spec"> </td>
</tr>
<tr>
<td class="company_item">メールアドレス<span class="orange">※</span></td>
<td class="company_spec"> </td>
</tr>
<tr>
<td class="company_item">お問い合わせ内容<span class="orange">※</span></td>
<td class="company_spec">[textarea your-message] </td>
</tr>
</tbody></table>
<div class="wpcf7c-elm-step1">
<div id="privacy_policy">
<dl>
<dd>当社は、個人情報の保護に関する法律等、関係法令を遵守するとともに、より適正な事業執行に努めます。</dd>
<dt>個人情報の利用目的</dt>
<dd>お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、<br>
電子メールや資料のご送付に利用いたします。</dd>
<dt>個人情報の第三者への開示・提供の禁止</dt>
<dd>当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、<br>
個人情報を第三者に開示いたしません。</dd>
<dd class="p_list">お客さまの同意がある場合</dd>
<dd class="p_list">お客さまが希望されるサービスを行なうために当社が業務を委託する業者に対して開示する場合</dd>
<dd class="p_list">法令に基づき開示することが必要である場合</dd>
<dt>ご本人の照会</dt>
<dd>お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、<br>
ご本人であることを確認の上、対応させていただきます。</dd>
<dt>法令、規範の遵守と見直し</dt>
<dd>当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、<br>
本ポリシーの内容を適宜見直し、その改善に努めます。</dd>
</dl>
</div>
<span class="agree">
[checkbox* your-doui "上記プライバシーポリシーに同意します"]
</span>
</div><!-- / step2 -->
<span class="send">
[confirm "確認画面へ"]
[submit "送信する"]
</span>
</div><!-- / hSpec -->
<div class="complete">
<p class="wpcf7c-elm-step3"><img src="/images/thankyou.png" alt="お問い合わせ有難うございます。"></p>
</div>
CSS
/* お問い合わせ
----------------------------------*/
span.pText {
font-size: 90%;
letter-spacing: 0.1em;
display: block;
padding: 20px 30px;
line-height: 1.7em;
}
span.agree {
text-align: center;
display: block;
padding: 5px 1%;
font-size: 90%;
letter-spacing: 0.1em;
width: 98%;
background: #EAF4FD;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
span.send {
text-align: center;
display: block;
padding: 5px;
margin-top: 0px;
}
span.send input {
color: #FFF;
background: #2D70D0;
height: 50px;
width: 150px;
font-size: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 3px solid #EAF4FD;
letter-spacing: 0.2em;
}
span.send input:hover {
color: #FFF;
background: #255CAF;
height: 50px;
width: 150px;
font-size: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 3px solid #EAF4FD;
}
.wpcf7-list-item-label {
display: block;
}
.wpcf7-mail-sent-ok {
display: none;
visibility: hidden;
height: 0px;
}
.wpcf7-form-control-wrap input {
font-size: 13px;
letter-spacing: 0.1em;
border: 1px solid #CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 0px 10px;
margin: 0px;
height: 22px;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
width: 200px;
background: #FFF;
}
.wpcf7-form-control-wrap input:focus {
font-size: 13px;
letter-spacing: 0.1em;
border: 1px solid #CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 0px 10px;
height: 22px;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background: #EFF;
}
.wpcf7-form-control-wrap textarea {
font-size: 13px;
line-height: 22px;
letter-spacing: 0.1em;
border: 1px solid #CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 0px 10px;
margin: 0px;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
width: 380px;
background: #FFF;
}
.wpcf7-form-control-wrap textarea:focus {
font-size: 13px;
line-height: 22px;
letter-spacing: 0.1em;
border: 1px solid #CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 0px 10px;
margin: 0px;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background: #F0FFFF;
}
.complete {
display: block;
text-align: center;
}