【WordPress】Ninja Formsプラグインで簡単にお問い合せフォームを作成する手順

Ninja Formsプラグインで簡単にお問い合せフォームを作成する

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

WordPressでお問い合せなどのフォームを作成するプラグインとしては「Contact Form 7」の人気が高く利用している人も多いのですが、「Ninja Forms(ニンジャフォーム)」は海外のプラグインですが日本語に対応しているだけでなく、そのままでもデザイン性の高いお問い合せフォームなどがドラッグ&ドロップで操作できる簡単操作も魅力です。
また「Contact Form 7」単体ではできない送信履歴機能も用意されています。

今回は「Ninja Forms」の基本操作と実践的なお問い合せフォーム作成のコツをご紹介します。
住所の自動入力やラジオボタンを日本語で表示する方法と送信履歴の活用ついては、別の記事で紹介していきます。

「Ninja Forms」プラグインのインストール

「Ninja Forms」プラグインのインストール

WordPressの管理画面からプラグインを新規で追加します。

  1. キーワードに「Ninja Forms」と入力するとプラグインが表示されます。
  2. 「今すぐインストール」でインストールして「有効」にします。

「Ninja Forms」には有料版もありますが、アドオンの追加やマルチドメインなど特別な利用をしなければ無料版でかまいません。

今回作成するフォームは「デジてらす」のお問い合せフォームを参照して下さい。
https://diji-terrace.com/contact

お問い合せフォームの新規作成

お問い合せフォームの新規作成

WordPressの管理画面>Ninja Forms をクリックすると「Ninja Forms」のメニューが表示されます。
ダッシュボードをクリックすると「新規追加」ボタンと「Contact Me」という名前のサンプルお問い合せフォームがあります。
「Contact Me」のお問い合せフォームのラベルは英語になっていますが、日本語に書きかえるするだけですぐフォームを作れます。

しかし、今回は「Ninja Forms」の基本操作を紹介したいので、新規追加で始めていくことにします。

フォームの新規追加

フォームの新規追加、テンプレート

新規追加をクリックするとテンプレート一覧が表示されますが、こでは「空のフォーム」をクリックします。

フィールドの追加

左に空白のフォームフィールド、右に追加できるフィールド一覧が並びます。
操作は追加したいフィールドを左にドラッグ&ドロップするだけです。
最初に「一行テキスト」フィールドを追加します。

お名前」の入力欄を作成するのですが、フィールド一覧にある「名」と「姓」のフィールドでなく「一行テキスト」を追加して編集していきます。
続けてフィールドを追加してもかまいませんが、次の説明をするために一度右上の「完了」でフォームフィールド画面に戻ります。

フォームフィールドの操作

フォームフィールドの操作

追加した「一行テキスト」の近くにカーソルを移動すると、歯車のアイコンが表示されます。
更に歯車のアイコンの上にカーソルを移動すると、左から複製・削除・編集のアイコンが表示されます。
ここで、編集のアイコンをクリックすると、詳細設定をすることができます。

設定は追加するフィールドによって違う場合がありますが、基本的な「一行テキスト」の内容を紹介します。

フィールドの編集

フィールドの編集

ラベル フィールド名を変更できます。お名前と変更しておきます。
必須項目 必須フィールドを有効にすることで、必須フィールにすることができます。
制限・表示・高度な設定・管理の各項目で詳細設定をおこなうことができます。

詳細設定の一部を紹介しておきます

制限項目 入力マスクでは、入力内容を米国の電話番号・日付・通貨・カスタム(数字だけ半角アルファベットなど)これらはアメリカの英語基準で使いにくいですが、工夫次第で制限を加えることができます。
表示項目 プレースホルダーに入力例として山田 太郎と記載して姓名の間を空白にするように誘導してみました。
高度な設定項目 ラベルの表示位置がフィールドの上になっていますが、ここで変更できます。
管理項目 フィールドキー(フィールド固有の番号)を確認できます。

「完了」でフォームフィールドの画面に戻り、右上の「公開」をクリックします。

公開の設定

初めて「公開」をクリックすると、フォーム名を入力する画面が右側に表示されますので、ここでは「お問い合せ」とします。
また「送信ボタンを追加」が有効になっていますので、そのまま「公開」をクリックすると送信ボタンが追加されて公開(フォームが保存)されます。

プレビューモード

フォームフィールドタブの右上の「公開」でフォームを保存すると、右上タブの「高度な設定」の左に「Preview Changes」という目のアイコンのタブが追加されます。
「Preview Changes」をクリックすると完成イメージを確認することができます。

送信ボタンはラベルが英語表示になっていますので、歯車アイコンから編集して「メールを送信」などにラベルを変更しておきましょう。

フィールドの追加

フィールドの追加をしてフォームを作成していく

フィールドを追加しながら編集していきます。
各フィールドはドラッグ&ドロップで順序を変更することができます。
今回作成したフォームは上図のようになりました。使用したフィールドは「一行テキスト」・「メール」・「段落テキスト」・「送信」だけです。
公開」をクリックして保存してプレビューを確認して下さい。

Google reCAPTCHAを追加

「Ninja Forms」ではフォームのセキュリティ対策をおこなうことができます。
お問い合せフォームには迷惑メール(bot攻撃)が送られることもありますので、最低限の対策をすることをお勧めします。

Google reCAPTCHAにはv2と最新のv3がありますが、v2の方法を紹介していきます。

Google reCAPTCHAのタイプv2のAPIキーを取得
Google reCAPTCHAのタイプv2のAPIキーを取得
出典:Google reCAPTCHA

事前にGoogle reCAPTCHAのタイプv2のAPIキーを取得して「サイトキー」と「シークレットキー」を準備しておきましょう。
https://www.google.com/recaptcha/about/

Ninja Formsの設定
Ninja FormsのreCAPTCHA設定

WordPressの管理画面>Ninja Forms>設定>erreCAPTCHA設定
タイプv2とv3がありますので、v2にサイトキーとシークレットキーを設定します。

reCAPTCHA v2フィールドを追加

「reCAPTCHA v2」フィールドをフォームフィールドに追加します。
「reCAPTCHA v2」フィールドはフォーム「送信」フィールドの上がよいでしょう。またラベルの文字を削除しておくほうがスッキリします。

「Ninja Forms」には「スパム対策」フィールドも用意されていますが、こちらはHoneypot 保護機能による対策になりますので、ここでは使用しません。

Google reCAPTCHAの「Ninja Forms」での設定は以上ですが、Google reCAPTCHAのAPI取得の手順は省略しました。
取得の手順はお手数ですがインターネット上の情報を参照して下さい。

高度な設定タブの設定

高度な設定タブの設定

ここからフォームの仕上げをしていきます。

高度な設定の「設定を表示」をクリックすると、フォーム名にフォームの名前(今回はお問い合せ)が入力されています。これはフォームのタイトルになりますが、不要なら「フォームタイトルを表示」を非表示にします。

私は統一感を持たせるためにWordPressの見出しでフォームのタイトルを設定いますが、お好みで変更して下さ


メールとアクションタブの設定

メールとアクションタブでは3つの設定をしていきます。編集は歯車のアイコンからおこないます。

  • 成功メッセージ(フォームの送信が正常に送られたメッセージの設定)
  • 管理者メールアドレス(WordPressの管理者へのメール設定)
  • メール(フォーム送信者への自動返信メール設定

成功メッセージ

成功メッセージ

フォームの送信が正常に送られた時に、フォームのあった場所に正常に送られたメッセージが表示されます。
私はHTMLやCSSで見栄えよく設定してもいいですが、試行錯誤をして画像でメッセージを表示することにしました。

お問い合せありがとうございます

※お問い合せ画像は「名前を付けて画像を保存」で自由に使って下さい。

管理者メールアドレス

管理者メールアドレス
  1. アクション名はわかりやすい名前にしておきましょう。
  2. 宛先はWordPressの既定のメールアドレスに届くようになっていますが、任意のメールアドレスに送りたい場合は送りたいメールアドレスを記載します。
  3. 返信先は空欄のまま
  4. 件名はどのWebサイトからのお問い合せか分かるようようにしておきます。
  5. メール本文は{fields_table}となっていますが、これだとお問い合せフォームの記載内容だけが届くようになります。
    わかりやすくひと工夫してみましょう。
管理者メールアドレスを分かりやすくする

上図のように、誰からのお問い合せでどのような内容なのかをフィールドキーを挿入しながらまとめてあります。
このように各項目のフィールドキーを上手に使うことでわかりやすい内容にすることができます。

自動返信メール

お問い合せしていただいた人への自動返信メールは新規に作成する必要があります。
難しくありませんので、さっそく作成していきます。

自動返信メールの追加
  1. 新規アクションを追加
  2. アクションの一覧から「メール」をクリックします。
  3. メールの設定画面が表示されるので、自動返信用に設定を整えていきます。
自動返信メールの編集

基本操作は管理者メールアドレスと同じですが、メールの宛先に「メールフィールドキー」を設定することがポイントなります。
メール本文は上図を参考に編集してみて下さい。

設定が終わりましたら「完了」ボタンをクリックします。

WordPressにフォームを表示する

ショートコードをコピー

「Ninja Forms」のダッシュボードに完成したフォームが表示されいます。
ショートコードをコピーしてから、WordPressのフォームを表示したい箇所に「カスタムHRML」ブロックにショートコード貼り付けて完成です。

フォームの削除

フォームの削除

「Ninja Forms」のダッシュボードのフォール一覧からフォームを削除する場合は、右の歯車アイコンから削除をクリックすると、フォームを削除するダイアログボックが表示されます。
この時に半角大文字で直接「DELETE」を入力してから「削除」をクリックしないと削除できませんので注意して下さい。

「Ninja Forms」を利用した経緯

もともとは「Contact Form 7」を利用して各種フォームを作成していたのですが、「このサイトで重大なエラーが発生しました。」と表示されて使えなくなったのがきっかけでした。
フォームは1度作成するとチェックをおこなうことはほとんどないので、エラーに気づかずに長く放置されてしまうことがあります。
フォームを作成したらたまにはチェックする必要があると実感しているところです。

次回は「Ninja Forms」でお申し込みフォームを作成して、住所の自動入力やラジオボタンを日本語で表示する方法と送信履歴の活用など基本操作で触れなかった内容を紹介していきたいと思っています。

コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.