「WordPressで作ったWEBサイトにお問い合わせフォームを設置したい!」

そんなときに便利なのがプラグインの「Ninja Forms」です。

 

この記事では、Ninja Formsの導入と初期設定の方法を解説していきます。

 

 

※お問い合わせプラグインの有名どころとして「Contact Form7」というものあります。

ですが最近、リスペクトしているデジタルマーケッターの松原潤一さんが「Contact Form7不具合出るやん・・・」と言っていたのでNinja Formsを試してみることにしました。

 

今回は、初めてNinja Formsを使ってみる様子を記事にしていきます!

 

 

お問い合わせフォームプラグイン「Ninja Forms」をインストールしよう

まずはWordPressに、プラグインのNinja Formsをインストールします。

 

ダッシュボードのプラグイン新規追加画面にて、右上の検索窓に「Ninja Forms」と入力。

該当のプラグインが見つかったら「インストール」ボタンをクリックしましょう。

Ninja Formsインストール

 

 

次に「有効化」をクリック!

Ninja Forms有効化

 

これでプラグインが有効化されました。

 

 

【Ninja Formsの初期設定①】フォームに表示する項目を準備する

ここから、実際に使用するお問い合わせフォームを作っていきます。

まずは、ダッシュボード左側の[Ninja Forms]の項目から[新規追加]を選んでクリックしましょう。

Ninja Forms初期設定

 

 

次の画面で「空のフォーム」をクリック。

Ninja Forms初期設定

 

 

お問い合わせフォームに設定する項目を選ぶ画面になります。

右側にたくさん項目が並んでいるので、必要なものをポチポチクリックしていきましょう。

クリックすると、左側に反映されます。

Ninja Forms初期設定

 

 

項目を並び替えたいときは、マウスでドラッグしながら移動させます。

Ninja Forms初期設定

 

 

お問い合わせフォームに表示される名前を変えたり、入力必須にしたい場合は、それぞれの項目の右側にある歯車マークをクリックします。

Ninja Forms項目の詳細設定

 

 

右側に設定を変える欄が出てくるので、必要に応じて編集しましょう。

Ninja Forms詳細設定

 

 

それぞれの項目について編集が終わったら、右上の「終了」をクリックします。

Ninja Forms設定

 

 

【Ninja Formsの初期設定②】お問い合わせ送受信の設定

次に、実際にフォームからお問い合わせがあった場合の送受信設定をしていきます。

「メールとアクション」をクリックしましょう。

Ninja Forms送受信設定

 

 

画面が変わったら「管理者のメールアドレス」という項目をクリックします。

Ninja Forms 管理者のメールアドレス

 

 

右側に編集画面があらわれます。ここではお問い合わせを受信したときの設定をおこないます。

「宛先」「返信先」「件名」の3つを編集していきます。

Ninja Forms受信設定

 

 

●宛先
⇒最初に入っている文字を消して、お問い合わせを受信するあなたのメールアドレスを入力。

●返信先
⇒右側の四角いボタンをクリックして別窓を表示させたら、「メール」をクリックします。すると値(送り主のメールアドレス)が自動で設定されます。

Ninja Forms 受信設定

 

●件名
⇒「ホームページからのお問い合わせ」など、受信したときに分かりやすい件名を付けておきます。

 

 

ここまでできたら、右上の「終了」をクリックしましょう。

Ninja Forms 受信設定

 

 

次に、お問い合わせをした方に向けて、自動返信メールを作成します。画面右下の「+」ボタンをクリックしましょう。

Ninja Forms 自動返信メール

 

 

次の画面で「メール」の項目をクリック。

Ninja Forms メール

 

 

それぞれの項目について編集をしていきます。

Ninja Forms 自動返信メール

 

●アクション名
⇒「自動返信メール」と入力

●宛先
⇒最初に入っている文字を消して、右側の四角いボタンをクリックして別窓を表示させたら、「メール」をクリックします。すると値(送り主のメールアドレス)が自動で設定されます。↓↓

Ninja Forms 自動返信メール

 

●返信先
あなたのメールアドレスを入力。

●件名
自動返信メールに付けられる件名です。「お問い合わせありがとうございます」などと入力しておきましょう。

●メール本文
自動返信メールの本文に当たります。お問い合わせ内容を示す{fields_table}の前に、「お問い合わせありがとうございます。以下の内容で承りました」などと付け足しておくと親切です。↓↓

Ninja Form 自動返信メール

 

 

ここまでできたら、右上の「終了」をクリックしましょう。

Ninja Forms 自動返信メール

 

 

初期設定はいよいよ最終段階です。「高度な設定」をクリックしましょう。

Ninja Forms 高度な設定

 

 

次に「表示設定」をクリック。

表示設定

 

 

フォームタイトルを入力したら、「フォームタイトルを表示」をOFFに。そして「終了」をクリックしましょう。

Ninja Forms 表示設定

 

 

お問い合わせフォームの設置とテスト

右上の「公開」をクリックして、作成したお問い合わせフォームを公開します。

Ninja Forms公開

 

 

次の画面でも「公開」をクリックします。

Ninja Forms公開

 

 

画面が切り替わったら、右上の「×」ボタンをクリックしましょう。

Ninja Forms 公開

 

 

作成したお問い合わせフォームのショートコードが表示されます。

このショートコードをコピーしておきます。

Ninja Forms ショートコード

 

 

WordPressの固定ページなど、お問い合わせフォームを設置したい場所にコピーしたショートコードを貼り付けて公開します。

Ninja Form ショートコード貼り付け

 

 

これで、お問い合わせフォームがWordPressに設置できました。

Ninja Form 設置

 

 

あとは、正しく動くかどうかテストです。

設置したお問い合わせフォームから、試しに必要事項の入力と送信をしてみて、

 

  • お問い合わせを受け取りたいメールアドレスに届いているかどうか?
  • 入力したメールアドレスに自動返信メールが届いているかどうか?

それぞれ、確かめてみましょう。

 

 

まとめ

WordPressにプラグイン「Ninja Forms」を使って、お問い合わせフォームを設置する方法を解説しました。

「Contact Form7」から乗り換えた方は、初期設定に慣れるまでちょっと時間がかかるかもしれませんが、結構直感的に操作できるので難しくはないと思います。

 

お問い合わせを受信するメールアドレスと、自動送信メールの送信先の設定は間違えないように注意してくださいね!

 

 

ちなみに・・・

Ninja Formsで作ったお問い合わせフォームに、スパムブロックの「reCAPTCHA」を設置したい!

reCAPTCHAとはこんなの↓

reCAPTCHA v2

 

reCAPTCHA設置のやり方を知りたい方は、こちらの記事を参考にどうぞ↓↓