問い合わせページを作成するNinja Forms(ニンジャフォーム)の使い方

問い合わせフォーム作成のプラグインといえば「Contact Form 7(コンタクトフォーム7)」が知られてますが、じわじわ人気が高まってきてる「Ninja Forms(ニンジャフォーム)」を使用してます。

きじとら
項目の追加などが簡単に変更できるのが◎

 

早速設定していきましょう!

Ninja Formsの設定とお問合せページの作成

Ninja Formsでフォームを作成して、WordPressで問い合わせページを公開します。

Ninja Formsのインストールと有効化

「Ninja Forms」プラグインをインストール、有効化します。

↓このような画面がでたので、「NOT NOW」を選択。(「YES、I AGREE!」は情報提供の承諾)

きじとら
情報提供してもいいよ、という場合は「YES、I AGREE!」を選択。(個人を特定するデータは含まないようです)

ダッシュボードに「Ninja Forms」が追加されるので、新規追加へ進みます。

 

きじとら
ダッシュボードから新規追加へ進むこともできるよ

空のフォームを選択します。

右側にでてきた項目の中から、お問合せフォームに入れたい項目をクリックしていくと、左側に追加されていきます。

 

きじとら
・名前
・メール
・一行テキスト
・段落テキスト
・送信 を選びました。
(お好みでいいですが、「送信」を入れ忘れないようにします。)

 

各項目にカーソルを乗せると、アイコンが表示されます。

ちゃとら
左から、複製(コピー)・削除(ゴミ箱)・編集(歯車)だよ

編集(歯車)をクリックすると、ラベル名の変更ができます。

「お名前」に変更して、更に必須フィールドをON(右にスライド)にしました。

他の項目も同じように変更したら、次に「メールとアクション」へ進みます。

お問合せ送信時のアクション設定

ここでは、お問合せフォームを使用した際のアクションを設定していきます。

「成功メッセージ」は、お問合せフォーム送信後に表示される内容です。(デフォルトで使ってます)

「管理者のメールアドレス」は、問い合わせフォームが送信された際、ブログ管理者へ知らせる内容です。

ここはちょっと設定を変更しました。

アクション名がわかりにくいので「管理者への通知」に変更、件名を「(ブログ名)からのお問合せ」に変更しました。

宛先は、そのままにするとWordPressに登録したメールアドレスに送信されます。他のアドレスで受け取りたい場合は直接メールアドレスを入力すればOK。

きじとら
複数のブログを運営しているなら、件名にブログ名をいれておくと判別しやすくなります。

本文のところは、問い合わせ内容などがそのまま反映される設定になっているので変更していません。

自動返信メールの設定

もし、問い合わせを頂いた方に自動返信メールを送りたい場合は「メールとアクション」をクリックして、画面右下の「+」マークをクリックします。(項目を追加)

右側のリストから、「メール」を選択。

自動返信のアクションを設定していきます。

宛先が自分のWordPressに設定したアドレスになっているので、問い合わせ頂いた方のメールアドレスに変更します。

宛先のリストマークをクリックすると、項目がでてくるので「メール」をクリック。

ちゃとら
最初に入っていた項目(wp:admin_email)を消してから選択しないと、自分のアドレスも登録されたままになっちゃうよ

本文の(fields_table)は、問い合わせ内容を反映させるものなので、その上に自動返信用の文言を追加するといいでしょう。

↑実際はもっと丁寧に…

ちゃとら
思いつかなかったら「自動返信メール 例文」で検索するといいよ

ちなみに、「ストア向け送信」は使用しないので削除しました。(このブログでは自動返信も使用してません)

高度な設定

次に、「高度な設定」へ進みます。

表示設定をクリック。

フォームタイトルなどの設定を行っていきます。

フォームタイトル(Ninja Formsの管理画面に表示されるタイトル)を入力、フォームタイトルを表示をOFF(左にスライド)しました。

フォームタイトルをOFFにしたのは、固定ページに「お問合せフォーム」とタイトルを入れるからです。(重複を避ける)

完了したフォームに対する設定はどちらもONのまま。(問い合わせ送信後のアクションです)

プレビューもできるんですが、実際の表示とは少し違うし、ここからのテスト送信ができなかったので、公開へ進みました。(その後送信テスト)

ご丁寧にダブル確認。(もう一回「公開」をクリック)

右上の「×印(ウィンドウの×じゃないよ!)」をクリックすると、Ninja Formsのダッシュボードに戻ります。

問い合わせフォームを作成する(固定ページ)

Ninja Formsのダッシュボードに表示されるショートコード(今回作成したほう)をコピーします。

WordPressのダッシュボードから固定ページの新規作成へ進みます。

きじとら
投稿ページでも作れますが、固定ページを使うのが一般的だし、後から管理しやすいです。

先ほどコピーしたショートコードを記事エリアに貼り付けます。

きじとら
ビジュアルエディタでもテキストエディタでも大丈夫だけど、ビジュアルエディタに貼り付け際は、他の要素までコピペされちゃうこともあるので注意します。

タイトル、パーマリンクを設定して公開。

ブルー
必ず自分でテストメールを送信したほうがいいぞ(別のアドレスを使用)

ラベル名に間違いがないかどうかもあわせてチェック。

↓送信後の画面。

きじとら
高度な設定時に、問い合わせ送信後のアクション(フォームのクリア・非表示)をONにしたので、送信された感がわかりやすいですね。

自分宛てに問い合わせメールがちゃんと届くか、確認します。

自動送信も設定したなら、そちらもチェック。

これで安心。(文章はテスト用の見本です)

Ninja Formsの削除

Ninja Formsのダッシュボードに最初から入っているフォーム(Contact Me)があるんですが、新規作成せずにこちらを編集することもできます。

ぶち

デフォルトのやつは全部英語になってるから、新規作成したほうが楽なんだよね

デフォルトのフォームが不要の場合は、削除することもできます。

ダッシュボードから、削除したいフォームの歯車マークをクリック。

アクションを選択できるので、「削除」をクリック。

枠内に「DELETE」と入力(赤文字部分をコピペでOK)して、「削除」をクリック。

ちゃとら
「DELETE」と入力しないといけないことがわからなくて、きじとらちゃんが何度かイラっとしたのは内緒ね。

Ninja Formsの設定まとめ

コンタクトフォーム7に比べると、最初の設定は多いですが、項目の編集が簡単にできるのでNinja Formsの利用者はますます増えそうな予感。

個人ブログなら今回の設定のみで十分だと思いますが、後から変更もできるので、ブログ開設と同時に設定することをおすすめします。

はち
雑記ブログでも、企業からの掲載依頼などがくることってあるもんね

 

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事