手順5)プラグインの設定をしよう【その2:Ninja Forms】
今回から、WordPressのオススメプラグインを設定していきましょう。
最低限入れておきたいプラグインは、以下の4つです。
- Ninja Forms Contact Form – The Drag and Drop Form Builder for WordPress★今回はコレ
- hCaptcha for WordPress
- Webp converter for Media
- WP Multibyte Patch
このページでは、Ninja Formsというお問い合わせフォームを作るためのプラグインを設定していきましょう。
お問合せフォームが作れるプラグイン「Ninja Forms」
プラグインのインストール方法は、前回の「手順4)プラグインの設定をしよう【その1:プラグインのインストール方法と削除方法を覚えよう】」でお伝えしています。
まずは、WordPressダッシュボードの左メニューで「プラグイン」⇒「新規追加」で「Ninja Forms」で検索すると、以下のアイコンが出てきます↓↓ こちらをインストールして有効化しましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms1.png)
Ninja Formsを設定してシンプルなお問合せフォームを作ろう
↓ WordPress左のメニューで「Ninja Forms」⇒「新規追加」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms2.png)
↓ 「YES. I AGREE!」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms3.png)
↓「空のフォーム」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms4.png)
↓ 右の方から追加したい項目を選んでいきます。まずは「名」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms5.png)
↓ すると左の方に「名」というフォームが入ります。名のところの「歯車マーク」をクリックします。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms6.png)
↓ ラベルを「お名前」、必須フィールド「オン」を押して「完了」をクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms7.png)
↓ 続いて「メール」の項目を追加していきます。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms8.png)
↓ メールの設定ボタン(歯車)をクリックします。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms9.png)
↓ ラベルを「メールアドレス」、必須フィールドを「オン」にして「完了」ボタンをクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms10.png)
↓ 続いて「段落テキスト」の項目を追加しましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms11.png)
↓ 追加した段落テキストの設定ボタン(歯車)をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms12.png)
↓ ラベルを「お問い合せ内容」、必須フィールドを「オン」にして「完了」ボタンをクリック。
![Ninja-Forms14](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms14.png)
↓ 続いて「送信」ボタンを追加します。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms15.png)
↓ 送信ボタンが追加されたら「設定(歯車)ボタン」をクリック
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms16.png)
↓ 右上の「完了」ボタンをクリック
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms17.png)
↓ 続いて「メールとアクション」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms18.png)
↓ 「管理者メールアドレス」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms19.png)
↓ 以下のように操作していきます。
- 宛先を「あなたのメールアドレス」を入力
- 件名は「サイトからお問合せがありました」などあなたのメールフォルダに来た時に分かりやすいように入力
- 返信先の右の方のグレーのボタンをクリック
![Ninja-Forms22.5](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms22.5.png)
↓ 返信先の右の方のボタンを押すと、以下のような画面が出ます。「メール」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms21.png)
↓ 返信先に{field~~}が入ります。そしたら「完了」ボタンをクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms22.png)
↓ 続いて右下の「+」ボタンをクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms23.png)
↓ 次に「メール」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms24.png)
↓ アクション名「自動返信メール」、あらかじめ宛先に入っているものを消し、横のボタンをクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms25.png)
↓ メニューが出てくるので、「メール」をクリックして選びましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms26.png)
↓ 以下のようにそれぞれの項目を入力して「完了」を押します。
- アクション名:自動返信メール
- 宛先:宛先ボタンから「メール」を選んだもの
- 返信先:あなたのメールアドレス
- 件名:「例:【自動返信】お問合せありがとうございます」などと入力します。
- メール本文:相手の方に届いても良い内容を入力します。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms27.png)
↓ 続いて「公開」をクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms28.png)
↓ フォーム名を入力して「公開」ボタンをクリック
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms29.png)
↓ ここまでできたら右上の「×」ボタンをクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms30.png)
ここまでで、フォーム作りは完了。
続いて、出来上がったフォームをWebサイトに設置していきあす。
固定ページにお問合せフォームを設置しよう
↓ 出来上がったフォームのショートコード部分をコピーします。(「Ninja Forms」⇒「ダッシュボード」で以下の画面が開きます)
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms31.png)
↓ 「固定ページ」⇒「新規追加」をクリック
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms32.png)
↓ 初めて固定ページ作る画面に行くと、ブロックエディターのチュートリアルが出ます。「×」で消しましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms33.png)
↓ タイトルを「お問合せフォーム」、本文にコピーしたショートコードを貼ります。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms34.png)
↓ パーマリンクのURLスラックを「contact」などと入力しましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms35.png)
↓ 右上の「公開」ボタンをクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms36.png)
↓ 確認が出るので再度「公開」をクリック。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms37.png)
↓「固定ページを表示」をクリックしましょう。
![Ninja-Forms](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms38.png)
↓ 以下のようにお問合せフォームが出ていればまずはOKです。
![Ninja-Forms39](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/Ninja-Forms39.png)
試しに送信してみてください。
- 管理者宛(自分宛て)に管理者向けメール
- 送信者向けに自動返信メール
が届いていればバッチリオッケーです。
以上で今回のプラグイン「Ninja Forms」の設定は完了です。
続いて別のプラグインの設定にいきましょう。
結果を出すために、派手さはいらない
「集客」に使うことだけを徹底的に考えて作ったWordPressテーマ
![deerのロゴ(白)文字入り](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/6fc9dfa4a44ab47d794f3145134a7d91-2.png)
決して多機能ではありませんが、使う機能を必要最低限に限定してシンプルにしているからこそ使いやすい、初心者さんに優しいテーマです。