WPFormsプラグインの使い方解説！有料版/無料版の違いも初心者向けに詳しく

みなさんこんにちは！海外フリーランスの@HODAです。

今回はWordPresのお問い合わせフォームプラグインである WPForms というプラグインについて詳しくご紹介したいと思います。

お問い合わせフォームプラグインが必要な理由

まずウェブサイトにお問い合わせフォームが必要な理由を簡単にご紹介したいと思います。

お問い合わせフォームがない場合は、みなさんのメールアドレスをそのまま表示したりするしかありませんが、その場合だと大量のスパムが送信される可能性があります。またメールアドレスを公開してしまうことでWordPressの脆弱性にも繋がるので安全なフォーム作成プラグインを使用して、スパムやハッカーからサイトを守る必要があります。

WPFormsとは？特徴は？

WPForms は海外のWordPressフォーム作成プラグインです。主な特徴は以下の機能になります。

一番大きな特徴は直感的に使うことができるという点だと思います。これに関しては後述しますが、僕自身このフォームが一番便利だと感じていて、すべてのサイトにてWPFormsを使用しています。

また、個人的にすごいと思うので「送信プレビュー機能」です。日本ではフォームの送信前に一度最終確認ということでプレビューを見せるのが一般的でうはありますが、海外ではそのようなことはあまりありません。ただ、WPformsは有料版の機能ではありますが、フォーム送信前のプレビューを見せることができます。

WPFormsで使えるフィールド(入力項目)

フォームに設置できるフィールドは主に以下になります。

連携できるツール/サービス

他のメール配信ツールは主にこちらのツールと連携が可能です。もしメールマーケティングに繋げたり、マーケティングオートメーションを考えている場合は良いと思います↓

[embedyt] https://www.youtube.com/watch?v=1OSfbQukq1A[/embedyt]

↑ 無料で使える海外メールマーケティングツールのMailerliteについてはこちらの動画でレビューしています。

WPFormsを試してみる！

WPFormsの使い方

WPForms には「WPForms lite」という無料版があるので、まずはこちらをインストールすることから始めるのが良いと思います！

プラグイン > 新規追加

に進み、「WPForms」と入力して検索をします。そして以下のプラグインをインストールします。（ここからインストールできるのは無料版です。）

↓インストールが完了して有効化すると、ダッシュボードのサイドバー内に「WPForms」という項目が表示されるので、ここからすべての管理をすることができます。

WPFormsを試してみる！

WPFormsでフォームを作成する方法

WPforms > 新規作成

に進むと、以下のような画面が表示されます↓

↑ここから最初のフォームのテンプレートを選択することができます。ここから何を選択したとしても後から自由にカスタマイズすることができるので、近しいものを選べばＯＫです。

もしゼロから作成したい場合は「空白のフォーム」というものを選択します。

↓以下は「簡単なお問い合わせフォーム」というものを選択してみました。この画面でフォームの入力項目の設定をすることができます。

こちらのように無料版では使用できる入力フィールドの制限があります。と言っても必要最低限のものはあるので、十分に使用することができます。

フォームフィールド（入力項目）の作成

フォームフィールド（入力項目）の作成方法は直感的でとても簡単です。使いたいフィールドがあったら、それをドラッグアンドドロップで右のプレビュー部分に持っていくだけです。そうすると任意の位置にフィールドを設定することができます。

 

↓各フィールドの設定は、フィールドをクリックするか「フィールド設定」とう部分から設定することができます。

それぞれのフィールドによって設定内容が異なりますが、基本的に以下の設定が可能です

• ラベル（タイトル）の変更
• 説明文の追加
• 必須 / 任意の設定

ドロップボックスやラジオボタンの設定方法

ドロップボックスやラジオボタンの設定方法は、各選択肢を以下のように設定することができます。ラジオボタンに関しては、画像を設定したりすることもできます。

 

 

フィールドの高度な設定

各入力フィールドには「高度な設定」というオプションがあります。

ここでは各フィールドの詳細設定を行うことができます。

設定できることはフィールドによって異なりますが、主に以下の項目は共通で設定可能です。

• フィールドサイズ：サイズを変えるとフィールドの横幅サイズが変化します
• CSS クラス
• ラベルを非表示
• サブラベルを非表示

その他の設定項目に関しては、基本的に右側のプレビューを見ながら変更できるのでわかりやすいです。

スマートロジック機能[Pro版のみ]

各入力フィールドには「スマートロジック」というオプションがあります。

これはいわゆる「条件機能」ということで、別のフィールドの入力した内容や選択した内容によってそのフィールドを非表示にしたりすることができます。

例えば以下のようなフォームがあったとします。

■資料を希望する

〇はい
〇いいえ

↑このフィールドで「〇はい」にチェックを入れた時だけ、次の質問が表示されるようにすることが可能になります。

上記のようにロジックを有効化するとオプションが表示されます。

ここから例えば「ラジオボタン　＝　選択肢１」のように設定することで、ラジオボタンで選択肢１を選ぶと、その項目を表示したり非表示にしたりすることができる高度な機能です。

 

送信後のサンキューメッセージ

フォームを送信した後に表示される確認メッセージも簡単にカスタマイズすることができます。

設定したいフォーム > 設定 > 確認

に進むと、デフォルトのメッセージが設定されているのでここをカスタマイズすることができます。

ここはリッチテキストエディターなので、URLを追加したり文字の装飾をしたりすることができます。ここで入力したメッセージやコンテンツがフォーム送信後にユーザーに表示されます。

別のページにもリダイレクト可能

フォーム送信後にサンキューメッセージではなく、サンキューページや外部のページに飛ばすことも可能です。

確認タイプから任意の項目を選択することで設定が可能です。

• メッセージ：ページの移動なしにここで設定したメッセージが表示されます。
• ページを表示：WordPress内の固定ページを選択することができ、フォーム送信後にそのページに移動します。
• URLに移動：外部のURLを選択でき、フォーム送信後にそのページに移動します。

 

送信通知メール

フォームを設置したら、通知メールを設定することも重要です。

通知メールを設定しておかないと、管理者はお問い合わせを来たことに気付くことが難しくなります。

設定したいフォーム > 設定 > 通知

に進みます。ここでは、メール通知の設定をすることができます。

管理者宛の通知

管理者宛の通知は以下のように設定するのが良いです。

• 送信先メールアドレス：管理者自身のメールアドレス（ここにメールが届きます）
• メール件名：　（例）「○○からお問い合わせがありました」
• 送信元メールアドレス：　no-reply@xxxx.com のようにするか、スマートタグを使って送信者のメールアドレスを自動で挿入することができます。
• メールメッセージ：{all_fields}　と入力しておくと、自動的に送信されたすべてのデータがメール本文に入力された状態で送信されて便利です。

 

 

ユーザー宛の通知

上記でご説明した通り、無料プランでは1通しか設定することができませんが、もしユーザー宛の通知も作成する場合は以下のように設定するのが良いです。

• 送信先メールアドレス：スマートタグでユーザーのメールアドレスにします（ここにメールが届きます）
• メール件名：　（例）「お問い合わせありがとうございます。」
• 送信元メールアドレス：管理者のメールアドレス、もしくは no-reply@xxxx.com のようにして返信はできないようにする
• メールメッセージ：{all_fields}　と入力しておくと、自動的に送信されたすべてのデータがメール本文に入力された状態で送信されて便利です。

 

通知メールもロジックで設定が可能

↓ 通知メールに関してもロジック機能を使うことができます。

例えば特定の項目にチェックを入れた人には別のサンキューメールを送信したりすることが可能です。

この機能を使うことで、例えば「資料を希望する」にチェックを入れた人に資料が添付されたサンキューメールを自動的に送信することができます。

ファイルの添付も可能

高度な設定 > 添付ファイルのアップロードを有効にする

から設定を有効化することで、通知メールにファイルを添付することができます。資料を送ったりする時に便利な機能です。

 

フォームの完成！プレビューをしてみる

基本的に上記の設定を行えば、フォームの完成です。

今までは管理画面側の状態を見ていましたので、実際のプレビューを確認することをおすすめします。

右上の「プレビュー」を選択すると、実際のサイト上のプレビューを確認できます。

フォームを埋め込む・シェアする

プレビューをして外観的に問題がなければ、実際のページに埋め込んで公開しましょう！

WPformsの公開方法は簡単で、ショートコードを表示したい場所に埋め込むだけでＯＫです。

↓ 右上の「埋め込む」を選択して、「ショートコードを使用する」を選択します。

すると

[wpforms id="2207" title="false"]

のようなショートコードをゲットできますので、これを好きな場所に埋め込みます。

ちなみに、ショートコードはフォーム一覧からも確認することができます。

 

ショートコードは以下のような場所で使うことができます。

• 投稿本文内
• 固定ページ本文内
• ウィジェット（フッター・サイドバー）内
• Elementorのブロック

 

↓このように記事内に追加すれば、その場所にフォームを表示することができます。（めちゃ便利です。）

 

送信テストをしよう！

最後にフォームの送信テストをする必要があります。テスト送信する場合は管理者以外のメールアドレスを使って、第三者目線でテストするのが良いです。

フォームのテスト送信では以下の事項を確認すると良いです。

1. 実際の入力内容に近いデータを使用する – テスト送信を行う際には、実際に入力する内容に近いデータを使用することが重要です。例えば、名前やメールアドレスなどは、本来入力される内容に沿った形式で入力することが望ましいです。

2. フォームの全項目に入力する – フォームのテスト送信を行う際には、フォームに設定されている全項目に対して入力を行うことが必要です。未入力の項目がある場合、送信がエラーになることがあります。

3. バリデーションの動作を確認する – フォームには、入力内容のバリデーション（入力値のチェック）が設定されている場合があります。テスト送信を行う際には、このバリデーションが正しく動作しているかどうかも確認する必要があります。

4. フォームのエラー処理を確認する – フォームに入力内容に問題がある場合、エラーメッセージが表示されるようになっていることがあります。テスト送信を行う際には、エラー処理が正しく動作しているかどうかも確認する必要があります。

5. ロジックを確認する – 設定したログインが正しく機能しているかを確認します。特定の条件で表示される項目などが正しく機能しているかを確認します。

6. サンキューメール、通知メールの確認 – フォーム送信後にしっかりとメッセージが表示されるか、通知メールが届くかを確認します。

もし問題がある場合は、それらを修正する必要があります。複雑なフォームの場合はさまざなま条件でテスト送信することをオススメします。

 

送信履歴・送信内容を確認する

無料版では送信履歴を確認することができませんが、有料版になるとWordPressの管理画面内でフォームの送信履歴(Entries)を確認することができます。これらをデータとしてダウンロードすることも可能です。

 

 

デザインをカスタマイズしたいなら、こちらのプラグインで可能！

 

全体的な設定

今までは各フォームごとの設定方法をご紹介しました。フォームを公開する前に、一度WPformsの全体設定も確認しておくと良いです。

WordPressダッシュボード > WPforms > 設定

に進みます。

設定には大きく以下の設定カテゴリがあります。

• 一般
• メール
• CAPTCHA
• 検証
• 支払い
• 連携
• 位置情報
• アクセス
• その他

一般

ここでは特に設定することはありませんが、有料プランのライセンスの解除などはここから行うことができます。

もしテスト環境でWPforms Pro を使っていて、別のドメインに移行したい場合はここからライセンスを一度解除することで可能です。

 

メール

送信される通知メールの設定を行うことができます。ヘッダーに画像を設定したり、メールの形式を設定することができます。

可能であればヘッダー画像は設定しておくとプロっぽく見えます。

CAPTCHA

スパム防止の CAPTCHA 類の設定をここから行うことができます。

ここでは割愛しますが、個人的には Google の reCAPTCHA が無料なのでオススメです。

検証

ここでは、フィールド入力時などのエラーメッセージをカスタマイズすることができます。基本的にすべて日本語化されていますが、ちょっと言い回しがおかしい部分や気になる日本語があればここからカスタマイズが可能です。

ここで変更した内容はすべてのフォームに適応されます。

支払い

もし支払いゲートウェイと連携する場合は、ここから通貨を設定することができます。

連携

別のサービスと連携する際に使用する画面です。別のサービスと連携する場合には別途アドオンが必要になります。

設定できない項目はグレーアウトしています。

位置情報

送信者の位置情報を取得することができます。

設定を希望する場合は、ここからインストールすることができます。

アクセス

WordPressのユーザー権限を元に、どの権限がどこまでアクセスできるかを管理できます。

メールが送信されない場合

ホスティングサーバーによってはWPformsからの通知メールが送信されないことがあります。

その場合は別途 SMTP のプラグインをインストールする必要があります。

 

詳しい設定方法は割愛しますが、無料版で十分ですのでこちらをインストールします。

↓そして、接続したい SMTP のサービスを選択します。個人的には SendGrid が使いやすいと思います。

 

 

WPFormsのデザインをカスタマイズする

プレビューで確認していただければわかりますが、WPFormsのデザインはシンプルです。

もちろんCSSにてカスタマイズすることもできますが、CSSに詳しくない方にとってはちょっとハードルが高いかと思います。

そんな時は、専用のプラグインがあるのでこちらからデザインのカスタマイズができます。

こちらをインストールして有効化します。

使い方は簡単で フォームが埋め込んであるページに進み、「カスタマイズ」を選択します。

↓すると、以下のように「Style for WPforms」という項目があるので、ここからリアルタイムでカスタマイズをすることができます。

 

↓以下のようにかなりの項目をカスタマイズすることができるようになっていて便利です。

 

WPformsの有料版のメリット

WPformsは無料版から使うことができる便利なWordPressフォーム作成プラグインですが、無料版ではいくつか機能の制限があります。

以下は無料版と有料版の機能のハイライトを比較したものです。

	無料版	有料版
金額	無料	年額 39.60 ドル ~
作成できるフォームの数	無制限	無制限
閲覧数	無制限	無制限
使える入力フィールド	制限あり	すべてのフィールドが使える
通知メール	1フォームにつき1個	1フォームにつき複数可能
送信された内容の保存	保存されない	Entriesとして保存されるので後から確認可能
スマートロジック機能	ー	利用可能
サードパーティーツールとの連携	「Constant Contact」のみ対応	他の多くのサードパーティーツールと連携可能
Zapierとの連携	ー	利用可能

 

利用できるフィールドの比較（Lite vs Pro）

	WPフォームライト	WPフォームプロ
名前	✓	✓
Eメール	✓	✓
文章(テキストエリア)	✓	✓
番号	✓	✓
ナンバースライダー	✓	✓
ドロップダウンボックス	✓	✓
複数の選択肢（ラジオボタン）	✓	✓
チェックボックス	✓	✓
reCAPTCHA/ hCaptcha	✓	✓
GDPR 同意書	✓	✓
電話番号		✓
住所・地図		✓
日付時刻		✓
ウェブサイトのURL		✓
ファイルのアップロード		✓
パスワード		✓
リッチテキスト		✓
レイアウト (複数列フォーム)		✓
改ページ		✓
セクション区切り		✓
HTML		✓
コンテンツ		✓
エントリープレビュー		✓
隠しフィールド		✓
カスタム CAPTCHA		✓
サイン		✓
調査フィールド (星評価、リッカート スケール、ネット プロモーター スコア)		✓
支払いフィールド		✓

このようにLite版とPro版とは大きな違いがあります。

無料版でも利用可能ではありますが、現実的に考えると通知の数などから有料版にするのが良いかと思います。

WPformsのプラン・金額

公式サイトに記載の通り、WPformsのプランは 年額制となっています。一番安いプランは 約 5,000円/年からスタートするのでそこまで高くはありません。

各プランの大きな違いは「設置できるサイト数」になるので、まずは１サイトで使うのであればBasicプランでも十分に使えます。

ライセンスの移行も簡単にできるので、テスト環境でサイトを構築してから別のドメインに移行することも難しくありません。

WPFormsを試してみる！

まとめ

いかがでしたでしょうか？今回は個人的に一番オススメのWordPressフォーム作成プラグインの「WPForms」について解説をさせていただきました。

個人ブログの簡単なお問い合わせフォームなどであれば無料版（Lite）でも良いと思いますが、コーポレートサイトなどで使う場合はやはり有料版を使うのが良いかと思います。

有料版にしたとしても、この機能が使えるのであれば十分に金額以上の価値があると思います。

初心者でも簡単にフォームを作成できるWPFormsを是非試していただければと思います！ 🙂 

WPFormsを試してみる！

よくある質問

複数の Web サイトで WPForms を使用できますか?

WPForms は、単一の Web サイト、複数の Web サイト、さらにはクライアント Web サイトでプラグインを使用できるようにするいくつかのライセンス オプションを提供します。Business または Elite ライセンスをお持ちの場合は、無制限の数の Web サイトに WPForms をインストールできます。ただし、各 Web サイトには独自のライセンス キーが必要であることに注意することが重要です。

WPFormsを使用するには何が必要ですか?

WPForms は WordPress プラグインです。WPForms を使用するには、自己ホスト型の WordPress サイトが必要です。それだけです。

WPForms を使用するにはコーディングのスキルが必要ですか?

コーディングの知識がなくてもフォームを作成および管理できます。WPForms は、市場で最も初心者に優しいコンタクト フォーム ソリューションです。

WPForms 翻訳の準備はできていますか?

はい、WPForms は、wpforms テキストドメインを介して完全な翻訳とローカリゼーションをサポートしています。すべての .mo および .po 翻訳ファイルは、プラグインのベースにある言語フォルダーに入れる必要があります。すべての WPForms アドオンにも同じことが当てはまります。