WordPress関連

WordPressの問い合わせフォーム Ninja Forms の基本的な使い方まとめ 

WordPressの問い合わせフォームのお問い合わせフォームの定番といえば、「CONTACT FORM7」です。

私も最近まで使っていたのですが、ちょいちょい不具合が出るようになりました・

まずは、GoogleAnalyticsのコンバージョン設定が反映されなくなりました。

最近は、お問い合わせフォームから送信できない、送信したけど私にはメールが全く届いていないなどの不具合です。

使用するブラウザの環境が原因でしょうかね。

お問い合わせフォームがちょいちょい機能しなくなるのは困ります。

そこで、CONTACT FORM7に変わるお問い合わせフォームがないかなと探していたら・・・

見つけました!

Ninja Forms – The Easy and Powerful Forms Builder

「Ninja Forms」です。

早速、「Ninja Forms」について解説します!

「Ninja Forms」と「CONTACT FORM7」の違いは?

「CONTACT FORM7」のメリット

  • 日本人の方が作っているのでわかりやすい!
  • 日本語対応
  • デフォルトのフォームなら簡単に作れる
  • 超有名なフォームなので、解説記事もたくさん!
  • 日本のWordPressテーマは、ContactForm7を使うことを前提でデザインしているものが多い

「CONTACT FORM7」のデメリット

  • フォームをカスタマイズしようとするには最低限のHTMLの知識は必要
  • 環境(サーバー、メールシステムなど)によって、フォームから送信されたはずの情報が一切届かないなどの不具合あり
  • 言われているほど初心者向きではない

「Ninja Forms」のメリット

  • HTMLの知識は不要
  • ドラッグアンドドロップで操作可能
  • 今のところは不具合なし
  • ほぼ日本語対応
  • カスタマイズの自由度が高い
  • カスタマイズも専門知識不要

Ninja Forms」のデメリット

  • 解説記事が少ない
  • 英語表記が多い

今のところ、これくらいかと!

早速、「Ninja Forms」の使い方を解説します!

「Ninja Forms」をインストールしましょう!

WordPressのプラグインの基本中の基本ですね。

WordPressダッシュボードの『プラグイン』⇒『新規追加』で右上の検索窓に「Ninja Forms」と入力。

「Ninja Forms – The Easy and Powerful Forms Buider」をインストールして有効化します。

以上です!

基本的なお問い合わせフォームを作成します!

  • お名前
  • メールアドレス
  • お問合せ内容
  • 送信ボタン

のシンプルなフォームを作成します。

まずは「Ninja Forms」「新規追加」です。

こんな画面が出てきますので、

お問い合わせをクリックします。

項目のラベルを変更します

例えば、「名前」という名前を「氏名」に変更するなど、項目のラベルを変更する方法です。

項目の歯車ボタンをクリック

ラベルを変更すると、項目ラベルが変更されます。

英語表記だとわかりにくいので、日本語表記に直しましょう!

項目を入力必須にするには?

さらに項目の設定画面の中で「入力必須」か「任意」に切替えることが可能です。

必須フィールドのスイッチを左右に切替できます。

他にも細かい設定項目がありますが、基本的にはいじらなくてもOKです。

各項目の編集が完成したら「終了」ボタンをクリック

あとは右上の『終了』をクリック。

 

※ちなみにこの項目の順番は、ドラッグ&ドロップで入れ替えることができます。

メールの設定

 

メールとアクションをクリックします。

すると

  • Store Submission(データのエクスポートをするメールアドレスの設定)
  • Email Confirmation(問い合わせ内容など)
  • Email Notification(問合せがあったことをこちらに知らせます)
  • Success Massage(送信できましたよのメッセージ)

があります。

それぞれ設定していきます。

Store Submission(データのエクスポートをするメールアドレスの設定)

この項目はデフォルトのままで大丈夫です。

Email Confirmation(問い合わせ内容)

アクション名、メールの送信先、返信先を入力します。

Email Notification(問合せがあったことをこちらに知らせます)

 

返信先は、アイコンから「メール{field:email~~~~~}」を選択してください。

これで、あなたが受信するメールの設定はOKです。

自動返信メール

右下の➕ボタンから新規作成で、メールをクリックします。

同じような画面が出てきますので、入力していきます。

アクション名、メールの送信先、返信先を入力します。

宛先の部分は、「メール{field:email~~~~~}」を選択します。

フォームのタイトルを決める

作成したお問い合わせフォームにタイトルを付けます。

「高度な設定」をクリックします。

フォームタイトルを適当に付け、フォームタイトルを表示というメニューはOFFにします。

「終了」をクリックして、基本的なフォームはこれで完成です。

作ったお問合せフォームをテストする

フォームが動くかどうかテストします。

「Preview Form」をクリックします。

にプレビューが出るので、適当に内容を入力します、

送信ができたら、2通メールが届くか確認してください。

  • サイト運営者側としてメールが受信ができているか
  • 送信者側として自動返信メールが来ているか

この2つが確認できればテスト送信は完了です。

ちなみに、「THIS FIELD IS PERSONALLY IDENTIFIABLE DATA」の項目は、「個人が特定できる情報の項目です」という意味なので、個人情報を入力してもらう項目(名前、メールアドレス、住所、電話番号、生年月日など)の時にはアクティブ(ON)にしておいた方がよさそうです。

個人情報取り扱いの観点から見て、ビジネスに向いているお問い合わせフォームプラグインかと思います。

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

あとは作成したお問合せフォームを設置しましょう。

ではNinja Formsのフォーム作成画面の右上の「公開」ボタンをクリックします。

あとは、コピーしたショートコードを貼り付ければ大丈夫です!

サンクスページに飛ばす設定

コレから先は、設定する必要はありませんが、設定しておけば便利かも! という設定です。

暇なときにでもやってみてください。

固定ページでサンクスページを用意する

お問合せやお申込みに感謝を伝えるページを作ります。

また、お問合せやお申込みをしたユーザーに+αで伝えたいことがあれば記載しましょう。

新規で固定ページを作成します。

作る際は、サンクスページですから、メニューには追加せず、no index no followにするといいでしょう!

Ninja Formsでサンクスページに飛ばす設定をします

まずは「Ninja Forms」⇒「ダッシュボード」から作成したお問合せフォーム(申込みフォーム)のタイトルをクリック。

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

次に右下の➕ボタンをクリックします。

「リダイレクト」をクリックします。

次にURLの部分に、作った固定ページのサンクスページのURLを入力します。

次に「公開」ボタンをクリックすればOKです。

これで、お問い合わせフォームやお申込みフォームから送信後にサンクスページに飛ばすことができます!

Googleアナリティクスでコンバージョンとして計測させる方法

先ほど作成したサンクスページに到達した数をGoogleアナリティクスの「目標」に設定して、Googleアナリティクスでコンバージョンとして計測します。

Googleアナリティクスの「目標」に、で指定したサンクスページに到達した数をカウントされるようにするための設定方法

まずは、Googleアナリティクスのサイトにいきましょう!

Googleアナリティクスへ

アナリティクスでは、左下の「管理」をクリック

次に目標をクリック

次に「新しい目標」という赤いボタンをクリック

 

目標設定の「カスタム」にチェックを入れます。

「続行」ボタンをクリックして、目標の説明を「名前はどんな目標なのか分かりやすく入力」タイプは「到達ページ」にチェックして「続行」

 

目標の詳細では、到達ページは「等しい」にして右側の空欄には、先ほど設定したサンクスページのURLを入力。

これで『保存』をクリック!

 

目標設定は完了です。

CVが計測されるかテストしましょう

Googleアナリティクスの「リアルタイム」の「コンバージョン」をクリック

次に、あなたが作ったNinja Formsのお問合せフォームで実際に送信をしてみてください。

送信が完了して、サンクスページに飛ぶことを確認して・・・

ここで、先程設定した目標の数字が「1」とカウントされれば設定ができています。

ここまでで、基本的な設定は終わりです。

まとめ

私自身、まだあまりいじれていないのですが、たくさん機能がありそうです。

ラジオボタンの設定もできますので、ぜひトライしてみてください。

The following two tabs change content below.
アバター
ながさき整骨院 代表 川崎浩司 厚生労働大臣免許 柔道整復師 豊島区池袋の近く東長崎で完全予約制・完全自費の整骨院をやっています。 プライベートのこと、仕事していて感じたこと、思ったことを書いています。

-WordPress関連

© 2020 川崎です。