エンジニアの副業は週1からでも可能?副業の例や探し方も解説
- ITエンジニア
- 副業
このようにWordPressでブログやWebサイトを作成する場合、お問い合わせフォームを設置したい人も多いのではないでしょうか。
WordPressのサイトにお問い合わせフォームを設置するのは想像以上に簡単ですプラグインを使えば誰でも簡単に導入できます。
そこで本記事では、以下3点に沿ってお問い合わせフォーム設置の方法を解説します。
- WordPressのお問い合わせフォームをプラグインで設置すべき理由
- お問い合わせフォームを設置できるおすすめプラグイン2選
- プラグインの導入から設定方法
WordPressにお問い合わせフォームを設置するには、プラグインを使うのがおすすめです。
プラグインを使ってお問い合わせフォームを設置するメリットは以下のとおり。
<プラグインを使用するメリット>
- プログラミング知識がなくても導入できる
- 自動返信メールも同時に設定できる
- セキュリティ面において安心できる
WordPressで制作したWebサイトにお問い合わせフォームを設置する方法は2つあります。
PHPを使ってお問い合わせフォームを実装するには、やや高度なプログラミング知識が必要です。PHPファイルを作成し、サーバーにアップロードする必要があるため、手間もかかります。
そこでWordpressプラグインの出番です。プラグインを使えばプログラミング知識がない人でも簡単にお問い合わせフォームを設置できます。
プラグインを使ってお問い合わせフォームを設置する流れはたったの4STEPです。
<プラグインを使ったお問い合わせフォームの設置流れ>
- プラグインをインストールする
- プラグインの設定を行う
- 固定ページを作成する
- ショートコードを貼り付ける
記事後半でプラグインの導入から設定方法までを、画像付きで詳しく解説します。
多くのプラグインでは、自動返信メールをかんたんに設定できます。
ユーザーがお問い合わせフォームから問い合わせたときに、以下のような自動返信メールを設定しておくとユーザービリティが向上します。
- ユーザー向け:
送信完了の案内、何日以内に返信するか、今後の流れなど- 運営者向け:
いつ、誰が、どんな内容の問い合わせをしたのかなど
ユーザーはお問い合わせフォームから送信したときに、本当に送信できているか心配になるものです。「送信完了メール」を自動返信メールとして設定しておけば、きちんと送信されていることをユーザーに知らせられます。
またプラグインを使うことで、運営側にも「いつ、誰が、どんな内容の問い合わせをしたのか」を知らせるメールの設定が可能です。
このような自動返信システムをプログラミングで実装すると非常に手間がかかりますが、プラグインを使えばボタン操作のみで簡単に実装可能です。
プラグインを使えばセキュリティ面も安心です。
お問い合わせフォームを自作する場合は、通信を暗号化するなどのセキュリティ対策が不可欠です。しかしプログラミング知識の浅い人がお問い合わせフォームを自作すると、セキュリティ面が弱くなり情報漏洩の危険性があります。
一方で、本記事でご紹介するプラグインはプロのエンジニアが開発したもの。定期的にメンテナンスやアップデートが行われているため、最新のセキュリテイ状態を保っています。
また長年使われ続けている歴史もあり、導入しているユーザー数も多いです。プラグインを使えば、自身でセキュリティ対策をするよりも安心して利用できます。
WordPressにお問い合わせフォームを設置するプラグインはたくさんありますが、そのなかでも利用者が多くおすすめできるプラグインは、以下の2つです。
<おすすめのお問い合わせフォームプラグイン>
- Contact Form7:王道のプラグイン。機能もシンプルで初心者におすすめ
- MW WP Form:確認画面を作成できるプラグイン。カスタマイズしやすい
これらの2つのプラグインがそれぞれ持つ機能を比較表にしましたので、ぜひ参考にしてください。
Contact Form7 | MW WP Form | |
インストール数 | 5万以上 | 100,000+ |
確認画面 | なし | あり |
自動返信メール | あり | あり |
画面遷移 | なし | あり |
バリデーションを指定 | できない | できる |
カスタマイズ | シンプル | 複雑 |
データベースへの保存 | できない | できる |
アップデート頻度 | 高い | 低い |
2つのプラグインに共通して言えることは、以下の3点です。
大きな違いは、確認画面があるかないかです。
重要な内容をユーザーに送信させるには、確認画面の設置が必要です。一方で気軽なお問い合わせを目的としたフォームの場合は、確認画面はなくてもよいかもしれません。
サイトへの問い合わせ内容に応じて、使い分けるのがおすすめです。
お問い合わせフォームの王道といっても過言ではないのが『Contact Form7』です。
日本人の開発者によって作られたプラグインなので、日本語の情報や解説記事も豊富。日本人に非常に人気のプラグインです。
定期的にアップデートも行われており、WordPressとの互換性も最新に保たれているので安心して使用できます。初心者でも設定しやすいため、早くお問合せフォームを導入したい方におすすめです。
Contact Form7の特徴をまとめると以下のとおりです。
<Contact Form7の特徴>
- 複数のコンタクトフォームを管理できる
- 簡単なマークアップでカスタマイズできる
- 確認画面は作成できない
- 自動返信メールを設定できる
- ドロップダウンやボタン挿入ができる
- サンクスメッセージの設定を簡単に行える
- 日本語の情報が豊富にある
Contact Form7の欠点は、確認画面がない点です。
ユーザーに「住所」「電話番号」などの個人情報を送信してもらう場合には、確認画面が必要。どうしても確認画面を設けたい場合は、次に紹介するMW WP Formを使うのがいいでしょう。
Contact Form7を使ってシンプルなお問い合わせフォームを作る方法をご紹介します。「お名前」「メールアドレス」「題名」「お問い合わせ内容」「送信ボタン」など、よくあるお問い合わせフォームを作ってみましょう。
Contact Form7でお問い合わせフォームを作る手順は以下のとおりです。
- Contact Form7をインストール&有効化
- 新規作成
- 自動返信メールを設定
- メッセージを編集
- ショートコードをコピー
- 固定ページを作成
- ショートコードを貼り付けして公開
まずは「プラグイン」→「新規追加」からContact Form7をインストールして、有効化します。
するとダッシュボードに「お問い合わせ」の項目が表示されるので、そこにある「新規追加」ボタンをクリックしてください。
新規追加をクリックすると、このような画面に移動します。「ここにタイトルを入力」の箇所に、お問い合わせフォームのタイトルを入力しましょう。
シンプルなお問い合わせフォームでOKな人は、これ以上編集する必要はありません。デフォルトで「お名前」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」の項目がすでに用意されているためです。
「添付ファイル」や「チェックボックス」を追加したい場合は、テンプレートでフォームの項目を追加できます。
次に自動返信メールの設定です。「メールタブ」をクリックしましょう。
自動返信メールを以下のとおりに設定します。設定が完了すると、お問い合わせフォームから送信された内容を運営に知らせられます。
- 送信先:
管理者のメールアドレス- 送信元:
WordPressに登録しているメールアドレス- 題名:
デフォルトでOK(ユーザーが入力する題名)- 追加ヘッダー:
デフォルトでOK- メッセージ本文:
デフォルトでOK(ユーザーが入力した内容がそのまま送信される)
次はユーザーに対して「送信完了メール」の設定を行う方法です。「メール(2)を使用」にチェックを入れます。
以下を参考に、ユーザーへ自動返信するメールを設定しましょう。
- 送信先:
[your-email]- 送信元:
運営側のメールアドレス- 題名:
件名にふさわしい文章- 追加ヘッダー:
デフォルトでOK- メッセージ本文:
自由に記述([your-name]を使うと、ユーザーが入力した名前になる)
「メッセージ」の設定では、正常に送信されたときに画面に表示するメッセージや、失敗したときに表示させるメッセージを自由に編集できます。
ここまで設定できたら、右側の「保存」ボタンを忘れずに押しましょう。
すると、以下のようなショートコードが生成されるのでコピーしてください。
新規で固定ページを作成し、そこにショートコードを貼り付けて公開すれば、お問い合わせフォームの完成です。
公開したお問い合わせフォームが正常に作動するか、また自動返信メールが送信されるかテストしておきましょう。
「確認画面を表示させたい!」「柔軟にカスタマイズしたい!」と思う人におすすめなプラグインが『MW WP Form』です。
こちらも日本人によって開発されたプラグイン。日本人ユーザーも多く、情報も多いため使いやすいのが特徴です。
しかし2020年5月現在では、約6ヶ月ほどアップデートされていません。そのため最新のWordPressのバージョン(5.4)では対応確認されていないので注意しましょう。
MW WP Formの特徴は以下のとおりです。
<MW WP Formの特徴>
- 確認画面の表示ができる
- バリデーション(条件:8文字以下など)の指定ができる
- お問い合わせ内容をデータベースに保存できる
- URLを自由に設定できる
- データの解析ができる
- カスタマイズしやすい
MW WP Formで作成したお問い合わせフォームには、バリデーションと呼ばれる入力フォームに条件を付けられます。そのため、ユーザーの入力ミスを減らすことが可能です。
たとえば値の文字数が範囲内でない場合にエラーを返したり、画像サイズが指定以上の場合や画像以外の場合にエラーを返したりなど、さまざまな制限をかけられます。
お問い合わせフォームを自由にカスタマイズしたい、ユーザビリティを向上させたい人にMW WP Formはおすすめです。
MW WP Formでシンプルなお問い合わせフォームを作る手順をご紹介します。
- MW WP Formをインストール&有効化
- 新規追加をクリック
- タグの種類を選択&設定
- 文字の入力と装飾
- 自動返信メールの設定
- URLの設定
- バリデーションの設定
- ショートコードをコピー
- 固定ページを作成
- ショートコードを貼り付けして公開
まずは「プラグイン」→「新規追加」からMW WP Formをインストールして有効化します。
ダッシュボードに追加された『MW WP Form』を選択して「新規追加」をクリック。
以下の画像における「②のタグの種類」を選択すると、ドロップダウンでさまざまな種類のタグを選択できるようになります。
- フォームのタイトルを入力
- タグの種類を選択&設定
- フォームタグを追加をクリック
- テキスト挿入や装飾
これらのなかから、「テキスト」「メール」「送信ボタン」などを選択。
たとえば「テキスト」を選択し、「フォームタグを追加」をクリックするとこのような設定画面が開きます。
以下を参考に設定してみましょう。
- name:
分かりやすい名前をつける(例 名前:your-name|題名:subject)- id:
CSSを編集する場合はつける- class:
CSSを編集する場合はつける- size:
横幅のサイズ- maxlength:
最大文字数- 初期値:
デフォルトで表示する文字- placeholder:
サンプル文字を表示
右側に自動返信メールを設定できる欄があります。
以下を参考に、自動返信メールの設定を行います。
<自動返信メール設定>
- 件名:
件名を入力- 送信者:
送信者名を入力- Reply-to(メールアドレス):
送信元メールアドレス- 本文:
本文を入力- 自動返信メール:
メール項目のname属性を記入- 送信元(E-mailアドレス):
任意で入力<管理者宛メール設定>
- 送信先(E-mailアドレス):
送信先のメールアドレス- CC(E-mailアドレス):
必要な場合記入- BCC(E-mailアドレス):
必要な場合記入- 件名:
件名を入力- 送信者:
サイト名もしくはname属性- Reply-to(メールアドレス):
メール項目のname属性- 本文:
本文を入力({contents}で入力フォームの内容)- Return-Path (メールアドレス):
任意で入力- 送信元(E-mailアドレス):
任意で入力
そのほかにも「URL設定」で、お問い合わせフォームを指定のURLで表示させられます。
また、バリデーションを設定したいときは「バリデーションルールを追加」をクリックしましょう。「バリデーションを使用する項目」に設定したいname属性を入力します。
あとは必須項目にチェックを入れ、用途に合わせてバリデーション設定をするだけです。
設定が完了したら「公開」ボタンを忘れずに押しましょう。それから下部にある「フォーム識別子」をコピーします。
新規で固定ページを作成し、そこにフォーム識別子を貼り付けて公開すれば、お問い合わせフォームの完成です。
公開したお問い合わせフォームが正常に作動するか確認しましょう。
WordPressのブログやWebサイトにお問合せフォームを設置する方法を解説しました。
プラグインを使えば、初めてでも簡単にフォームを設置できます。自動返信メールを設定すればユーザビリティも向上するため、ブログやWebサイトを運営している人はぜひ本記事を参考にお問合せフォームを設置してみてください。
(執筆:HikoPro 編集:Kitamura Yuu アイキャッチ:)
WordPressで最初に入れたいおすすめプラグイン20選【ブログ/メディア/開発者向け目的別】
Workship MAGAZINE
WordPressの「重いサイト」を高速化する12の方法。メリット/おすすめプラグインも解説
Workship MAGAZINE
WordPressの脆弱性対策してる?攻撃事例と簡単にできる対策方法
Workship MAGAZINE