Web

Web制作

hero

Contact Form 7でお問い合わせフォーム→確認画面→サンクスページを作ろう

お問い合わせフォームは、Contact Form 7で作ることができます。

もしデザインカンプで、お問い合わせフォームの後に、「確認画面」「サンクスページ」があれば、Contact Form 7 Multi-Step Formsのプラグインを追加するのがおすすめです。

 

実装までのステップは、

  1. WP管理画面:Contact Form 7 のインストール
  2. WP管理画面:Contact Form 7 Multi-Step Forms のインストール
  3. WP管理画面:固定ページで、「お問い合わせ」「確認画面」「サンクスページ」を作る
  4. 固定ページ用のファイルを作る
  5. WP管理画面:「お問い合わせ」「確認画面」のフォームを作る
  6. ファイルにショートコードを埋める
  7. 送信確認

 

「Contact Form 7」のインストール

WordPress管理画面の「新規プラグインを追加」を押し、contact form 7を検索してインストールしましょう

 

 

 

「Contact Form 7 Multi-Step Forms」のインストール

 

 

固定ページを作る

必要な3ページ分作ります。

URLの設定が大事です。

 

 

固定ページ用のファイルを作りましょう

固定ページでは、タイトルリンクだけ設定すれば良いです。

 

固定ページを作成したときに設定したURLがファイル名になりますね。

  1. page-contact.php
  2. page-contact-confirm.php
  3. page-thanks.php

を作りました。

 

 

フォームの設定

実際のデザインカンプを見ながら、必要なフォームを作成していきます。

contact form 7をインストールすると、WordPress管理画面の左側に「お問い合わせ」というメニューが追加されています。
ここから作っていきましょう。

 

お問い合わせフォーム

最初に情報を入力する画面のフォームを作っていきます。

 

<label> 氏名
    [text* your-name autocomplete:name] </label>


<label> メールアドレス
    [email* your-email autocomplete:email] </label>


<label> 題名
    [text* your-subject] </label>


<label> メッセージ本文 (任意)
    [textarea your-message] </label>


[submit "確認ページ"]
[multistep multistep-677 first_step "/contact-confirm"]

 

確認画面用

<label> 氏名
    [multiform "your-name"] </label>


<label> メールアドレス
    [multiform "your-email"]</label>


<label> 題名
    [multiform "your-subject"] </label>


<label> メッセージ本文 (任意)
    [multiform "your-message"]</label>


[previous id:back class:back "戻る"]
[submit "送信"]
[multistep multistep-778 send_email "/thanks"]

 

 

 

ファイルにショートコードを埋める

 

※ショートコードはユーザーごとに変わりますので以下は例です。

<?php echo apply_shortcodes( '[contact-form-7 id="05f55a8" title="contact"]' ); ?>

 

  1. page-contact.php
  2. page-contact-confirm.php

にそれぞれ作ったフォームのショートコードを設定しましょう。

 

 

動作確認

Localに「Mailpit」というメールの動作確認用のツールがあるので使いましょう!

 

きちんと動作していれば、メールが届きます。

 

 

 

Contact Form 7 Multi-Step Formsで次のステップに遷移しないとき

 

wp_head();wp_footer();があるか確認しよう

 

②遷移先のURLがまちがっていないか確認しよう

[multistep multistep-677 first_step "/confirm"]

 

wp_deregister_scriptがあるとうまくいかないことがある

コメントアウトしてみよう

<?php wp_deregister_script(‘jquery’); ?>