ワードプレス

Contact Form 7 Multi-Step Formsを使って、確認画面と送信完了のページを作る方法【Contact Form 7】

Contact Form 7 Multi-Step Forms

プラグイン【Contact Form 7】を使ってお問い合わせフォームを作ってみたはいいものの、実際に使用してみるとデフォルトは入力した内容を確認して送信する機能がついていません。

▼デフォルト送信

デフォルト
デフォルト

▼プラグイン導入完成例

完成例
完成例

「送信」ボタンを押してすぐに送信される仕様だと、入力者は内容をしっかり確認した上での送信をすることができません。

この記事では、「送信ボタン」を「内容を確認」に変更して内容確認ページ送信完了ページの2ページを追加できるプラグイン「Contact Form 7 Multi-Step Forms」について解説します。

※プラグイン【Contact Form 7】のインストールも必要です。

必要なPHPファイル

page-contact.php・・・入力ページ用

page-contact-confirm.php・・・確認ページ用

page-contact-complete.php・・・送信完了ページ用

必要なPHPファイル
必要なPHPファイル

▪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
Contact Form 7 Multi-Step Forms

有効化後は、下記のメッセージが表示されますが「スキップ」をクリックして次へ進みます。

スキップ
スキップ

入力確認画面を作成

お問い合わせ新規追加をクリック。

新規追加
新規追加

フォームの名前は分かりやすいように確認などの文字を入れて管理しやすいようにしましょう。

確認画面フォーム
確認画面フォーム

確認用フォームには、form fieldを使用するためform fieldをクリック。

form field
form field

Nameには、Contact Form 7入力フォームで使用したフィールド名を記述します。

your-name
your-name

入力フォーム=[text* your-name]の場合、確認フォーム=[multiform “your-name”]になります。

変更前
変更前
変更後
変更後

フォームに入力されている名前をmultiformに書き換えてます。

multiformに書き換える
multiformに書き換える

前のページに戻る為のボタン作成にpreviousを使用。

previous
previous

Labelに「戻る」と入力しInsert Tagをクリック。

戻るボタン
戻るボタン

[previous “戻る”]と[submit “送信”]を上下に配置。

戻るボタン設置
戻るボタン設置

パーマリンク設定

設定パーマリンクカスタム構造を選択→%category%%post_id%の順番でクリックして保存。

パーマリンク設定
パーマリンク設定

プラグイン【Classic Editor】インストール

確認ページ完了ページ作成の場合、パーマリンクを変更する必要があるので、Classic Editorをインストールし有効化。

Classic Editor
Classic Editor

固定ページで確認ページを作成

固定ページ新規追加をクリック。

固定ページ
固定ページ新規

固定ページのタイトルを入力して、パーマリンクをcontact-confirmに変更します。

contact-confirm
contact-confirm

下書き保存し、上部で設定したお問い合わせの確認画面フォームのショートコードをコピーします。

ショートコード
ショートコード

固定ページに戻り、入力をビジュアルからテキストに変更しショートコードを貼り付けて保存。

固定ページにショートコード
固定ページにショートコード

固定ページで送信完了ページを作成

固定ページ新規追加をクリック。

固定ページのタイトルとページに表示する文章を記述して、下書き保存。

パーマリンクをcontact-completeに変更し保存します。

固定ページ送信完了
固定ページ送信完了

お問い合わせフォーム入力用を編集

お問い合わせお問い合わせフォーム(入力用)をクリック。

multistep
multistep

▪First StepのCheck this if this form is the first stepにチェックを入れる。

▪Next Page URLに/contact-confirmと入力する。

/contact-confirmを入力は、確認ページへの移行する為のものです。

first stepとnext page url
first stepとnext page url

submitmultistepの記述を確認し保存をクリック。

submitとmultistep
submitとmultistep

お問い合わせフォーム確認画面用を編集

お問い合わせお問い合わせフォーム(確認用)をクリック。

お問い合わせフォームの確認画面用の編集でmultistepをクリック。

multistep
multistep

▪Send EmailのSend email after this form submitis.にチェックを入れる。

▪Next Page URLに/contact-completeと入力。

/contact-completeは送信完了画面に移行するための記述です。

multistep
multistep

<label>のフォーム部分がmultiformに変更されていることを確認し、戻る&送信ボタンがあることを確認し保存します。

戻る&送信
戻る&送信

ブラウザで動作確認

実際のブラウザで入力入力の確認クリック送信画面送信完了画面に移動していれば設定完了です。

ブラウザで確認
ブラウザで確認

制作参考例

参考例を作りました。codepenで制作しているので、送信ボタンなどが反映できていませんが、実際にコンタクトフォーム7のお問い合わせにコードを張り付けるとボタンが反映されます。

制作参考例は【Run Pen】をクリック⇩

See the Pen コンタクトフォーム7-参考例 by pull-design (@design90806871) on CodePen.

下記画像のようになればOKです。

制作例
制作例

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール