ContactForm7の使い方。お問い合わせページの作り方

ContactForm7イメージ

ContactForm7は簡単お手軽にコンタクトフォームを設置できるWordPressのプラグインです。

ブログの読者が筆者、運営者とコンタクトを取るためのいわゆる「お問い合わせ」ページの設置はブログ運営をしていく上での必須ページの一つです(アドセンスを導入するなら特に)

ContactForm7を使えば必要充分なコンタクトフォームをぱぱっと作れてしまいますが、フォームを作るためのカスタマイズ画面の使い方は少し知識が必要です(といってもほんの少しです)

なのでこの記事でContactForm7を使ってコンタクトフォームを設置する方法。そして実際にお問い合わせページを作る方法を解説します。

ContactForm7を使う一連の流れ

ContactForm7を使うには、まずプラグインの新規追加でContactForm7を検索してインストールします。

※プラグインのインストール方法については
WordPressプラグインのインストール方法
を参考にしてください

通常のプラグインはインストール後「設定」メニューから設定画面にアクセスできるようになりますが、ContactForm7はちょっと違い「お問い合わせ」メニューから設定画面にアクセスします。

ContactForm7「お問い合わせ」メニューからIN

「お問い合わせ」メニューの
「新規追加」をクリックすると
「コンタクトフォームを追加」という画面になります。

ContactForm7新規追加

設定画面一番上にある記入欄はフォームのタイトルの記入欄です。
管理用のタイトルで表に出るものではありません。
何に使うフォームなのか自分で分かりやすいタイトルを付けておきます。

下の設定タブ(フォーム、メール、メッセージ、その他の設定)各項目を必要なものに設定して、右もしくは下にある「保存」ボタンをクリックして設定を保存します
※基本的にはデフォルトのままで問題なく使えます。

すると
「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」
というメッセージと共にショートコードが生成されます。

ContactForm7ショートコードをコピーしてください

別にあらかじめ用意した「お問い合わせ」ページ(固定ページで作成するのが一般的です)にこのショートコードをコピペして投稿すれば、はれてコンタクトフォーム、お問い合わせページの完成です。

ContactForm7投稿画面

作成したショートコードは
「お問い合わせ」メニューの
「コンタクトフォーム」からアクセス出来て
後からいつでも自由に設定を変えることができます。

ContactForm7コンタクトフォーム一覧

また、いくつもショートコードを作ることができるので、用途に分けて複数使い分けることも可能です。

ContactForm7の設定方法

  • フォーム
  • メール
  • メッセージ
  • その他の設定

4項目それぞれの設定項目について解説します。

フォームの設定

「フォーム」設定画面では、必要なフォーム(記入欄)を並べることが出来ます。
コンタクトフォームの必要な項目の選択、並び順など目に見える部分の設定です。

デフォルトでは

  • [your-name]
  • [your-email]
  • [your-subject]
  • [your-message]

4項目のショートコードとそれぞれの項目名が並んでいるはずなので、基本的にはそのまま利用できます。

また、このデフォルトの4項目は「メール」設定で使いますので削除したり修正したりしないでください。

ContactForm7フォーム設定 - コピー

他に必要な項目がある場合は、項目を挿入したい箇所にカーソルを合わせてから上に並んだフォーム挿入ボタンをクリックします。

なお、テキストエリアではショートコードと項目名などのテキスト以外にもHTMLタグを自由に使えます。

また、改行は<br />タグに、空白は<p>タグに自動的に変換されます

(おまけ)HTMLタグ<label>で囲むと親切
項目名とショートコード(記入フォーム)は<label>タグで囲むと親切です。

<label>タグは項目名とフォームを関連付けするHTMLタグです。
<label>タグで囲むと、項目名をクリックしてもフォームが選択されるようになります。


続いて、カスタマイズする時に使うフォーム挿入ボタンの説明を一覧で記します。

テキスト 単一行のテキスト記入欄を設置します
名前の記入欄を設置する時にこれを使用します
メールアドレス メアドの記入欄を設置します
URL URLの記入欄が必要な時にこれを使用します
電話番号 電話番号の記入欄を設置します
数値 数字の一覧から選択させる項目を設置できます
例えば年齢を帰入してもらう時などに使います
日付 日付を入力してもらう時にこれを使います
テキストエリア 複数行の自由記入欄を設置します
お問い合わせの本文を書き込む欄として使います
ドロップダウンメニュー
チェックボックス
ラジオボタン
任意のメニューを設置して選択してもらう場合に使います
承諾確認
クイズ
reCAPTCHA
条件の承諾や本人確認やロボットでないことの確認など、確認項目を設置する場合に使います。
ファイル ファイル(画像等)をアップロードするボタンを設置します
送信ボタン 最後に送信するために押すボタンです。
必ず設置する必要があります。

フォーム挿入ボタンのポップアップの解説

項目タイプ 必須項目のチェックを入れると記入必須の項目とすることができます。
名前、メアドの項目はチェックを入れておくといいでしょう。
名前 挿入するショートコードの管理用タイトルを付けられます。
分かりやすい名前を付けると後で管理しやすくなります
デフォルト値 フォームを空欄ではなく、あらかじめ記入された状態にして表示できます
このテキストを項目のプレースホルダーとして使用する デフォルト値に記入したテキストを説明文として使用するチェック。
何か記入すると見えなくなる枠内のグレーのテキストのこと
Akismet スパム判定プラグイン「Akismet」と連携するためのチェックです。
このチェックを入れておくと、入力項目をAkismetで判定し、スパムと判定した場合は送信をキャンセルしてメッセージを返すとことができます。
id属性
クラス属性
CSSによるカスタマイズをする際に任意の属性を付加するための項目です。
タグを挿入 上記設定を行ってから「タグを挿入」ボタンを押すと、ショートコードが生成されてテキストエリアに挿入されます。

メールの設定

「メール」設定画面では、使用するメアドやメールのタイトルなどを設定します。
ここを正しく設定しないと送受信できませんので注意が必要です。

基本的にはデフォルトのままで使用するのが安全です。

「送信先」が自分のメール受取に使うアドレスになっているかだけ確認すればOKです。

ContactForm7メール設定

メッセージの設定

「メッセージ」設定画面では、メールの送信が成功、あるいは失敗した時に表示されるメッセージを編集することができます。

ここも基本デフォルトのままで問題ありません。

ContactForm7メッセージ設定

その他の設定

ここはさらに突っ込んだカスタマイズを行う時に使用しますので、基本空欄のままでOKです。

ContactForm7その他の設定

ContactForm7を使って「お問い合わせ」ページを作る方法

それでは実際にContactForm7を使って「お問い合わせ」ページを作る手順を説明します。

手順は

  1. ContactForm7でフォームを1つ作る(デフォルトのままでOK)
  2. 生成されたショートコードをコピーするContactForm7ショートコードをコピーしてください
  3. 固定ページを1つ作る。タイトルは「お問い合わせ」とか「コンタクト」とか
  4. 本文欄に、先ほどコピーしたショートコードを貼り付ける
  5. 投稿

以上で「お問い合わせ」ページが完成します。

ただしフォームだけだとちょっと無機質な感じがするので、
「お問い合わせはこちらからどうぞ」
みたいな一文を付けたすのは良いと思います。
(僕は画像も1つ載せました)

ContactForm7を使えば、たったこれだけの手順で「お問い合わせ」ページが設置出来てしまいます。
簡単ですね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする