ブログの読者さんが「あなたにメッセージを送りたい!」と思ったときに活用できる
お問合せ機能のプラグイン「Ninja Forms」を紹介します。
このプラグインで
- お問合せフォームの設置
- メッセージが届いたときのあなたへの自動お知らせメール
- 読者さんからメッセージが届いたときの自動返信メール
が設定できます。
ブログへの設置方法も紹介していきますね(⑅•ᴗ•⑅)
Ninja Formsの導入、設定
プラグインの「新規追加」をクリックします。
![](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms.png)
検索窓に「ninja forms」と入力し、「今すぐインストール」をクリック。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms1-1024x449.png)
「有効化」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms2.png)
管理画面の左側に「Ninja Forms」が追加されました。「新規追加」をクリックします。
![](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms3-1.png)
「空のフォーム」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms4-1024x503.png)
お問合せ機能を設定する
➀名、➁メール、➂段落テキスト、④送信の順でクリックします。
左側の「フォームフィールドを追加」ところに反映されます。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms5-1024x460.png)
左側に反映された各フィールドにマウスを合わせると、右上に設定マークが出てきます。
クリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms6.png)
フィールドの名称を「名」から「名前」に変更。必須フィールドをクリックして緑色のonの状態にします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms7-1024x275.png)
メールも編集画面から必須フィールドをonにしましょう。
段落テキストも編集します。
名称を「段落テキスト」から「本文」に変更、必須フィールドをonにします。
完了をクリック。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms8-1-1024x449.png)
お問合せが来たとき あなたに送られるメールを設定する
次はお問合せが来たときに、あなたに送られるメールを設定します。
「メールとアクション」をクリック、「管理者メールアドレス」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms9-1024x553.png)
最初は↓のような画面になっているので、編集していきます。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms11.png)
返信先はお問い合せをした読者さんのメールアドレスに設定します。
返信先の右側をクリック、「メール」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms12.png)
すべて編集ができたら「完了」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms13.png)
お問合せをした読者さんへの自動返信メールを設定する
次はお問合せをしてくれた読者さんへの自動返信メールを作成します。
右下の「+」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms14-1024x429.png)
「メール」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms15.png)
最初は↓のような画面になっているので、編集していきます。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms16.png)
宛先は右側をクリック、「メール」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms17.png)
本文に読者さんの名前を入れます。
本文右上をクリック、「名」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms18.png)
本文の例
{field:field_1590910826080}様
お問合せありがとうございます。
72時間以内にさせていただきます。
{fields_table}
{fields_table}はお問合せをしてくれた読者さんの名前、メールアドレス、本文が自動で反映されます。
編集出来たら「完了」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms19-1.png)
次は「高度な設定」をクリック、「設定を表示」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms20-1024x273.png)
フォーム名に「お問合せ」と入力し「完了」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms21.png)
右上の「公開」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms22-1024x207.png)
「公開」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms23.png)
右上の「×」をクリックします。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms24-1024x119.png)
問い合せフォームの作成ができました。
作成したお問合せフォームをブログに設定したら完了です!
あともう少し頑張りましょう(*•ᴗ•*)و ̑̑
ブログにNinja Formsを設定する方法
問い合せフォームがを公開し「×」を押すと↓の画面になります。
サイト管理画面から「Ninja Forms」の「ダッシュボード」をクリックしても同じ画面になります。
先ほど作成したお問合せのショートコードをコピーしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms25.png)
お問合せの固定ページを作成します。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms37-1024x201.png)
- 固定ページの新規追加をクリック
- タイトルに「お問合せ」と入力
- 本文にコピーしたショートコードを貼り付け
- 公開するをクリック
作成した固定ページをブログの上に表示する設定をします。
外観の「メニュー」をクリック。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms28.png)
メニュー名に「ヘッダーメニュー」と入力し「メニューを作成」をクリックしましょう。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms29-1024x204.png)
ヘッダーメニューを作成していきます。
![](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms42-1024x431.png)
- 左のメニュー項目を追加、固定ページのお問合せをチェック
- メニューに追加をクリック
- グローバルナビとスマホ用ヘッダーにチェック
- メニューに保存をクリック
お問合せがブログの上に表示されるようになりました!
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms41-1024x391.png)
モバイルからの見え方も確認できます。
外観の「カスタマイズ」をクリック。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms31-1.png)
左下のモバイルマークをクリックすると、モバイルからの見え方が確認できます。
![ninjaformsの設定方法](https://haruka-adsense.com/wp-content/uploads/2020/06/plugin-ninjaforms39-1024x580.png)
お疲れさまでした(。•ㅅ•。)♡
「設定できた」「できなかった」一言はるかにメッセージをどうぞ!