ブログのお問い合わせフォームでおすすめの、WordPressプラグインContact Form by WPForms。
今回はContact Form by WPFormsの確認画面について、掘り下げていきます。
くま太君なんでわざわざ確認画面についてピックアップしたの？
それは、Contact Form by WPFormsに確認画面がないからです。
というと、少々語弊があるので、このあたりを解説していこうと思います。
フォームについて確認画面を欲している、探している方が案外多いので、何か参考になれば幸いです。
くま太君この他にもContact Form by WPFormsについての記事を公開中！
よかったら一緒に参考にしてね！
なぜContact Form by WPFormsに確認画面がないの？
お問い合わせや申込、アンケートフォームなどを作成するにあたり、多くの方が確認画面を欲しています。
くま太君なんで確認画面が欲しいの？
私たちがショッピングや各種申請、申込など、何らかのフォーム入力を使用した際、必ずといって良いほど確認画面を目にしますよね。
- ○○の購入で合っていますか？
- この申込内容で合っていますか？
と確認画面で聞かれます。
そしてこの内容で宜しければ、送信を押してください、のような流れです。
これは日本独特の流れであるとも言えます。
この確認画面で、間違いが無いことを確認し決定する、この習慣があるので、いざ自分でフォームを作成する際に確認画面を欲します。
ですが、Contact Form by WPFormsを初めとしたWordPressプラグインのフォームには、初期機能として、大体にこの確認画面がありません。
これらのフォームプラグインが海外製品であることに関係しています。
海外では、日本でおなじみの確認画面の使用が少ないです。
内容を入力し、そのまま送信して完結、この流れが主流です。
- 確認画面があることでクリック数が増え、煩わしさを感じるため
- リアルタイムでエラーチェックすることが一般的であるため
- シンプルなフォームであるため
- ものにより、送信後に修正ができるシステムがあるため
- モバイルファーストで確認画面での離脱率を防ぐため
このように海外では、システムや工程に重きを置いています。
対して日本の場合は、信頼性と安心感を重視するため、確認画面を重宝する傾向にあります。
このような違いから、私たちがWordPressのフォームプラグインで作業しようとすると、確認画面がない！と探すことになるのですね。
実際このような文化から、確認画面がないと心もとないですが、ブログで使用するお問い合わせなど簡単なものであれば、そういきり立つ必要もないと考えます。
ただやはり、申込やアンケートなど、少し情報入力が必要なフォームになると、確認画面が欲しいなという気持ちになりますよね。
そうなると別案や工夫が必要になってきます。
Contact Form by WPFormsの確認メッセージの役割とは
まずContact Form by WPFormsの無料版には、私たちが思い描く確認画面はありません。
くま太君内容がOKなら送信押してね！という確認画面が無いんだよね。
ちなみにContact Form by WPFormsの有料版では確認画面を作ることができます。
ここは後ほどご案内致します。
話は戻って、紛らわしい名称ではありますが、Contact Form by WPFormsには確認メッセージという機能があります。
これは入力フォームを送信後に、ブラウザ上に「ありがとうございます」などを表示する機能です。
要は、送信した後に表示される内容なんです。
この確認メッセージ上で、「ありがとうございます」などの文言の他、入力した内容を表示させることは可能です。
くま太君どのようなことかと言うと、下記図を見てみて！
緑のボックス内は、確認メッセージのデフォルトの表示エリアです。
そして赤枠内はフォームで入力した内容を、表示させています。
この赤枠内は設定で表示させることができます。
ただし、あくまでもフォーム内容が送信された後の事後報告ということを忘れないでください。
確認メッセージでは、このようにブラウザ上で入力した内容を確認することはできますが、修正することはできません。
くま太君もう、送信しちゃった後だからね。
この入力した内容を確認メッセージで表示させるなら、文言の中に、修正があったら再度フォーム送信お願いします、など一文を入れておくと親切ですね。
Contact Form by WPFormsの確認メッセージの設定方法
くま太君ここの設定は超簡単だよ！
Contact Form by WPFormsの確認メッセージの設定方法は簡単です。
対象のフォーム設定画面で、下記図の左側「確認」をクリックします。
画面右側の確認メッセージ部分に任意のコメントを入力します。
そして、もしこの確認メッセージに入力してもらった内容を、追加で表示させたい場合は、赤枠内の「確認メッセージの後に入力内容のプレビューを表示する」にチェックを入れます。
すると、下記図のように確認メッセージ下に入力内容が、表示されるようになります。
Contact Form by WPForms有料版には確認画面がある
ではContact Form by WPFormsでは確認画面を使用することはできないのでしょうか？
残念ながら無料版のContact Form by WPFormsでは、作成できません。
JavaScriptやPHPなどで作ることは可能ですが、初心者の方がすぐに作れそうにありません。
対してContact Form by WPFormsの有料版であれば、確認画面を簡単に作ることができます。
くま太君フォームフィールドで、ドラッグアンドドロップで作れちゃうんだ。
Contact Form by WPForms有料版のBasic（基本）コースから利用可能です。
下記図はContact Form by WPForms有料版のフォームフィールドです。
エントリープレビューというフィールドが、確認画面となります。
下記図がContact Form by WPFormsの確認画面です。
確認した後に、ちゃんと修正するため、フォーム入力画面に戻ることもできます。
見慣れた確認画面ですよね。
ただし、有料でBasic（基本）コースで年間＄49.50／年 （約￥7,610）かかるので（2024年７月現在）、計画的なご利用が必要になります。
Contact Form by WPForms無料版で確認画面をどうにかできないか
Contact Form by WPForms無料版では、フォームを送信する前に、確認画面を作ることができません。
ただし、先に少しお話したJavaScriptなどでテクニカルに作成することは可能です。
ですが現実的ではありませんよね。
くま太君確認画面の存在意味はなんだっけ？
- 間違った内容で送信しない
- 内容を見直してもらう
- 信頼・安心を担保する
技術的、工程的な意味合いからしたら、要は間違った内容を送信させないことにあります。
くま太君入力内容はあっている？
確認してから送信してね！
って、伝えられればよいのでは？！
つまり送信ボタンをクリックする前に、フォーム画面で入力内容を見直してもらうよう促せればよいのです。
見直しを促す文言を入れる
くま太君言い方は悪いカモだけど、
逃げの一手を確保しておくの。
フォームに入力してから、送信ボタンをクリックする前に、見直しを促す文言を追加します。
下記図のようにフォーム入力画面の下に、注意書きを入れておくような感じです。
Contact Form by WPFormsの無料版ではHTMLのフィールドが使えません。
そのためフォームを埋め込んでおく固定ページを開いて、フォームの下にテキスト入力をしておくのがおすすめです。
確認チェック項目を追加する
くま太君チェックボックスを使って、確認したら送信するようにフォームを作ってみよう！
チェックボックスと似たようなボタンに、多項選択式（ラジオボタン）フィールドがあります。
チェックボックスはチェックを入れたり外したりが自由ですが、多項選択式（ラジオボタン）の場合は1度チェックしたら外せなくなります。
そのためこのような同意チェックの場合は、チェックボックスを使う方が効果的です。
仕上がりはこんな感じです。
「確認しました」のチェックボックスにチェックをしないと、送信できないように「必須」設定で制御しています。
くま太君設定は簡単！
作り方を見てみよう！
対象のフォームフィールドで、左側メニューから「チェックボックス」をドラッグ＆ドロップします。
これを確認チェック用に編集していきます。
まずは画面右側のチェックボックスをクリックします。
編集画面に切り替わりました。
作業するのは３か所です。
今回は「入力内容に誤りがないか確認後チェックしてください」と入力しました。
今回は「確認しました」と入力しました。
この必須項目をONにすることで、チェックしないと送信ボタンが押せない状態になるので、忘れずに設定します。
くま太君設定はこれだけ！
固定ページでフォームを反映させたのが、これです。
これでフォームの入力内容を確認するよう、促すことができました。
よくあるプライバシーポリシーの同意項目
くま太君ここはちょっとおまけだよ。
よくプライバシーポリシーや同意書などで、こんなチェックを見たことがありませんか。
作り方は先の「確認チェック項目を追加する」と同じですが、リンクを追加しています。
①と②の違いは、以下です。
- チェックボックス外にリンクを設置
- チェックボックス内にリンクを設置
このリンクの設定方法を見ていきます。
①チェックボックス外にリンクを設置方法
左側メニューの説明ボックス内に、リンク付きのコードを入力します。
<a href="https://www.xxx.com/privacy-policy/" target="_blank" rel="noopener noreferrer" class="underline">プライバシーポリシー</a>ページへリンク下記のURL部分に、リンク先のURLを記載してください。
https://www.xxx.com/privacy-policy/日本語部分は任意の文言でOKです。
このように「説明」ボックスは欄外に、様々な説明文を付けることができます。
応用が利きそうなボックスですね。
②チェックボックス内にリンクを設置方法
くま太君こっちの方が、シンプルでおすすめ。
左側メニューの選択肢ボックス内に、リンク付きのコードを入力します。
<a href="https://www.zero-blo.com/privacy-policy/" target="_blank" rel="noopener noreferrer" class="underline">プライバシーポリシー</a>に同意する先ほどと同じく下記のURL部分に、リンク先のURLを記載してください。
https://www.xxx.com/privacy-policy/こちらも日本語部分は任意の文言でOKです。
このタイプの方がシンプルで表示ができるので、おすすめです。
このプライバシーポリシーの同意項目の設定も、「必須」項目のチェックは忘れないようにしましょう。
今回のまとめ。Contact Form by WPForms確認画面は無いけど工夫次第で最強フォームに！
Contact Form by WPFormsの無料版では、確認画面がありません。
対してContact Form by WPForms有料版では、エントリープレビューというフィールドが確認画面となっています。
くま太君でもお金かかるのはちょっと……
そんなときは、確認画面は無理ですが、ちょっとした工夫で間違いがないか注意を促せるフォームに作り上げることは可能です。
最近の傾向としては、シンプルでユーザビリティが良いものが望まれていますよね。
ですが日本の文化として、確認画面や注意を促す表記など、このようなひと手間は、信頼と使用者側の安心に繋がります。
フォームを作成して運用するということは、相手側からの情報を取得するということになります。
そのため少しでも信頼と安心感のあるWEBサイトであると感じてもらうためには、このひと手間、サボりたくはないですね。
最後までお読みいただきありがとうございました。
＼ 【広告】SWELLだと、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！