プラグインで簡単!コンタクトフォームに確認画面を追加する方法

プラグインで簡単!コンタクトフォームに確認画面を追加する方法サムネイル

コンタクトフォームはワードプレスを使っているなら、簡単に問い合わせフォームを作れる高機能なプラグインです。
ただ、カスタマイズをしないと、入力内容がクリアされて送信後にメッセージが表示されるだけです。

送信後のメッセージってどんなの?

送信後に表示されるメッセージ

めっちゃ地味ですよね。
ネットに慣れていない方だと、メッセージに気づかない場合もあるので、同じメッセージを何度も送ってしまう可能性もあります。

ワンクッション置けるので、勘違いや誤入力は減ると思います。

送信ボタンを確認ボタンへ変更できる

本記事は、Contact Form7で問い合わせフォームを作っている前提で書いてます。
まだ問い合わせフォームを作っていない方は、

Contact Form7で問い合わせフォームを作りたい!を読んでからこちらの記事をご確認ください。

初期設定やメニューについて詳しく解説しています。

目次

コンタクトフォームに確認画面を追加する

Contact Form 7 add confirmというプラグインを使います。
全部で5ステップです。

STEP
Contact Form 7 add confirmをインストールして有効化します。
ContactForm7addconfirmのプラグイン候補
STEP
有効化したらコンタクトフォームに移動します。

コンタクトフォームの編集に「確認ボタン」「戻って確認ボタン」が追加されます。

有効化すると追加されるボタン
STEP
コードを一部変更

[submit “送信”]の部分を[confirm “確認する”][back “修正する”][submit “この内容で送信する”]に変更します。

コピペ用

[confirm "確認する"][back "修正する"][submit "この内容で送信する"]

“”の間にあるテキストは自由に編集できます。

コトウリでは、”確認する”→”入力内容を確認する”とか、”修正する”を”戻って修正する”にしています。
“”の間に入力しないとエラーになってしまうので、気を付けて編集して下さいね。

STEP
「保存」ボタンをクリック

忘れると反映しないので注意してください。

STEP
反映しているかを確認

実際に問い合わせフォームへ移動して変更した内容が反映しているかを確認します。

確認項目が反映している画像

サンプルを入力して送信もできていればOKです。
送信するボタンをクリックすると入力内容がクリアされて「メッセージ」タブで設定した内容が表示されます。

送信した後の画面を切り替えたい場合は、下記記事を併せてご確認ください。

関連記事 コピペで簡単!コンタクトフォームでサンクスページを追加する方法

プラグインで簡単!コンタクトフォームに確認画面を追加する方法サムネイル

この記事が気に入ったら
フォローしてね!

この記事が役に立ったらシェア!
  • URLをコピーしました!
  • URLをコピーしました!
目次