簡単にお問い合わせフォームを作成!Contact Form 7の初期設定と使い方

簡単にお問い合わせフォームを作成!Contact Form 7の初期設定と使い方

WordPressでブログを収益化するにあたって、お問い合わせフォームの設置は必須事項です。

お問い合わせフォームを設置し、ユーザーとのコミュニケーションの場を設ければ、サービスの向上やモチベーションの維持にもつながりますし、なによりお仕事に関するお問い合わせや依頼を受け取るための大切なツールとなります。

WordPressでブログにお問い合わせフォームを設置するなら、「Contact Form 7」を使いましょう。

Contact Form 7は、初心者の方でも簡単に綺麗で高機能なお問い合わせフォームを設置できるWordPressプラグインです。

普通、WEBサイトに自分でお問い合わせフォームを設置しようとしたら、サイトに合わせてカスタマイズするための専門知識はもちろん、メルマガ配信スタンドの契約なども必要になってきますが、このContact Form 7を使えば、そんな知識や手間は一切要らず、無料で簡単にお問い合わせフォームやアンケートフォームなどを作成することができます。

今回は、Contact Form 7の初期設定と基本的な使い方を解説しますので、まだサイトにお問い合わせフォームを設置していない方は、こちらの記事を参考に導入を検討してみてください。
 
 

スポンサーリンク

Contact Form 7のインストール

まず、Contact Form 7のインストールを行います。

WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「Contact Form 7」と検索します。

するとContact Form 7のプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

Contact Form 7の設定

Contact Form 7 をインストールすると、管理画面の左メニューに『お問い合わせ』という項目が追加されているので、これをクリックしましょう。
すると、コンタクトフォームのページが開きますので、ページ上部の『新規追加』をクリックします。

『新規追加』をクリック
 
 
以下のようなフォームの編集画面が表示されます。

フォームの編集画面
 
 
ここでは、以下4つの項目を設定していきます。

  1. フォーム名の設定
  2. フォームの入力項目の設定
  3. お問い合わせの受け取りに関する設定
  4. サンクスメッセージの設定

 
 
それでは、一つ一つ解説していきます。
 
 

スポンサーリンク

1.フォーム名の設定

フォーム名を入力します。
フォーム名はユーザーの目には触れないところなので、自分が管理しやすく分かりやすい名前を付けておきましょう。

フォーム名の設定画面
 
 
入力したら、ページ下部の『保存』ボタンをクリックします。

ここではシンプルに「お問い合わせフォーム」という名前で作成を進めます。

お問い合わせフォーム
 
 

2.フォームの入力項目の設定

次に、お問い合わせフォームの入力項目を設定します。
[フォーム]の下に横並びになっているボタンをクリックすると、入力項目を選択することができます。

フォームの入力項目の設定画面
 
 
15種類の入力項目から選択できますが、実際には以下の11項目が設定できればどのようなフォームでも作成できます。
 
 
・テキスト
・メールアドレス
・URL
・電話番号
・日付
・テキストエリア
・ドロップダウンメニュー
・チェックボックス
・承諾確認
・ファイル
・送信ボタン
 
 
これらの入力項目は、設定するところもそれぞれで違いますので、一つ一つ解説していきます。
 
 

テキスト・メールアドレス・URL・電話番号の設定

テキストは、名前や住所などの短い入力項目を設定する時に使います。

メールアドレス、URL、電話番号は、それぞれ専用の入力項目になっており、間違った文字列が入力されると自動的に入力のやり直しを求めるようになっています。

これら4つは設定内容が同じため、テキスト項目の設定を例に解説します。

テキスト項目の設定
 
 
・項目タイプ
入力を必須にしたい時にチェックを入れます。チェックを入れると、フォームでの入力が空白だった場合、入力のし直しを求めるようになります。
 
 
・プレースホルダーに関して
[このテキストを項目のプレースホルダーとして使用する]にチェックを入れて[デフォルト値]の項目に文字を入力すると、以下のように入力欄に入力例を表示することができます。

プレースホルダー
 
 
・Akismet
Akismetを設定している場合、ここにチェックを入れるとスパムメールを減らすことができます。
 
 

日付の設定

日付は、生年月日などを入力してもらう時に使います。

日付の設定
 
 
・範囲
日付の下限と上限を設定します。ここで設定した範囲外の日付は入力できないようになります。
 
 

テキストエリアの設定

テキストエリアでは、メッセージやお問い合わせ内容などの記入欄を設置することができます。

テキストエリアの設定
 
 

ドロップダウンメニューの設定

ドロップダウンメニューを使うと、性別を選択する時などのメニューを作ることができます。

ドロップダウンメニューの設定
 
 
・オプション
ドロップダウンで表示したい選択項目を1行ごと入力します。ドロップダウンメニューで性別を選択させたい場合なら、「男」「女」といった感じですね。
 
 
・複数選択を可能にする
複数選択可能なドロップダウンメニューにしたい時にチェックを入れます。
 
 
・空の項目を先頭に挿入する
先頭行を空白にしたい時にチェックを入れます。ここは常にチェックを入れておきましょう。
 
 

チェックボックスの設定

チェックボックスを使えば、「1週間で何時間テレビを観ますか?」などのアンケート項目を選択形式で表示することができます。

チェックボックスの設定
 
 
・オプション
チェックボックスで表示したい選択項目を1行ごと入力します。
 
 
・ラベルを前に、チェックボックスを後に配置する
チェックを入れると、チェックボックスが右に配置されます。
 
 
・個々の項目をlabel要素で囲む
チェックを入れると、一つ一つのチェック項目がlabelタグで囲まれます。CSSでlabelタグのデザインを作成している場合はチェックを入れておきましょう。
 
 
・チェックボックスを排他化する
チェックを入れると、チェックボックスで項目の複数選択ができなくなります。
 
 

承諾確認の設定

承諾確認では、お問い合わせ時の個人情報の取り扱い規約などの承諾の確認ボタンを表示することができます。

承諾確認の設定
 
 
・このチェックボックスをデフォルトでチェックされた状態にする
チェックを入れると、デフォルトの状態でチェックボックスにチェックが入っているように設定されます。
 
 
・これの挙動を反対にする
チェックボックスにチェックをつけるのではなく、チェックを外すように求める時に設定します。
 
 

ファイルの設定

ファイルを使うと、写真やテキストなどのファイルの送付が可能になります。

ファイルの設定
 
 
・ファイルサイズの上限 (バイト)
添付ファイルの上限サイズを入力します。空欄の場合は1MBが上限になります。

ファイルサイズはバイト数で入力しなくてはいけません。下の数値を参考に入力してみてください。

1MB = 1048576

2MB = 2097152

3MB = 3145728
 
 
・受け入れ可能なファイル形式
添付可能なファイルの形式を指定できます。

例えば、jpgとpngのファイルだけ受信可能にするには、

jpg|png

上記のように縦線で区切って入力します。
 
 

送信ボタンの設定

送信ボタンを作成します。

送信ボタンの設定
 
 
・ラベル
「送信」や「お申し込み」など、送信ボタンに表示したい文言を入力します。
 
 

フォーム作成の流れ

フォームの編集画面で、以上の入力項目を設置したい場所を選択しボタンをクリックします。

入力項目を設置したい場所を選択しボタンをクリック
 
 
設定項目を入力したら、生成されたコードをコピーし『タグを挿入』ボタンをクリックします。

『タグを挿入』ボタンをクリック
 
 
メールの設定画面を開き、[メッセージ本文]に先ほどコピーしたコードを貼り付けます。

コピーしたコードを貼り付け
 
 
以上の作業を繰り返すことで、フォームを作成できます。
 
 

スポンサーリンク

id/classの設定

お問い合わせフォームは、デフォルトのままだとシンプルなデザインですが、id/classの設定をすることで以下のようにカスタマイズすることもできます。

id/classの設定
 
 
それでは、設定方法を解説します。

※編集前は必ずバックアップを取っておきましょう。

 
 
最初にフォームのHTMLソースを記述します。
今回は、以下のように作成してみました。

 
 
次に、デザインを反映させるためにCSSの記述を行います。
 
 
管理画面の左メニューから『外観テーマの編集』の順にクリックして進みます。
すると、画面の右側にファイル名の一覧が表示されるので、『スタイルシート(style.css)』をクリックしましょう。

『スタイルシート(style.css)』をクリック
 
 
スタイルシートのソースが表示されたら、最後尾にあなたが作成したCSSコードを追加します。
今回、以下のようなソースを追加してみましたので、参考にしてみてください。

 
 
追加したら『ファイルを更新』ボタンをクリックし、編集を反映させます。
 
 
デザインを確認して問題がなければ、実際にフォームがうまく動作するかどうかも確認しておきましょう。

お問い合わせフォーム
 
 

3.問い合わせの受け取りに関する設定

今度は、実際に問い合わせがあった際のメールの受け取り設定を行います。

メール』タブをクリックし、以下のページを開きましょう。

『メール』タブをクリック
 
 
・送信先
お問い合わせを受け取るメールアドレスを設定します。
カンマで区切れば、複数のメールアドレスを設定可能です。
 
 
・送信元
受け取るメールの差出人表示を設定します。基本的にはデフォルトで大丈夫です。
 
 
・題名
受け取るメールの題名を設定します。「お問い合わせがありました。」などに統一しておくと便利です。
 
 
・追加ヘッダー
受け取るメールの返信先を指定します。CC:やBCC:の設定も可能です。
基本的にデフォルトの[your-email]のままで大丈夫です。
 
 

スポンサーリンク

4.サンクスメッセージの設定

お問い合わせしてくれた人に対する自動返信メールの設定をすることができます。
これは必須の設定ではないですが、お問い合わせしてくれた人に良い印象を持ってもらうためにも、ぜひ設定しておきましょう。

まず、[メール(2)]の『メール(2)を使う』にチェックを入れましょう。

『メール(2)を使う』にチェックを入れる
 
 
自動返信メールの設定画面が表示されます。

自動返信メールの設定画面
 
 
こちらは以下のように設定しましょう。
 
 
・送信先
[your-email]と入力します。
これ以外の送信先を入力すると、問い合わせた人にサンクスメッセージが届かなくなってしまうので注意してください。
 
 
・送信元
あなたの名前を入力します。デフォルトのままでも大丈夫です。
 
 
・題名
「お問い合わせありがとうございます」など、自動返信メールであることが分かる題名を設定しましょう。
 
 
・メッセージ本文
自動返信メールの中身を入力します。ここに入力した内容がそのまま確認メールとして、お問い合わせを行った方に自動返信されます。
お問い合わせしてくれた方に伝えたいメッセージを入力しましょう。

例:以下の内容でお問い合わせを承りました。
 
 

フォームの公開

全ての設定が完了したら、コンタクトフォームの編集ページ上部にある『保存』ボタンをクリックします。

『保存』ボタンをクリック
 
 
フォームのショートコードが表示されますので、これをコピーします。

フォームのショートコードをコピー
 
 
コピーしたショートコードを固定ページや記事に貼り付ければOKです。

コピーしたショートコードを固定ページや記事に貼り付け
 
 
公開』ボタンをクリックして、どのように表示されているか確認してみましょう。
 
 

まとめ

今回は、プラグイン「Contact Form 7」の初期設定と使い方について解説しました。

Contact Form 7を使えば、お問い合わせフォームやアンケートフォームなどの作成が簡単に行えるほか、チェックボックスやラジオボタンを設置したり、HTMLとCSSを駆使してデザインをカスタマイズすれば、あなただけのオリジナリティ溢れるフォームを作成することができます。

お問い合わせフォームを作るための基本的な機能が揃った素晴らしいプラグインですので、
Contact Form 7を活用してビジネスの幅をもっと広げましょう!
 
 

スポンサーリンク








簡単にお問い合わせフォームを作成!Contact Form 7の初期設定と使い方