SHARE

WordPressのフォーム作成にプラグインを使った方がいい4つの理由

Webサイトにフォームを作成すれば、顧客リストの獲得や受付対応を自動化できるために業務効率化につながります。ですが「WordPressサイトでフォームを追加したいけど方法がわからない」とお悩みの方も多いのではないでしょうか。

フォーム作成にはプラグインの活用がおすすめです。プラグインを利用すると知識不要でフォームを作成・設置できます。本記事では、プラグインでフォームを作成すべき4つの理由とフォームの作成手順について解説します。

デザイン・開発・動画編集・SNS運用など、経験豊富なプロに直接頼める!

WordPressにフォームを追加する3つの方法

ECサイトを運営する人
WordPressにフォームを追加する方法は以下の3つです。

  1. HTML・CSS・PHPで自作する
  2. フォーム作成ソフトを使う
  3. プラグインを利用する

それぞれの方法について、特徴やメリット・デメリットを解説します。

1. HTML・CSS・PHPで自作する

フォームはHTML・CSS・PHPなどの言語を用いて自作することができます。自身でコーディングするためにデザインや機能が自由に設定できます。

例えば、フォームの背景色を変えたり、フォントや文字の感覚を決めたりなど、オリジナルのフォームが作成できます。

ただし、HTML・CSS・PHPを編集するにはコードを理解する必要があります。専門知識が必要になるために、簡単に自作できるわけではありません。HTML・CSS・PHPの編集やカスタマイズは、専門知識のある上級者向けの対応になります。

「知識がなくてもサイトに合わせたフォームを作りたい」「ありきたりなフォームは作りたくない」という方は、ランサーズでフォームの作成を依頼する方法もあります。

2. フォーム作成ツールを使う

フォーム作成ツールとは、直感的な操作でフォームを作成できるツールです。Googleフォームのようにクラウド型の無料で使えるツールもあります。

WordPressサイトに埋め込みコードを挿入するだけで、問い合わせフォームが実装できる機能もあります。中には、フォームの回答の集計・分析・共有ができるツールもあって、フォーム内容を分析し、マーケティングに活用することも可能です。

利用は個別のツールサービスに登録しなければなりませんが、基本は登録・利用に対しての費用がかかりません。

3. プラグインを利用する

WordPressの拡張機能となるプラグインには、フォームを作成できるものもあります。プラグインを利用すればHTMLやCSSを編集することなく、すぐにWebサイト上にフォームが実装可能です。

ただし、インストールするプラグインの数を増やしすぎると、サーバーに負荷がかかります。サイト表示の遅延やプラグイン同士の干渉が起こり、WordPressサイトの一部機能が無効なるなどの不具合が生じます。

すでにプラグインを20~30個インストール済みで動作が遅くなっていると感じているなら、サーバーに負荷がかからない「HTML・CSS・PHPで自作する」「フォーム作成ツールを使う」のいずれかを選択しましょう。

WordPressのフォームにプラグインを使うべき4つの理由

PLUGIN
WordPressにフォームを追加するならプラグインの利用がおすすめです。WordPressのフォーム作成にプラグインをおすすめする理由は以下の4つです。

  1. レスポンシブに対応しており、全デバイスで正しく表示される
  2. 「バリデーションチェック」が使えるから、入力ミスを防ぐことができる
  3. 入力内容をデータベースに蓄積できるので、顧客リストを作成できる
  4. 自動メール送信が使えるから、受付業務を効率化できる

プラグイン利用がおすすめの理由の詳細を確認してみましょう。

1. レスポンシブに対応しており、全デバイスで正しく表示される

フォームのプラグインはレスポンシブに対応しており、パソコン・スマホ・タブレットなど、どのデバイスでもデザインが崩れることなく表示されます。

「デザインの表示崩れでフォームに入力できない」「不具合でフォームを使えない」といったトラブルを防ぐことができるので、ユーザーからのフォーム回答率を上げることができます。

2. 「バリデーションチェック」が使えるから、入力ミスを防ぐことができる

「バリデーションチェック」機能がついているプラグインを利用すれば、入力ミスや空欄による未回答の送信を防ぐことができます。バリデーションチェックとは、入力ミスが無いようにフォームの空欄に「入力して欲しい項目」が記載される機能のことです。

例えば、名前をカタカナで記入して欲しい場合には、名前の欄に「ヤマダタロウ」というように入力の正しい形を表示できます。入力ミスが減ることで確認する手間も少なくできるので、フォームや問い合わせ管理の工数削減につながります。

3. 入力内容をデータベースに蓄積できるので、顧客リストを作成できる

フォームに入力してもらったメールアドレスや名前などのデータは、プラグインのデータベースに蓄積することができます。このデータを使って、見込み客リストやメルマガ送信先リストの作成に使えます。

Webサイトでフォームに入力したユーザーのデータを蓄積できるので、成約に近い見込み客に絞った自社にとって有益なリストを作成できます。

4. 自動メール送信が使えるから、受付業務を効率化できる

WordPressdのフォームのプラグインでは、自動メール送信を設定できます。フォームを入力してくれたユーザー一人ひとりに手動でメール送信する必要がないために、受付業務の効率化につながります。

フォームの入力内容にあわせて自動返信の内容をカスタマイズすることも可能です。例えば、メールアドレスが未記入の場合には「メールアドレスが未記入です」とメッセージが自動送信できます。

問い合わせに対して手動で返信メールを送る必要がなくなるために、問い合わせ担当者の受付業務の工数を減らすことができ、業務効率化につながります。

プラグインを使ってWordPressにフォームを追加する手順

piug-inと書かれたボード
以下の2つのプラグインについて解説します。

  • 自動メール送信やリスト作成ができて、マーケティングにも活用できる「MW WP Form」
  • 初心者でも直感的な操作でフォームを追加できる「Contact Form7」

両者はそれぞれ「機能の多さ」と「使いやすさ」の特徴を持っています。

マーケティングに使えるような機能を重視したい方は「MW WP Form」、とりあえず問い合わせフォームを設置できればいいには「Contact Form7」の方が管理しやすいです。

まずはWordPressにフォーム作成に使うプラグインを導入しましょう。導入方法は「プラグイン」から「新規追加」を選択し、検索窓にプラグイン名を入力します。対象のプラグインが表示されたら「インストール」を選択します。インストール完了後に「有効化」というボタンを選択すればプラグインが利用可能になります。

「MW WP Form」を利用してフォームを作成する手順

MW WP Formはフォーム入力時に確認画面を表示させるほか、入力ミスを防ぐ「バリデーションチェック」やリスト作成に使える「データベース機能」などがあります。MW WP Formは以下のような考えの方におすすめです。

  • フォームの入力内容を営業リストの作成に使いたい
  • バリデーションチェックや確認画面など機能が充実しているフォームを利用したい

1. フォームを作成する

プラグインを導入したら画面左の「MW WP Form」から「新規追加」を選択します。
WordPressの画面
編集画面が表示されたら、タイトルを設定して、フォームを作成していきます。
WordPressの画面
フォームの項目は「選択してください」と表示のある項目の中から追加したい内容を選び、「フォームタグを追加」を選択すると設定画面が表示されます。

項目の名前や初期値を設定して「Insert」を選択すれば、フォームの項目を追加できます。
WordPressの画面
以下にフォームのサンプルコードをまとめたので、ぜひ活用してみてください

設定項目サンプルコード
名前[mwform_text name=”name” class=”form-input” size=”60″ ]
メールアドレス[mwform_text name=”mail” class=”form-input” size=”60″]
電話番号[mwform_text name=”tel” class=”form-input” size=”60″ conv_half_alphanumeric=”true”]
希望内容[radio radio-262 use_label_element default:1 “サービスについての問い合わせ” “お仕事依頼””その他”]
お問い合わせ内容[mwform_textarea name=”content” cols=”50″ rows=”5″]
確認画面[mwform_confirmButton class=”btn conf” value=”確認画面”]

2. フォームを設置する

WordPress管理画面の右側に「フォーム識別子」の表示があり、ショートコードが記載されています。
WordPressの画面
こちらをコピーしていただき、フォームを設置したいページに「コードエディターモード」で貼り付けましょう。

ビジュアルエディターモードで貼り付けるとフォームが正しく反映されない可能性があるので、コードエディターモードでショートコードを貼り付けてください。

3. 自動応答メールを設定する

編集画面をスクロールすると、画面右側に「自動返信メール設定」が表示されます。
WordPressの画面
件名・送信先・本文の設定をしておけば、フォームから問い合わせがあった時に自動で返信メールが送信されます。

4. バリデーションを設定する

編集画面を下までスクロールすると「バリデーションルール」という項目が表示されます。
WordPressの画面
バリデーションチェックを行いたい項目を入力し、必須項目やひらがなのみの入力などを設定しましょう。

「バリデーションを適用する項目」には、フォームタグのnameの横にあるダブルクオート(””)の間の文字を入れます。

名前の項目にバリデーションを適用する場合は、名前のタグである「name」を「バリデーションを適用する項目」の欄に入力します。

WordPressの画面
名前の入力を必須項目にして、ひらがな入力を指定することで下図のように表示されます。
WordPressの画面

5. 入力確認・完了画面を作成する

入力確認・完了画面の作成手順は以下の通りです。

  1. 完了画面のレイアウト作成
  2. 確認・完了画面のURLを設定
  3. フォームにボタンを追加
  4. 確認・完了画面の作成後にショートコードを挿入

まずは完了画面のレイアウトを作ります。

フォームタグの{name}を入れておけば、フォームに入力した方の名前を表示できます。
WordPressの画面
次に確認・完了画面のURLを設定します。固定ページなどに「入力画面」「確認画面」「完了画面」の3つのページを作成して、URLを記入します。

次にフォームにボタンを設定します。「フォームタグを追加」から「確認」「戻るボタン」「送信ボタン」を追加しましょう。
WordPressの画面
最後に画面右側にあるショートコードを「入力画面」「確認画面」「完了画面」の3つに貼り付ければ完了です。

「Contact Form7」を利用してフォームを作成する手順

前述した「MW WP Form」と比べると操作は簡単なので「名前とメールアドレス・問い合わせ内容を入力する程度の簡単なフォームを作りたい」と考えている人におすすめです。

1. フォームを作成する

画面左の「お問い合わせ」から「コンタクトフォームを追加」を選択します。

WordPressの画面
Contact Form7ではインストールした時点でサンプルのフォームが作成されています。サンプルに沿ってフォームを整えるだけの簡単操作でフォームを作成・追加できます。

2. フォームを設置する

画面上部に「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください」と表示されています。そのすぐ下のショートコードをフォーム用に作成した投稿・固定ページに貼り付けます。

この時に「コードエディターモード」で貼り付けしなければ、フォームが正しく表示されない可能性があるので注意してください。

3. 自動応答メールを設定する

コンタクトフォーム編集画面の画面上部の「メール」タブをクリックします。

WordPressの画面
メッセージ本文に自動返信メールの内容を記入しましょう。フォーム入力後に、入力者のメールアドレスを自動で判別・送信してくれます。

4. インテグレーションを活用して、外部サービスと連携する

Contact Form7には、外部サービスと連携できる「インテグレーション機能」があります。

外部連携できる機能を以下の表にまとめました。

連携できる外部サービス機能内容
Constant Contact連絡先データをデータベースに格納できる機能
reCAPTCHAスパムやその他自動化された嫌がらせメールを遮断できる機能

Constant Contactで資料請求や問い合わせのあったユーザー情報を蓄積して、顧客の情報をリスト化すれば、インサイドセールスも可能です。

reCAPTCHAはセキュリティ機能で、悪意のある攻撃だと判断した時点で嫌がらせメールやスパムを遮断してくれるます。

プラグインを追加したくない場合はフォーム作成ソフトがおすすめ

前述した通り、プラグインのインストール数が多すぎるとサーバーに負荷がかかります。

すでにプラグインを20〜30個使っている方はサーバーに負荷をかけない「フォーム作成ツール」を利用しましょう。フォーム作成ツールは無料でフォームを作成でき、埋め込みコードを取得すればプラグインのようにフォームを設置することも可能です。

ただし、誰でも簡単にフォームをつくることができるサービスのために、デザイン性やカスタマイズ性は期待できません。好みのデザインのフォームを作成したいならHTML・CSS・PHPの言語を用いて自作しましょう。

自作できない場合は、ランサーズでプロに作成を依頼するのもおすすめです。

WordPressのフォーム作成にはまずはプラグインを試そう

考える男性
本記事では、WordPressにフォームを設置する方法について紹介しました。フォームを設置する方法は「HTML・CSS・PHPで自作する」「フォーム作成ソフトを使う」「プラグインを利用する」の3つです。

中でも、費用がかからず即日でフォームを設置できる「プラグインの利用」がおすすめです。プラグインはWordPressにインストールするだけで必要な機能を利用できるので、「問い合わせフォームを設置したい」と考えている人は、プラグインの利用から始めてみてはいかがでしょうか。

デザイン・開発・動画編集・SNS運用など、経験豊富なプロにカンタン依頼