WordPressのプラグインでお問い合わせフォームを作ろうと思った時に、真っ先に候補に挙がりがちなのは「Contact Form7」と「MW WP Form」。
実際に使ってみると分かると思いますが、正直ちょっと初心者にはハードルが高いんですよね。
しかもデフォルトのデザインのままだと味気ないので、キレイにしたければCSSでいじる必要があり、知識が無い人はいきなり難関にぶち当たったように感じると思います。
もちろん、カスタマイズ性などを考慮すれば、これらのプラグインにも良さはありますが、「必要最低限のフォームを簡単に作りたい！」という初心者にには、もっとおすすめのプラグインがあります。
それが、当記事でご紹介するNinja Forms（ニンジャフォームズ）です。
なぜ、おすすめなのか。その理由、そして使い方と設置方法までを解説します。
サクッと使い方だけ知りたい方は「Ninja Formsの使い方と設定方法」へどうぞ。
お問い合わせフォームプラグイン「Ninja Forms」が初心者におすすめの理由
Ninja Formsがおすすめな理由は以下の通りです。
- 難しいコードをほぼ見ないで済む
- 必要な項目を直感的に追加することが出来る
- CSSで装飾しなくてもデザインが悪くない
難しいコードをほぼ見ないで済む
「Contact Form 7」や「MW WP Form」は自分でプログラムを書くよりは簡単とは言え、設定項目を見るとショートコードやHTMLなどがずらり…
右も左も分からない人にとっては、ちょっと拒否反応が出てしまいそうです。
特に私の場合は、初めて問い合わせフォーム作ったのがクライアントの案件だったので、要望を満たした項目を作るだけでなく装飾を整えなければならないために非常に苦労した記憶があります。
一方、Ninja Formsは出力用のコードは若干あるものの、HTMLを見ることもなく比較的ノーコードに近い状態で設定が完了します。
ただブログをしたい初心者などはお問い合わせフォームを作るためだけにわざわざ知識で苦労する必要はないと思いますし、案件をこなすWeb制作者でもNinja Formsを使うことでグッと楽することができると思います。
必要な項目を直感的に追加することができる
さらにNinja Formsが良いなと思うポイントは、よくあるデフォルトの簡単な問い合わせフォームだけでなく、様々な項目を直感的に追加できるという点です。
直感的、というのがポイントです。後ほど使い方のところで説明しますが、ドラッグ&ドロップで簡単に項目を配置できるんです。
追加できる項目には、例えばチェックボックスや電話番号入力欄はもちろん、スター評価なんかまであるので驚きです。
「Contact Form 7」や「MW WP Form」も項目追加できますが、知識が無い状態では少しハードルが上がりますよね。
CSSで装飾しなくてもデザインが悪くない
初心者におすすめしたい一番の理由がこれかもしれません。
CSSは文字やボタンなどを装飾するための言語で、見た目を変えたい時に必要となる知識です。
しかし、ただブログを始めたいとかだとCSSまで知識が無い場合が多いですよね。
Ninja Formsは最初に用意されているデザインがそこそこいい感じなので、装飾しなくても全然OKです。
Ninja Formsの使い方と設定方法
Ninja Formsの可能性を感じていただいたところで、実際の使い方と設定方法の説明に入っていきたいと思います。
完全初心者でも分かるよう、順を追って丁寧に解説しますのでご安心を。
プラグイン「Ninja Forms」をインストール
WordPress管理画面のメニューからプラグインをクリック、上部にある新規追加ボタンを押します。
検索欄に「Ninja Forms」と入力すると、「Ninja Forms Contact Form -The Drag and Drop Form Builder for WordPress-」という名前の、かわいらしいアイコンのプラグインが見つかると思うので、「今すぐインストール」ボタンをクリックしてインストールします。
インストールが完了したら、「有効化」をクリックして有効化してください。
Ninja Formsで基本のお問い合わせフォームを作る
プラグインを有効化すると、管理画面の左側にNinja Formsのメニューが出るのでこちらをクリックすると設定画面へと移動します。
初めて利用する場合、上のようなポップアップが出る場合があります。
「より良いプラグインにするためにデータ収集（送信内容は含まれない）にご協力ください」といった内容なので、実際どちらでも構いませんが、とりあえず無難に「NOT NOW」を選択しておきましょう。
ポップ画面が消えると上の画面が表示されますが、ここで作成したフォーム一覧が表示されるようになっています。
ではさっそくフォームを作ってみましょう！と言いたいところですが、実ははじめから1つ基本的なフォームが用意されています。
今回はこちらを使って、フォームを完成させてみましょう。
「Contact Me」となっているフォームを選択してください。
もし新規で作る場合には「新規追加」ボタンから進むことになります。
フォームフィールド設定
まずは、実際のフォームを形作っていくフォームフィールドの設定です。
上の画像のようにプレビューを見た状態で設定していくことができます。
ここでは、名前、メールアドレス、メッセージ本文と送信ボタンのシンプルなお問い合わせフォームになっています。
初期設定のままだと、英語になっているのでここを日本語に変えましょう。
編集したい項目をクリックしてみてください。
すると右側に設定エリアが現れます。
基本的に編集したい項目を左側のエリアで選択して、右側で詳細設定するという仕組みになっています。とても分かりやすいですね。
右側の「表示」となっている部分は、クリックすると設定できる項目が増えます。
各項目について簡単に説明します。
①ラベル
ラベルの部分を変更すると表示名を変えることができます。
上の例の場合、「Name」と英語になっていたところを日本語に直したいので「名前」「ご氏名」などに変更しましょう。
②必須フィールド
必須項目にするかどうかの設定です。
今回の基本的なお問い合わせフォームでは必要最低限の項目しかないので、すべて必須のままOKです。
③既定値
初期状態で文字が入力されている状態にしたい場合に記入します。
あまり使う場面は多くないと思います。基本空欄でOKです。
④プレースホルダー
入力のヒントを示したテキストです。入力を始めるまで薄い文字で表示されます。
例えば、メールアドレス欄に「○×△@example.com」記入例が示されていたり、メッセージ欄に「お問い合わせ内容をご記入ください」など記載されているのを見たことがあるのではないでしょうか。
こちらも基本はなくても問題ないので、必要に応じて活用してください。
⑤説明
入力欄の上に補足説明などを付け足すことができます。
分かりづらい項目の説明に使ったり、形式を指定したい場合の補足説明などに便利です。
名前の項目の編集が終わったら、同様に「Email（メールアドレス）」「Massage（メッセージ）」「Submit（送信ボタン）」の項目も書き換えましょう。
なお、送信ボタンの編集に関しては、ラベルの他に「処理状況ラベル」というのがあります。
こちらは送信中に表示されるラベルなので「送信中」や「送信しています」などに書き換えます。
ここまで進めばフォームの見た目部分に関する設定は完了です。
補足①：他の項目を追加したい場合
他の項目を追加したい場合には、フォームフィールドタブで右下のほうにあるプラスボタンをクリックすると、追加可能なフィールドの一覧を見ることができます。
追加したい項目をドラッグ＆ドロップすると好きな場所に配置できます！
直感的で非常に簡単ですね。この操作性がNinja Formsの強みかなと思います。
ちなみに項目を削除したい場合には、歯車マークにポインタを置くとゴミ箱マークが出るのでそこをクリックするだけです。
実際の雰囲気は上のアニメーションを参考にしてください。
フィールドによって設定内容も異なります。気になるのがあればいろいろと試してみてくださいね！
補足②：新規作成でプリセットが使える
ここまで最初から付いている標準の問い合わせフォームを使って編集してきましたが、新規作成する場合には様々なプリセットが使えます。
フォームの新規作成ボタンを押すと、編集画面に入る前に次のような画面が出てプリセットの選択が可能です。
よく使われるであろうフォームの形式が既に準備されているので、ちょっと設定するだけですぐにそれなりのフォームが完成してしまいます。
いやNinja Formsの使い勝手よすぎません？
ちなみに、最初から入っていた「Contact Me」のフォームはここにある「お問い合わせ」のプリセットと同じものです。
メールとアクションの設定
フォームの形が完成したら、次はメール等の設定をします。
上の画像のようにタブの「メールとアクション」をクリックすると、4項目の設定が可能です。
まずは確認メールから設定していきましょう。
一番上の「Store Submission」は何もしなくて大丈夫ですが、一応全項目について解説しますね。
Store Submission（ストア向け送信）
ストア向け送信と書かれていますが、送信データの保存設定だと思われます。
基本的にデフォルトのまま何も設定しなくてOKです。
送信データをWordPressの管理画面上から確認できます。
Ninja Form内の「送信」をクリック
すると、フォームから送信されたデータの一覧が確認できます。
当項目でデータ保存しない設定をした項目に関しては（redacted）と表示されます。
Email Confirmation（確認メール設定）
フォーム送信をしたユーザーに送られる、確認用メールの設定です。
{}で囲まれたコードが一部ありますが、これはフォームに入力したデータが出力されているだけです。
なお、コード内の番号は人によって違うものが表示されていると思うので画像と同じ番号にする必要はないので注意してください。
設定する箇所は図に示した3か所でOKです！
①返信先
ここには問い合わせを受け付ける用のご自身のメールアドレスを入力してください。
仮にユーザーが確認用メールに返信した場合には、ここで設定したアドレスにメールが届くようになります。
②件名
そのままメールの件名です。「お問い合わせを受け付けました。」などフォームに合った内容にします。
③メール本文
{all_fields_table}の部分には、フォームに入力された内容が表示されるようになっています。
それ以外の文面はお好きに整えてください。
Email Notification（通知メール設定）
次に通知メールの設定です。
先ほどの確認メールはユーザーに向けたメールですが、この通知メールはサイト運営者に届くメールです。
難しそうな感じがしますが、先ほども言ったように{}部分はプログラムで出力されるだけです。
宛先のメールアドレスはWordPressで設定しているメールアドレスで設定されているのでそのままでOKですが、もし変更したければ直接メールアドレスを入力しましょう。
通知メールで変更が必要なのは次の2か所です。
①件名
件名は英語になっているので日本語に直しましょう。
初期値の{}内には問い合わせした人の名前が出力されるようになっています。
②メール本文
見やすいように体裁を整えてみました。
デフォルトでは
{メッセージ本文}
-{名前}({メールアドレス})
となっているようなので、見やすいようにコードの順番も入れ替えました。
Success Message（送信完了メッセージ）
フォームから送信が成功した場合に、Webページに表示されるメッセージの設定です。
メッセージが英語なので日本語でそれっぽく記述すればOKです。参考文面を載せておきますね。
なお、{}内はメールアドレスが出力されるようになっているのでそのまま使います。
これでメール関係の設定は一通り完了です。
補足：コードでデータを出力する方法
何度か見かけている{}で囲まれたコードですが、初期設定されているものをそのまま使わなくても簡単に出せます。
上の画像で示したアイコンから、使えるコードを確認できます。
使いたいコードを選んでクリックすれば、コードが挿入されます。適宜使ってみてください。
高度な設定
高度な設定の項目は設定が必要になりそうと思われる部分に絞って簡単に取り上げます。
「高度な設定」タブから「設定を表示」をクリックします。
①フォーム名
フォームの名称を変更できます。②の項目でフォームタイトルを表示状態にしている場合、①で設定したフォーム名が表示されます。
②フォームタイトルを表示
フォーム出力したときにフォームにタイトルも表示するかどうかの設定です。
例えばお問い合わせページを個別に作ってそこにフォームを設定した場合、ページタイトルとフォームタイトルが両方出力されて被ることがあります。
ページタイトルだけで事足りる場合には、当項目をOFFにするとスマートですね。
すべての設定が完了したら、右上にある「完了」ボタンを押し、そのまま「公開」をクリックします。
上の画像のようになっていれば、フォームの設定は完了です。
Ninja Formsの設置方法とテスト
ここまでの設定でフォームは完成したので、実際に設置して機能するかどうか確認のテストをしましょう。
固定ページでお問い合わせページを作る
まず、設置先となるお問い合わせページを作っていない人は固定ページで作成しましょう。
※フォームの設置先がトップページやフッターなどの場合には、ページ作成は不要なので該当箇所に設置してください。
固定ページ→新規作成からページを作ります。
ショートコードを貼り付け
Ninja Formsのフォーム一覧画面にあるショートコードをコピーして、作成したお問い合わせページに貼り付けます。
ブロックエディタならこんな感じで、
クラシックエディタならこんな感じです。
ページタイトルも「お問い合わせ」にして、公開ボタンから公開するだけでOKです。
ページ内で貼り付ける場所を指定する必要が無ければ、編集画面の表示オプションの「Ninja Formsを追加」という項目から該当フォームを選択することで表示させることもできます。
それでは、実際に作成したページを見てみましょう。
※もし作成したページをグローバルメニューに追加したい場合はメニュー設定から設定を行ってください。確認だけであればプレビューからでも確認可能です。
当サイトの場合はこんな風に表示されました！あとは実際に機能するかをテストしてみます。
実際にメールが届くかテストしよう
では実際に、フォームを使ってメールが正常に送られるかどうかテストしてみてください。
おすすめなのは、受取先に設定したメールアドレスと違うメールアドレスをフォームに入力して確認してみることです。
もちろん同じメールアドレスなら2通届くので、まとめて確認してしまってもOKです。
しかし、「お問い合わせした人に届く確認メール」と「サイト運営者に届く通知メール」がどっちがどっちか分かりづらいので、分けてみることで両方の視点から確認がしやすいのでおすすめです。
無事メールが受信でき、表記に問題が無ければ、お問い合わせフォームの作成作業は終了となります。
どこかおかしければ設定を見直したり、文面が気になれば改良したりしてみてください。
プライバシーポリシーの設置も忘れずに
お問い合わせフォームを設置する場合、ユーザーの個人情報（名前やメールアドレスなど）を取得することになるため、プライバシーポリシーの作成と公開も必要になります。
特に初めてお問い合わせフォームを作った場合には、そもそも知らなかった！という人もいるかもしれません。
当記事ではプライバシーポリシーの作成方法までは触れませんが、忘れがちなので注意してくださいね。
まとめ：Ninja Formsは初心者おすすめの神プラグインだった
無事お問い合わせフォームを作れましたでしょうか？
Ninja Formsはかなり扱いやすいのに、お問い合わせフォームと言えば「Contact Form 7」や「MW WP Form」で定着してしまっているため、いまだに日本での知名度は低いようです。
正直言って、「なんでみんな使ってないの？」と思うくらい簡単なお問い合わせフォームのプラグインだと思いますし、これまで定番のお問い合わせフォームプラグインを使っていた人はNinja Formsのあまりの簡単さに驚いたのではないでしょうか。
少しでもこのプラグインの良さが伝わって、お問い合わせフォームに苦しむ人のお役に立てたら光栄です。