Contact Form 7 プラグインでお問い合わせフォームの作り方

画像:Contact Form 7 お問い合わせフォームの作り方

WordPressでお問い合わせフォームを作るならContact Form 7は是非使いたいプラグインの1つです。しかも無料!

Contact Form 7を使えばユーザーからのお問い合わせを受けたり、サンクスメールなど自動返信メールも送る事が出来ます。初心者でも簡単に設定が出来るのも魅力です。

ユーザー目線で言えば、問い合わせをメールソフトで送るより、フォームで入力する方がハードルが低いんです。
つまりユーザーとの接点が持ちやすくなり、ブログやサイトの運用にも役立ちます。

ここではよくあるタイプのお問い合わせフォームの作り方を、画像を交えて解説していますので参考にしてくださいね。

ウェブ制作の仕事でもよく使うくらい有名です。

本来ならHTMLやCSSだけでなくプログラムも必要になります。
セキュリティやUI・UX面も考慮すると自作するのはそれなりに大変です。

Contact Form 7とはどんなプラグイン?

画像:Contact Form 7プラグインのインストール画面
Contact Form 7プラグイン インストール画面

ダッシュボードの「プラグイン」→「新規追加」→「Contact Form 7」を入力。画像の様に分かり易いです。

Contact Form 7で出来る事の一例ですが、

  1. 名前やメールアドレスなどの入力項目を作れる。
  2. 入力項目もカスタマイズが簡単。
  3. 自動返信メールも簡単に作れる。
  4. 日本語マニュアル完備。

Contact Form 7は専門知識のない方でも比較的簡単に設定できる為、非常に人気のプラグイン。インストール数を見ても凄さがわかります。

作者: Takayuki Miyoshi
参考Contact Form 7のFAQページ 充実した日本語のマニュアルもあるので安心です。

コンタクトフォーム 新規追加

画像:Contact Form 7 コンタクトフォーム新規作成画面
コンタクトフォーム新規作成画面

プラグインをインストールすると、ダッシュボードの左メニューに「お問い合わせ」項目が追加されます。

①新規追加

投稿などと同じで、「新規追加」ボタンでフォームを作成します。ちなみにフォームは複数作成可能。

1.フォームタブ

画像:Contact Form 7 コンタクトフォーム編集画面の説明
コンタクトフォーム編集画面

まずは画面の各項目の説明からしますね。フォームは複数作れるので、分かりやすい名前を付けましょう。お問い合わせページに表示されるわけではありません。

投稿ページ内や固定ページ内にショートコードを貼り付けると、HTMLタグに変換されてフォームになります。保存してプレビューで表示確認してくださいね。

コンタクトフォームの編集

画像:Contact Form 7 フォームタグの説明画面
フォームタグの使い方

ここに入れた項目が、お問い合わせフォームとして実際に表示されます。画像の様に、新規作成するとフォームテンプレートがすでに初めから入っています。

①カーソルで選択

まず、項目を入れたい場所をクリックしてカーソルを合わせます。場所は以下、

<label>ここはHTMLタグです。ここにカーソルを合わせます。</label>

項目を増やしたい時は<label>○○○</label>の記述をコピペして、中の項目を入れ替えればOKです。

②フォームタグをクリックして追加

次に名前やメールアドレスなど、入れたい項目をフォームタグの中から選んでクリックします。
すると入力画面がポップアップしますので、必要項目を入力します。

フォームタグ生成の説明(例:メールアドレスの場合)

画像:Contact Form 7 フォームタグ生成の説明
フォームタグ生成の説明

フォームタグは最終的にHTMLに変換されてフォームの入力項目になります。

テキストやURLなど、タイプによって入力内容は変わります。画像はメールアドレスのフォームタグ生成の説明です。

①項目タイプ

必須項目にチェックを入れると、入力が必須になります。
例えば名前やメールアドレスなど、必ず入力して欲しい項目などですね。

②名前

フォームタグに付ける名前。ユーザーに表示されるものではありません。

➂デフォルト値

画像:Contact Form 7 プレースホルダーの説明
プレースホルダーの説明

ここに入れた内容が入力された状態で入力欄が生成されます。このテキストはユーザーが編集も出来ます。

「この項目をプレースホルダーの項目として使用する」にチェックを入れると、プレースホルダーとして扱われます。

プレースホルダーとは

入力フォームの入力欄 (テキストボックスやテキストエリア) の中に記述される、入力に関する説明を示したテキスト。あくまで説明用なので入力すると説明テキストは消える。

④ID属性・クラス属性

CSSでレイアウトを変更する際に使うidとclassを入れます。CSSが使える人向け。

⑤生成されたタグ

ここに生成されたタグが表示されます。これを使います。

⑥タグを挿入

「タグを挿入」ボタンを押すと、先ほどカーソルを合わせた場所にタグが挿入されます。

フォームタグを挿入した場合は、後述する「メールタブ」も編集する必要があります。

※フォームタグを編集・挿入したら「保存」ボタンを押してください。ここでの変更内容を次のメールタブに反映させる為です。

2-1.メールタブ

画像:Contact Form 7 メールタブの説明
メールタブの説明

フォームタグを編集した場合、このメールの設定も同じように編集させる必要があります。

①フォームタグ一覧

フォームタブ側で使っているタグが表示されます。もしフォームタグを生成していれば、そのタグが太字で追加表示されます。
メールタブでは挿入したい場所にタグをコピペしてください。

②送信先

メールを受け取るのはフォームを設置した自分自身なので、メールを受け取れるアドレスを指定します。初期設定はWordPressになっているので、自分のアドレスに変更してくださいね。

サーバー側でお問い合わせフォーム専用のアドレスを作っておくと、何かあっても対処しやすいです。

サーバーの管理画面からチェックするのは面倒なので、メールソフトに転送してます。

③送信元

どこから来たメールなのか、受け取った側が分かる様に名前を付けると良いです。
初期設定はWordPressになっているので、サイト名やサービス名・キャンペーン名などに変更するのがおすすめ。

④メッセージ本文

フォームに入力された内容が入ります。画像では「メッセージ本文:[your-message]」だけですが、この上か下に、別のフォームタグを張り付ける事も出来ます。

目的はフォームから入力された内容を受け取る事なので、フォームタブ内で実際に使ったフォームタグを貼り付ける事になります。

例えば、フォームタブ側でドロップダウンを作った場合、ドロップダウンのフォームタグを貼り付ければユーザーがどれを選択したのかをメール内容で確認出来ます。

2-2.自動返信 メールタブ

画像:Contact Form 7 自動返信の説明
自動返信の説明

自動返信メールを設定すると、問い合わせてきたユーザーに対して自動で返信を返す事が出来ます。
「○○様。お問い合わせありがとうございます。」みたいなメールですね。

お問い合わせ内容も併せて表示する設定にしておけば、ユーザーに対しても親切。リマインドになります。

①メール(2)を使用

チェックを入れると新たにメールテンプレートが使用できます。使い方は色々あるのですが、自動返信で使う事が多いです。

②送信先

この場合、フォームで入力してもらったユーザーのメールアドレスが入ります。
フォームタブ内のフォームタグと合わせてくださね。

➂送信元

ここはフォームタブと同じでフォーム様に用意した自分のメールアドレスでOKです。

④追加ヘッダー

To以外にもCcやBccが指定できます。

公式参考:Cc、Bcc、その他のメールヘッダーを追加するには

⑤メッセージ本文

フォームで送信したユーザーに返信される内容です。画像では「メッセージ本文:[your-message]」だけですが、この上か下に、フォームタブで使用した「フォームタグ」を張り付ける事も出来ます。

つまり、送信を受けたった旨と送信内容の確認を伝える意味合いですね。

3.メッセージタブ

画像:Contact Form 7 メッセージタブの説明
メッセージタブの説明

お問い合わせフォームで何かを入力し、送信ボタンを押した際に表示されるメッセージを編集する事が出来ます。

例えば、入力漏れがあったり、何らかの理由で送信エラーがあった時などにメッセージが出ます。
うまく送信できた時もメッセージが出ます。

メッセージを表示させると親切です。ユーザーはエラー時に何がダメだったのか確認出来ますし、上手く送信できた時でもメッセージが出ると安心します。

4.その他の設定タブ

上級者向けの内容になります。

例えば、ログインしているユーザーだけがコンタクトフォームの送信を行えるようにする場合など。

こういう時は購読者限定モードを使います。このモードでは、ログインしていないユーザーはコンタクトフォームの送信ができず、代わりにログインが必要だというメッセージが出ます。

ログインしているユーザーは通常どおり使うことができます。

まとめ

編集ページの上の方にあるショートコードを固定ページに貼り付ければ完成です。

Contact Form 7は設定が簡単なうえ、日本語のマニュアルもしっかりしているので使いやすいです。
フォームタグの種類は沢山あるので、目的に合わせて追加してくださいね。

サイトやブログを運営するならお問い合わせフォームは必要なので、プラグインを活用しましょう。

画像:SiteGuard WP Plugin設定と使い方 WordPressプラグイン
画像:第2回 WordPressでブログの始め方 プラグイン導入から記事投稿まで