ContactForm7 確認画面 をカスタマイズして、入力した値のみを表示

wordpressの「Contact Form 7」を カスタマイズ して 入力した値のみの 確認画面 を表示する方法をご紹介します。
http://aulta.jp/library/wordpress/contactForm7Confirm.html
を参考にさせていただきました。

Contact Form 7 add confirm 」を利用されている方も多いと思いますが、確認画面や、完了画面にフォームが残ってしまうのところが使いにくかったので、「 Contact Form 7 add confirm 」を使わず、確認画面では、フォームを消し、入力した値のみを表示し、完了画面では、完了後の文言のみを表示するように修正する方法です。

ContactForm7 確認画面 、入力画面、エラー画面、送信完了画面のデザイン

入力画面

ContactForm7

エラー画面

ContactForm7

確認画面

ContactForm7 確認画面

送信完了画面

ContactForm7

1. ContactForm7 をインストールする

https://ja.wordpress.org/plugins/contact-form-7/を参考にして、Contact Form 7をインストールします。

2. ファイルをダウンロードします

データのダウンロードこちら

3. contact-form7-confirm.jsを修正する

12行目 ‘path’ : [‘/contact/’], の「/contact/」部分を、ドメインを省いた設置するURLに変更します。 http://ky5k5.org/contact/の場合は、「/contact/」になります。

4. ファイルをアップロードします

任意の場所にアップロードします。

5. function.phpを修正する。

フォームを設置するページのみに、JSとCSSのファイルを読み込ませます。

function contact_script() {
if(is_page(固定ページのID)){
  wp_enqueue_script('contactform7confirmjs','アップロードしたURL/contact-form7-confirm.js');
  wp_enqueue_style('contactform7confirmcss','アップロードしたURL/contact-form7-confirm.css');
  }
}

add_action('wp_head', 'contact_script');

if(is_page(123))
「123」の部分をフォームを設置する固定ページのIDに変更します。

アップロードしたURLは、4でアップロードした場所になります。

6. Contact Form 7を修正する

<div id="wrap_contact">

[response]

<p class="txt_edit">
お問い合わせの内容によっては、回答をさしあげるのにお時間をいただくこともございます。
あらかじめご了承くださいますようお願いいたします。
</p>

<p class="txt_confirm">
ご入力内容をご確認後、「送信する」ボタンを押してください。
</p>

<p class="txt_sent">
トップページに戻る:<a href="http://ky5k5.org">ky5k5.org</a>
</p>

<div class="wrap_error"></div>

<table>
<tbody>
<tr>
<th>お名前<span>必須</span></th>
<td>[text* name01]</td>
</tr>
<tr>
<th>メールアドレス<span>必須</span></th>
<td>[email* mail]</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>[textarea message]</td>
</tr>
</tbody>
</table>


<p class="submit-button">[submit "送信する"]</p>
</div>

<p class=”txt_edit”>〜</p>
入力画面のみに表示される内容。

<p class=”txt_confirm”>〜</p>
確認画面のみに表示される内容

<p class=”txt_sent”>〜</p>
送信完了画面のみに表示される内容< <div class=”wrap_error”></div>
エラー表示を表示する場所になります。

7. CSSを追加・修正する

テーマのCSSに追加します。

#wrap_contact{
width: 700px;
}

#wrap_contact table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#wrap_contact table tr th,
#wrap_contact table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
}
#wrap_contact table tr th{
width: 35%;
background: #eee;
}

#wrap_contact input[type="text"],
#wrap_contact input[type="email"],
#wrap_contact textarea{
padding: 0.7em;
width: 90%;
font-size:16px;
border:1px solid #CCC;
}

.wpcf7-form-mode-edit #wrap_contact input[type="button"].button-confirm, 
.wpcf7-form-mode-confirm #wrap_contact input[type="submit"] {
    background: #ee5656;
    height: 60px;
    font-size: 20px;
    letter-spacing: 0.1em;
    width: 300px;
    display: inline;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 5px;
}

.wpcf7-form-mode-confirm #wrap_contact input[type="button"].button-rewrite {
    background: #666666;
    height: 60px;
    font-size: 20px;
    letter-spacing: 0.1em;
    width: 300px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 5px;
}

#wrap_contact table th span{
color: #fff;
background: #DC0003;
padding: 3px 3px;
font-size: 11px;
margin-left: 10px;
border-radius: 3px;
letter-spacing: 0.2em;
}

.wpcf7-form-mode-confirm #wrap_contact table th span,
.wpcf7-form-mode-confirm #wrap_contact .txt_edit,
.wpcf7-form-mode-confirm #wrap_contact .txt_sent{
  display:none;
}

.wpcf7-form-mode-edit #wrap_contact .txt_confirm,
.wpcf7-form-mode-edit #wrap_contact .txt_sent{
  display:none;
}

.sent #wrap_contact .txt_confirm,
.sent #wrap_contact .txt_edit,
.sent #wrap_contact table,
.sent #wrap_contact h2{
  display:none;
}

.sent #wrap_contact .txt_sent{
  display:block;
}

div.wpcf7-mail-sent-ok {
    border: none;
    padding:0;
    margin:0;
}


@media screen and (max-width:768px){
#wrap_contact{
width: 100%;
}

#wrap_contact table,
#wrap_contact table tbody,
#wrap_contact table tr,
#wrap_contact table tr th,
#wrap_contact table tr td{
display: block;
}

#wrap_contact table{
width: 100%;
border-width: 0 0 1px 0;
}

#wrap_contact table tr th,
#wrap_contact table tr td{
width: 90%;
padding: 3% 5%;
}

#wrap_contact table tr td{
border-width: 0px 1px 0px 1px;
}
}

そのままコピペするとレスポンシブ対応になります。
ご自由に編集してください。