お問合せフォームを設置する

ブログの読者さんが「あなたにメッセージを送りたい!」と思ったときに活用できる
お問合せ機能のプラグイン「Ninja Forms」を紹介します。

このプラグインで

  • お問合せフォームの設置
  • メッセージが届いたときのあなたへの自動お知らせメール
  • 読者さんからメッセージが届いたときの自動返信メール

が設定できます。

ブログへの設置方法も紹介していきますね(⑅•ᴗ•⑅)

Ninja Formsの導入、設定

プラグインの「新規追加」をクリックします。

検索窓に「ninja forms」と入力し、「今すぐインストール」をクリック。

ninjaformsの設定方法

「有効化」をクリックしましょう。

ninjaformsの設定方法

管理画面の左側に「Ninja Forms」が追加されました。「新規追加」をクリックします。

「空のフォーム」をクリックします。

ninjaformsの設定方法

お問合せ機能を設定する

➀名、➁メール、➂段落テキスト、④送信の順でクリックします。
左側の「フォームフィールドを追加」ところに反映されます。

ninjaformsの設定方法

左側に反映された各フィールドにマウスを合わせると、右上に設定マークが出てきます。
クリックしましょう。

ninjaformsの設定方法

設定マークの左側にある、削除ボタンでフィールドの削除ができます。
フィールドを間違えて選択したときに使ってください。

フィールドの名称を「名」から「名前」に変更。必須フィールドをクリックして緑色のonの状態にします。

ninjaformsの設定方法

メールも編集画面から必須フィールドをonにしましょう。

段落テキストも編集します。
名称を「段落テキスト」から「本文」に変更、必須フィールドをonにします。

完了をクリック。

ninjaformsの設定方法

お問合せが来たとき あなたに送られるメールを設定する

次はお問合せが来たときに、あなたに送られるメールを設定します。
「メールとアクション」をクリック、「管理者メールアドレス」をクリックします。

ninjaformsの設定方法

最初は↓のような画面になっているので、編集していきます。

ninjaformsの設定方法

返信先はお問い合せをした読者さんのメールアドレスに設定します。
返信先の右側をクリック、「メール」をクリックします。

ninjaformsの設定方法

すべて編集ができたら「完了」をクリックしましょう。

ninjaformsの設定方法

お問合せをした読者さんへの自動返信メールを設定する

次はお問合せをしてくれた読者さんへの自動返信メールを作成します。
右下の「+」をクリックしましょう。

ninjaformsの設定方法

「メール」をクリックします。

ninjaformsの設定方法

最初は↓のような画面になっているので、編集していきます。

ninjaformsの設定方法

宛先は右側をクリック、「メール」をクリックします。

ninjaformsの設定方法

本文に読者さんの名前を入れます。
本文右上をクリック、「名」をクリックしましょう。

ninjaformsの設定方法

本文の例
{field:field_1590910826080}様
お問合せありがとうございます。
72時間以内にさせていただきます。
{fields_table}

{fields_table}はお問合せをしてくれた読者さんの名前、メールアドレス、本文が自動で反映されます。

編集出来たら「完了」をクリックしましょう。

ninjaformsの設定方法

次は「高度な設定」をクリック、「設定を表示」をクリックします。

ninjaformsの設定方法

フォーム名に「お問合せ」と入力し「完了」をクリックします。

ninjaformsの設定方法

右上の「公開」をクリックしましょう。

ninjaformsの設定方法

「公開」をクリックします。

ninjaformsの設定方法

右上の「×」をクリックします。

ninjaformsの設定方法

問い合せフォームの作成ができました。

作成したお問合せフォームをブログに設定したら完了です!
あともう少し頑張りましょう(*•ᴗ•*)و ̑̑

ブログにNinja Formsを設定する方法

問い合せフォームがを公開し「×」を押すと↓の画面になります。
サイト管理画面から「Ninja Forms」の「ダッシュボード」をクリックしても同じ画面になります。

先ほど作成したお問合せのショートコードをコピーしましょう。

ninjaformsの設定方法

お問合せの固定ページを作成します。

ninjaformsの設定方法
  1. 固定ページの新規追加をクリック
  2. タイトルに「お問合せ」と入力
  3. 本文にコピーしたショートコードを貼り付け
  4. 公開するをクリック

作成した固定ページをブログの上に表示する設定をします。
外観の「メニュー」をクリック。

ninjaformsの設定方法

メニュー名に「ヘッダーメニュー」と入力し「メニューを作成」をクリックしましょう。

ninjaformsの設定方法

ヘッダーメニューを作成していきます。

  1. 左のメニュー項目を追加、固定ページのお問合せをチェック
  2. メニューに追加をクリック
  3. グローバルナビとスマホ用ヘッダーにチェック
  4. メニューに保存をクリック

お問合せがブログの上に表示されるようになりました!

ninjaformsの設定方法

モバイルからの見え方も確認できます。
外観の「カスタマイズ」をクリック。

ninjaformsの設定方法

左下のモバイルマークをクリックすると、モバイルからの見え方が確認できます。

ninjaformsの設定方法

お疲れさまでした(。•ㅅ•。)♡