プラグイン【Contact Form 7】を使ってお問い合わせフォームを作ってみたはいいものの、実際に使用してみるとデフォルトは入力した内容を確認して送信する機能がついていません。
▼デフォルト送信
![デフォルト](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-20-10-31-32-133-1024x422.jpg)
▼プラグイン導入完成例
![完成例](https://design-pull.com/wp-content/uploads/2022/07/contact-sousinpsd-2.jpg)
「送信」ボタンを押してすぐに送信される仕様だと、入力者は内容をしっかり確認した上での送信をすることができません。
この記事では、「送信ボタン」を「内容を確認」に変更して内容確認ページと送信完了ページの2ページを追加できるプラグイン「Contact Form 7 Multi-Step Forms」について解説します。
※プラグイン【Contact Form 7】のインストールも必要です。
必要なPHPファイル
page-contact.php・・・入力ページ用
page-contact-confirm.php・・・確認ページ用
page-contact-complete.php・・・送信完了ページ用
![必要なPHPファイル](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-11-31-33-285.jpg)
▪3つのファイル内のコード⇩
PHPファイルは下記の記述<?php the_content(); ?>でコンタクトフォームを取得します。
<?php get_header();?>
<?php get_template_part('navi-header'); ?>
<?php the_content(); ?>
<?php get_template_part('navi-footer'); ?>
<?php get_footer();?>
▪お問い合わせフォームをfront-pageに導入したい場合の記述⇩
お問い合わせフォームのショートコードの部分に入力お問い合わせフォームで作成したショートコードを張り付ける。
<article class="form">
<div class="container">
<h2>お問い合わせフォーム</h2>
<?php echo do_shortcode('[お問い合わせフォームのショートコード]'); ?>
</div>
</article>
Contact Form 7 Multi-Step Formのインストール
WordPress管理画面→プラグイン→新規追加→キーワードにContact Form 7 Multi-Step Formsを入力し「今すぐインストール」し有効化します。
![Contact Form 7 Multi-Step Forms](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-09-37-426-1024x438.jpg)
有効化後は、下記のメッセージが表示されますが「スキップ」をクリックして次へ進みます。
![スキップ](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-11-08-1924.jpg)
入力確認画面を作成
お問い合わせ→新規追加をクリック。
![新規追加](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-12-54-305.jpg)
フォームの名前は分かりやすいように確認などの文字を入れて管理しやすいようにしましょう。
![確認画面フォーム](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-14-06-611-1024x314.jpg)
確認用フォームには、form fieldを使用するためform fieldをクリック。
![form field](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-15-18-459-1024x395.jpg)
Nameには、Contact Form 7入力フォームで使用したフィールド名を記述します。
![your-name](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-16-32-396.jpg)
入力フォーム=[text* your-name]の場合、確認フォーム=[multiform “your-name”]になります。
![変更前](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-17-44-293-1024x711.jpg)
![変更後](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-18-19-198-1024x711.jpg)
フォームに入力されている名前をmultiformに書き換えてます。
![multiformに書き換える](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-20-41-404-1024x718.jpg)
前のページに戻る為のボタン作成にpreviousを使用。
![previous](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-20-41-404-1-1024x718.jpg)
Labelに「戻る」と入力しInsert Tagをクリック。
![戻るボタン](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-21-30-403.jpg)
[previous “戻る”]と[submit “送信”]を上下に配置。
![戻るボタン設置](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-21-57-474-1024x709.jpg)
パーマリンク設定
設定→パーマリンク→カスタム構造を選択→%category%→%post_id%の順番でクリックして保存。
![パーマリンク設定](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-29-05-789-1024x566.jpg)
プラグイン【Classic Editor】インストール
確認ページと完了ページ作成の場合、パーマリンクを変更する必要があるので、Classic Editorをインストールし有効化。
![Classic Editor](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-30-24-551-1-1024x460.jpg)
固定ページで確認ページを作成
固定ページ→新規追加をクリック。
![固定ページ](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-20-13-44-28-155.jpg)
固定ページのタイトルを入力して、パーマリンクをcontact-confirmに変更します。
![contact-confirm](https://design-pull.com/wp-content/uploads/2022/07/bandiscam-2022-07-18-09-32-52-768.jpg)
下書き保存し、上部で設定したお問い合わせの確認画面フォームのショートコードをコピーします。
![ショートコード](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-34-17-117.jpg)
固定ページに戻り、入力をビジュアルからテキストに変更しショートコードを貼り付けて保存。
![固定ページにショートコード](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-34-50-103.jpg)
固定ページで送信完了ページを作成
固定ページ→新規追加をクリック。
固定ページのタイトルとページに表示する文章を記述して、下書き保存。
パーマリンクをcontact-completeに変更し保存します。
![固定ページ送信完了](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-39-58-833.jpg)
お問い合わせフォーム入力用を編集
お問い合わせ→お問い合わせフォーム(入力用)をクリック。
![multistep](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-49-42-5301.jpg)
▪First StepのCheck this if this form is the first stepにチェックを入れる。
▪Next Page URLに/contact-confirmと入力する。
※/contact-confirmを入力は、確認ページへの移行する為のものです。
![first stepとnext page url](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-51-21-5051.jpg)
submitとmultistepの記述を確認し保存をクリック。
![submitとmultistep](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-52-37-438.jpg)
お問い合わせフォーム確認画面用を編集
お問い合わせ→お問い合わせフォーム(確認用)をクリック。
お問い合わせフォームの確認画面用の編集でmultistepをクリック。
![multistep](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-53-46-544.jpg)
▪Send EmailのSend email after this form submitis.にチェックを入れる。
▪Next Page URLに/contact-completeと入力。
※/contact-completeは送信完了画面に移行するための記述です。
![multistep](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-54-37-8501.jpg)
<label>のフォーム部分がmultiformに変更されていることを確認し、戻る&送信ボタンがあることを確認し保存します。
![戻る&送信](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-07-18-09-55-02-213.jpg)
ブラウザで動作確認
実際のブラウザで入力→入力の確認クリック→送信画面→送信→完了画面に移動していれば設定完了です。
![ブラウザで確認](https://design-pull.com/wp-content/uploads/2022/07/contact-sousinpsd.jpg)
制作参考例
参考例を作りました。codepenで制作しているので、送信ボタンなどが反映できていませんが、実際にコンタクトフォーム7のお問い合わせにコードを張り付けるとボタンが反映されます。
制作参考例は【Run Pen】をクリック⇩See the Pen コンタクトフォーム7-参考例 by pull-design (@design90806871) on CodePen.
下記画像のようになればOKです。
![制作例](https://design-pull.com/wp-content/uploads/2022/07/bandicam-2022-08-06-00-15-07-411-1024x829.jpg)