【2018/10/3改!】WordPressのお問い合わせフォームプラグイン「Ninja Forms」が最高だった件

ワードプレスあれこれ
記事内に誤った情報がありました。申し訳ありませんでした。
2018/10/3付で訂正します。

 

こんにちは!

OffBeat松本です。

 

 

ついに…

ついに見つけた……

 

最強のお問い合わせプラグインを…

 

 

 

ちなみに、一般的なWordPressのお問い合わせフォームプラグインと言えば、ContactForm7。

国産だし。みんな使ってるし。と流されるままに使っているそこのあなた!!!と昨日までの私!

 

 

完全に圧倒的おススメできるプラグインを発見したので、鼻息荒く徹底解説してみます!

 

WordPressプラグイン「Ninja Forms」とは??

 

私が見つけた最高のお問い合わせフォームプラグイン…

 

その名もNinja Forms! 

 

ニンジャフォームズ!!!?

忍者?????

 

 

意気揚々と「ニンジャ」を名乗る日本人は珍しいな…と思ったら、やはり制作者は海外のチーム。

 

直感的な UI のフィールドをドラッグ & ドロップすると、お問い合わせフォーム、メール登録フォーム、注文フォーム、支払いフォームなどを作成したり、メールを送信したりできます。

 

ということでよく分からないけど早速使ってみよう!!

 

 

ちなみに、私はこれから、ContactForm7から完全にNinja Formsに乗り換えます。

ある程度使い慣れた人でも乗り換えるメリットが大ありです…!

 

ググると、数少ない日本語サイトのうち、「Ninja Formsに脆弱性」という記事がヒットしますが、よく読んでください。「最新版なら問題ない」という記事なので大丈夫です。

 

お問い合わせフォームプラグインNinja Formsの使い方を徹底解説!

 

まずはプラグインを入れて、有効化まで!

 

プラグイン→新規追加から、右上の検索窓に

Ninja Forms

と入力。

 

Ninja Forms1

 

インストール、有効化をクリック。

 

ちなみに、玉石混交の数多あるプラグインから安心できるものを見つけるコツですが、

  • インストール数がある程度多いこと
  • 最終更新が最近なこと(数年前とかはNG)
  • 使用中のWordPressバージョンとの互換性が「あり」と表示されていること

このあたりに気を付ければ、変なプラグインを入れてしまう悲劇を防げると思います。

その点、Ninja Formsはクリアしています。

 

 

 

Ninja Formsで入力欄の設定をしよう

 

いよいよ設定していこう。

Ninja Formsの新規追加と進むと、デフォルトで1つフォームが作成されている。

「Contact Me」というフォームがあるので、右の歯車マークから編集に進んでもいいし、

 

Ninja Forms3

 

新しいフォームを1から作ってもOK。

 

Ninja Forms4

 

作ることが出来るのは、

  • 空のフォーム(中が空っぽ)
  • お問い合わせ
  • イベント登録
  • 見積りリクエスト

の4種類。

 

空フォームはともかく、3種類もテンプレートがあるのはありがたい!

 

 

 

今回は、Contact Meを編集してみることに。

 

歯車マークから、編集と進むと編集画面に行くことが出来る。

直感で分かるので初心者さんでも使いやすいはず!

余談だけど、「直感で操作できる」を謳っていて本当に直感で操作できるプラグインに始めて出会いました…

歯車マークにマウスを持っていくと、他にもマークが出てくる。

左から、複製、削除、編集。

 

という訳で、一番上のNameから編集。

 

これを、

 

こう!

 

 

詳細設定を以下のようにすると…

 

 

実際の表示はこのように。

ヘルプテキストは項目右に出るiマークにマウスオーバーで表示。

説明は入力欄の上に表示。

プレースホルダーは入力例。

 

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

「このフィールドで取り扱うのは個人情報ですか」と確認してくれるお問い合わせフォームプラグインを始めてみました。

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

 

 

同じようにメールアドレス欄も、デフォルトの英語を日本語に。

 

 

Messageはこのように。

 

 

最後に、Submit(送信)欄はこのようにして丁寧な感じに。

 

いいですか!

めっちゃ簡単!!!

 

 

ちなみに、「もっと項目を足したい」という場合には、画面右下の+をクリックすると…

 

 

これだけの項目を簡単に加えることができます!!!

最高か!

 

 

項目の位置を入れ替えたい時には、ドラッグ&ドロップでできます。

うひょー――!

 

Ninja Formsでメールの設定をしよう

 

さあ次に、メールなどの設定をしていきます。

 

メールとアクションをクリックすると、上から

  • Store Submission(お問い合わせがありましたよ!というこちらへの連絡)データのエクスポートをするメールアドレスの設定
  • Email Confirmation(自動返信メールなど)
  • Email Notification(もう一個メールが送れるらしい)問合せがあったことをこちらに知らせます
  • Success Massage(送信できましたよのメッセージ)

があるので、それぞれ設定していこう!オー!!

 

 

ストア向け送信は、これを

 

このように。デフォルトのままで大丈夫です。

 

ストア向け送信(事業者への通知)なので、問合せ内容をきちんと把握するために、内容を追加します。

上記画像の赤枠の、新規追加とプルダウンから、入力内容を追加していくこと、逆に削除することもできます。

 

 

続いて、問い合わせてくれた方への自動返信メールを設定!

デフォルトで宛先のメールアドレス、記入してもらった内容の一覧は表示されているので…

 

このように編集!

本文編集欄の右上にある、赤枠のアイコンから、記入してもらった情報を呼び出せるので、

「名前」様

という宛名も簡単につけられる!

 

 

そして最後に、「成功メッセージ」という、送信できましたよメッセージを編集。

 

Before↓

 

After!!↓

メールを送る機能が2つあるが、よっぽどでない限り使わないと思うので、必要ない機能はオフにするか削除しておこう。

 

もう一つのメールが、こちらへ問合せがあったことを知らせるメールでした!すみません!!

なので、下の画像のように設定すると良いかと思います!

 

ここまで来たらあと少し!!

 

高度な設定→表示設定と進んで、

  • フォームタイトルを編集
  • フォームタイトルの表示の有無
  • 送信が済んだフォームを表示するかどうか

などを設定しよう!

 

 

Ninja Forms完成!!!

 

お疲れさまでした!

Ninja Formsでのお問い合わせフォームが完成しました!!

 

 

公開→右上の閉じる(×)をクリックして…

 

 

 

赤枠のショートコードを、お問い合わせフォームを貼り付けたい記事にコピー&ペースト!!!!!

 

※ビジュアル編集メードではなく、テキスト編集モード(上記画像の右赤枠)が確実です

 

 

表示されるか、お問い合わせが届くか、自動返信メールが届くか、チェックしてみましょう!

 

 

お問い合わせフォームの削除は…?

 

ちなみに、「もう使わないな…」「作ったけど失敗失敗!」という時のフォームの削除も簡単。

 

右の歯車マーク→削除をクリック。

 

 

うっかり削除を防ぐためなのか、「DELETEって入れてよ」と出てくるので、そのように入力して削除完了。

 

 

お問い合わせフォームプラグインNinja Formsが最強な3つの理由

ウソ偽りなし!専門知識がゼロでできる!!

 

フォームの設置には若干の作業が必要なNinja Forms。

英語大丈夫なら作業いりません。ほぼ翻訳の作業です。

 

でも、それでも初心者さんに全力でおススメするのは、専門知識が本当のゼロで作れてしまうから!!

 

ContactForm7も、すぐにお問い合わせフォームが設置できる素晴らしいプラグイン。

だけれども、デフォルトのフォームじゃなく、ちょっといじろうと思ったらどうしてもHTMLの知識が必要になってしまうのが難しいところ。

 

その点、Ninja Formsは本当に専門知識ゼロで完成できる。

 

WordPressを始めたばかりの人にこそ使ってほしい!!!

 

初心者に一番優しい!

 

WordPressをちょっといじろうとすると、すぐに英語の壁が出てくる。

 

HTMLもCSSも、PHPもJavaScriptも(なんだそれだよね)英語がベースで書かれているから。

 

英語が苦手な人にとっては訳が分からないし、ましてWordPressを使い始めたばかりに人にはまさに「何が何やら」状態だ。

 

 

でも、Ninja Formsなら「Name」「Email」「Massage」「Submit(送信)」だけ分かれば何とかなる。

分かりにくい所は解説しておいたからね!

 

これほど初心者さんに優しいお問い合わせフォームプラグインは見たことがない!

 

カスタマイズの自由度が高い!!!

 

そしてこれ!!

 

一般的なお問い合わせフォームプラグインContactForm7で、ちょっと見た目をカスタマイズしようとすると、やれHTMLだCSSだと出てくる。

 

出てくるけど、詳しくない人にはハードルが高すぎる。

 

記入例を表示するには…?

チェックボックスを出すには…?

参加するお子さんの名前や年齢も記入してもらうには…?

希望の日程を第3希望まで入れてほしい…

 

など、難しい操作が直感で簡単にできる!

この操作性の高さも、Ninja Formsのおすすめポイントです。

 

 

他のお問い合わせフォームプラグインと比較考察

ContactForm7

言わずと知れた、超有名、王道のお問い合わせフォームプラグイン。

お問い合わせフォームを1つくらいしか置かないなら、これでも十分。

日本製なので、解説記事もたくさん。

 

また、日本のWordPressテーマの制作者さんは、ContactForm7を使うことを前提で、テーマをデザインしていることがあり、そのケースもよく見かけます。

それほど日本ではメジャーなプラグインだということ。

その辺りは、ContactForm7を使うメリットです。

 

 

ただ、環境(サーバー、メールシステムなど)によって、フォームから送信されたはずの情報が一切届かないなどの不具合も。

開発者さんの方でこまめに対応してくださっている様子だけど、今回Ninja Formsにたどり着いた一番の原因はContactForm7の不具合でした。

 

 

お客様の方には「送信された」と出たはずなのに、こちらに全く届かない…

新規イベントの申し込みフォームから、反応がまさかのゼロ…

そんな不具合も起こりました。(もちろん環境によります)

 

 

また、日付やラジオボタンなど、フォームをカスタマイズしようとすると、最低限のHTMLの知識は必要になる印象です。

言われているより初心者さん向けじゃない…かも…?(私個人の判断です)

 

Jetpack Contact Form

有名プラグイン、Jetpackのフォーム作成プラグイン。

WordPress公式で出しているので、安心と言えば安心。

 

ただ、自動返信メールが設定できないので、うーん…という印象。

 

Visual Form Builder

こちらは、「直感で操作できる!」系の海外製お問い合わせフォームプラグイン。

「直感で」と謳う通り、確かに操作はドラッグ&ドロップでできます。

 

ただ、送信ボタンの前に、「2ケタの数字を入力してね」という英語の謎ボックスが強制的に入ってしまうこと(削除できません)、カレンダーの表示が崩れてしまいがちなこと、送信ボタンが記入欄と別れて表示されるデザインなこともあり、初心者さんには向かないというのが個人的な感想です。

 

CSSが分かれば対処できるのですが、言いかえれば「CSSが分からないと対処できない」という点では中級者以上向けです。

 

MW WP Form

こちらも、よくおススメされているお問い合わせフォームプラグイン。

ただ、使ってみた感想としてはちょっと難易度高めでした。

 

使い方が分かれば、自由度も高く使いやすいかと。

 

中上級者にはとてもおススメできるプラグインだと思います!

 

お問い合わせフォームプラグインNinja Forms、初心者さんこそ使うべき!

 

さて、つらつらとご紹介してきた、お問い合わせフォームプラグインNinja Formsですが、私の結論としては、

 

WordPressの初心者さんこそ使うべき!!!!!

 

です。

これほど分かりやすいプラグインは無いです。(断言)

 

Ninja Foooooooooooorms!!!!!!サイコー!!!

 

 

それでも分から――んという方、どうぞお気軽にお問い合わせを。

お待ちしてます。