WordPressで問い合わせフォームが簡単に作れる!?「Contact Form 7」のカスタマイズ最新情報2019

WordPressで問い合わせフォームが簡単に作れる!?「Contact Form 7」のカスタマイズ最新情報2019

CSS WordPressで問い合わせフォームが簡単に作れる!?「Contact Form 7」のカスタマイズ最新情報2019
交互に見ながら作業をするのは意外と面倒です。モバイルで見ながら、パソコンで操作できるようにこのページのQRコードを張っています。QRリーダーで読み込んで活用してください。モバイル用URL QRコード

Contact Form 7ってなに?

問合せフォームはHTMLだけでも作成は可能ですが、HTMLコードを確認するとメールアドレスがすぐわかってしまいます

そのようなことにならないように、基本的にはPHPやCGIで作成するのですが、今日明日から学んですぐできるものではありません。

「Contact Form 7」は簡単に問い合せフォームや自動返信機能を付けることができるWordPressのプラグインです。

ただ、直感的にわかるものではないので、使い方やカスタマイズの方法を解説していきます。

Contact Form 7の導入方法(インストール)

Contact Form 7インストール準備1・プラグイン検索ウィンドウに

プラグイン>新規追加をクリックして、右上の検索バーに”Contact Form 7”と入力・検索すると表示されますので、「今すぐインストール」をクリック。

Contact Form 7インストール準備2・”有効化”をクリックして、インストール完了です。

”有効化”をクリックして、インストール完了です。

Contact Form 7の基本的な利用方法

問い合わせフォームの作成

Contact Form 7初期画面画像

管理画面の外観の上に”お問い合わせ”という項目が増えてるので、そこをクリックして、「新規追加」をクリックすると上記の画面が開きます。

初期の状態は、”お名前”・”メールアドレス”・”題名”・”メッセージ本文”の4つのみで構成されています。

このままでも十分な方もいるかと思いますが、基本的にはここで必要な項目をたしたながらフォームを作っていきます。

Contact Form 7・作成可能フォーム一覧画像

作成できるフォームは作成フォームの上にあり、それぞれ必要なフォームが作成できます。

テキスト一般的な名前や住所など、文字・数字どちらでも入力が可能ですが、適当に入力もできてしまいます。
メールアドレスメールアドレスだけのフォームです。活用例:希望連絡先、メルマガ登録など。
URLホームページやブログのサイトURLを入力するフォームです。相互リンクなどには便利かもしれません。

電話番号電話番号だけのフォームです。活用例:希望連絡先、確認用連絡先など。
数値数値のみ入力できます。活用例:注文個数やその他数字のみで構成される要素。
日付日付のみ入力できます。選択可能年月日の範囲指定もできます。活用例:希望発送日、連絡希望日など。
テキストエリアメール本文など長文での利用が必要なときに利用できます。
ドロップダウン選択肢が多くある場合に主に利用できます。1フレームに1つのみの選択です。活用例:商品選択、都道府県、問い合わせ内容、性別など
チェックボックス選択肢が複数あり、複数選択可能な場合に利用できます。活用例:商品選択、アンケート、問い合わせ内容など。
ラジオボタンドロップダウンほど多くない選択肢で1フレームに1つのみの選択が可能です。活用例:商品選択、問い合わせ内容選択、アンケートなど
承認確認同意用のチェックボックスです。チェックボックスにチェックが入ってないとフォームを送信することはできません。活用例:利用規約同意など
クイズ問いと答えを設定できるボックスです。問いに対して答えを入力しないと送信できないようにすると、CAPTCHA の代わりに利用ができます。
ファイルファイルを添付できるフォームボックスです。身分証や相見積比較するときなどのPDFを添付してほしいときに活用できます。
送信ボタンこれがないと送信できませんので、つくりかえた時も必ず付けるようにしてください。
一原 妃魯
一原 妃魯

項目が多いときは必要なものがどんなものか、事前に紙とかに書いて整理するとフォーム作成がスムーズにいくよ。

作成したいボタンをクリックすると上記の画面が表示されます。

Contact Form 7・作成可能フォーム一覧画像

① 必須項目にするかどうかの選択です。

チェックを入れると入れた項目は、入力や選択をしないと送信ができないようになります

メールを送ってもらう情報で絶対に必要な項目にはここにチェックを入れてください。

ただ、住所入力を分ける場合、建物名などにチェックをいれると戸建ての人は送信できなくなってしまうので、気を付けてください。また、全てを必須項目にすると面倒で敬遠されがちになるので、必須にするしないはよく考えて選択してください。

② 任意の名前を決めます。

半角英数のみの利用が可能で、返信・確認メールなどで利用するので、自分がわかりやすい名前を付けてください。

③ デフォルト値はテキストなどに最初から表示させるものです。

プレースフォルダーにするしないの選択があります。

・プレースフォルダーにしない(チェックをいれない)・・・初期値でテキストが入力されている。リアルなテキストなため入力者が変更する場合はテキストを消す必要があります。

・プレースフォルダーにする(チェックをいれる)・・・テキストは入力見本表示になるので、テキストが入力されている状態にはなりません。テキストバーをクリックすると文字は消えます。(表示文字はグレーになります。)

プレースフォルダーにしてるフォームとしていないフォーム

④ ボックス1つ1つのidタブでid名を設定できます。(idタブの為同じ名前は設定できません。)

⑤ ボックス1つ1つのclassタブでclass名を設定できます。

必要な項目を作成して、記入してほしい順に並べていけば基本的な入力フォームは完成です。

Contact form 7 基本フォーム作成後の見本画像

受信メール内容の設定

「Contact form 7」から送信された情報を受信するための設定が必要になります。

その設定をするために”メール”タグをクリックするのですが、クリックすると以下の画面が出てきます。

フォームはテキストと作成したショートコードが利用できます。

赤枠で囲まれているのが、現在利用しているショートコードなので、ショートコードを張り付けるとその項目に入力された内容が反映されます。

Contact form 7のメール設定・変更画面

① 送信先:自分が受信したいメールアドレスに変更してください。

② 送信元:ここはワードプレスの登録メールが設定されますので変更しない方がいいと思われます。

③ 題名:受信した時にわかりやすいタイトルに変更してください。例:●●●●(サイト名)問合せメール[名前タグ](赤枠のタグも利用できますので、名前のタグなどを入れても分かりやすいです。)

Contact form 7のメール設定・変更・本文設定画面

■追加ヘッダー:送信先とは別に送信するメールアドレスなどを記載します。お客様向けの確認メールを兼用する場合はメールアドレスのショートコードをいてれおくとお客様のメールにも同じメールが送信されますが、私個人は別で自動返信メールを作成しているので、ここはブランクにしています。

■メッセージ本文:送られてくるメールの本文ですが、テキストやショートコード、HTMLタグの利用が可能です。

お客様向けの確認メールにする場合はそれなりのあいさつ文などを入力してください。

前の画像の赤枠の場所に今回利用しているショートコードが全て表示されていますので、ショートコードは全てコピペしてください。

■記載例名前:[your-name]メールアドレス:[your-email]メール本文:[your-subject]

ショートコードだけだと、メールの内容は入力したものだけ表示されて、項目はわからなくなることがありますので、上記のように必ず項目にタイトルは付けてください。(契約者名と担当名を入力した場合や契約番号と連絡先番号を入力した場合など、どっちがどっちかわからなくなります。)

また、数値で設定して単位がある場合は、タグの後にその単位を付けておくとわかりやすくなります。

■添付ファイル:ファイルのタグを利用したときにここのスペースにファイルのショートコードを張り付けてください。

一原 妃魯
一原 妃魯

フォームに張り付けてあるショートコードを張り付けても繁栄されないよ。必ずここで表示されてるショートコードを使ってね。

利用者向けの自動返信メールを作る

Content form 7 で自動返信メールを作るためにはメール (2)にチェックを入れる

確認メールとは別にお客様宛に自動返信メールの作成も可能です。

先ほど作った確認メールの一番下にメール(2)にチェックを入れると、以下のフォームが表示されます。

Content form 7自動返信メール作成フォーム全体画像

送信元お客様のメールアドレスのショートコードを入力してください。
送信元ここは変更しないでください。
題名”●●●●(サイト名)|お問い合わせいただきありがとうございます”などお客様が認識しやすい題名を付けてください。
追加ヘッダー送信確認したければ、Replay-To:の後に自分のメールアドレスを入力してください。不要であればブランクで構いません。
メッセージ本文お客様へのお礼分と内容確認のために入力項目のショートコードを張り付けるといいと思います。確認メールと同様、項目タイトルや単位がある場合はそれらも全て入力してください。ショートコードのみだと、受け取った側はわかりづらい内容になります。
一原 妃魯
一原 妃魯

自動返信メールは無理して作らずに、確認メールを共有してもいいけど、自分だけに分かるように整理したほうがいい時もあるから、必要なら活用してね。

簡単なレイアウトカスタマイズ

Contact Form 7のデフォルトのレイアウトは非常に質素で、ただ羅列されているように見えます。

Contact Form 7のデフォルトのフォーム画像

これを少しでも問合せフォームにするように、tabelタグを使って以下のようなフォームにします。

Contact Form 7をテーブル形式でレイアウトの変更後のフォーム画像

レイアウト自体は非常に簡単です。

Contact Form 7のフォーム画面で以下のような形でtableタグで囲んで作ります。

送信ボタンはtableタグの外に出して記述してください。

レイアウト例
<table>
<tr><td> お名前 (必須)</td><td> [text* your-name] </td></tr>
<tr><td> 電話番号</td><td>[tel tel-216]</td></tr>
<tr><td>メールアドレス (必須)</td><td> [email* your-email] </td></tr>
<tr><td>連絡可能日(必須)</td><td>[date date-910] </td></tr>
<tr><td>題名</td><td> [text your-subject] </td></tr>
<tr><td>メッセージ本文</td><td> [textarea your-message] </td></tr>
</table>

[submit “送信”]

例えばこの表に”入力項目””入力フォーム”などのヘッダータイトルを付けたい場合は、一番上に一行足して、<tr></tr>の間をthタグに変更して<th>入力項目</th><th>入力フォーム</th>のように記載すると、ヘッダータイトルができます。

まとめ

Contact Form 7は非常に便利なプラグインですが、直感的には利用が難しいかもしれません。

ただ、問い合わせフォームや注文フォームなど慣れると簡単に作成ができますので、是非活用してください。

万が一わからない場合は複雑なカスタマイズ等については、対応できかねる場合がありますが、無料サポートを開設したので活用してください。

E-blogate|イーブロゲート

 パソコンを扱っていて、あれ!?これどうするの?どうしたらいいの?困った・・ということがあると思います。 周りでも色…

WordPressで問い合わせフォームが簡単に作れる!?「Contact Form 7」のカスタマイズ最新情報2019
最新情報をチェック‼