Contact Form 7とは?Worepressで簡単に便利なフォームを作るプラグインの設定&使い方

Wordpressで簡単にフォームを設定する方法
  • このエントリーをはてなブックマークに追加

WordPressでお問い合わせフォームや相談フォームなどを作る際に、
無料でフォームを作る事が出来るのがContact Form7というプラグインです。

通常、フォームを作ろうとすると、
多少の専門的知識が必要だったり、
有料のフォームを利用したり、
無料で会員登録をする必要などがあったりしますが、
Contact Form7であればWordpressにプラグインを入れるだけで
簡単にフォームを作る事が出来るようになります。

また、複数のフォームを作る事が出来るので便利でおすすめなプラグインです。

そんな便利なプラグインContact Form7の
設定と使い方を紹介したいと思います。

 

Contact Form7のインストール方法

まずはContact Form7のプラグインを入れる必要があります。
プラグインの入れ方が分からない方はこちらを参考にしてください。

便利なインターネットブラウザのGoogle Chromeのダウンロード&拡張機能(プラグイン)の入れ方

Contact Form7のプラグインを入れたら設定をしていきましょう。

Contact Form7でフォーム新規追加

Contact Formを使うにはまずはフォームを新規追加する必要があります。

Contact Form7をインストールするとメニューバーに「お問い合わせ」という項目が表示するので、
「お問い合わせ」→「新規追加」をクリックします。

contactform7新規追加

新しいフォームを設定していきます。

Contact Form7設定
  • フォーム名:
    フォーム名を自由に決めて入力します。
  • 項目:
    追加したい項目をクリックすると枠内に追加されます。
    よくわからない場合はデフォルトの状態でも良いと思います。

  • 設定内容:

各項目設定について

各項目をクリックすると各項目の設定画面が表示されます。
以下の各項目の設定画面についてご説明いたします。

  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承諾確認
  • クイズ
  • reCAPTCHA
  • ファイル
  • 送信ボタン

テキスト、メールアドレス、URL、電話番号、数値テキストエリア

テキスト、メールアドレス、URL、電話番号、数値、テキストエリアは、
入力項目がほぼ同じ内容の為ため、
まとめて説明いたします。

これらの項目は使用頻度が高いと思うので、
使い方になれてください。

Contact Form7テキスト
  • 項目タイプ:
    必須項目にしたい場合はチェックを入れる。

  • 名前:
    デフォルトのままでOK

  • タグを挿入:
    設定が完了したら「タグを挿入」をクリックしてタグを入れる

日付

フォームで予約などを受け付けたい場合に日付項目を入れておくと良いでしょう。

 

Contact Form7日付
  • 日付:
    日付の範囲を設定しておきましょう。(任意)

ドロップダウンメニュー

フォームにドロップダウンメニューを入れたい場合に使います。

Contact Form7ドロップダウンメニュー
  • オプション
    オプションにドロップダウンメニューに入れたい項目を一行ずつ入力します。
  • 複数選択を可能にする
    複数選択可能にしたい場合はチェック
    を入れます。

    空の項目を先頭に挿入する
    空の項目を先頭に挿入する場合はチェック

チェックボックス、ラジオボタン

Contact Form7チェックボックス
  • オプション:
    オプションにチェックボックスに入れたい項目を一行ずつ入力します。

  • ラベルを前に、チェックボックスを後に配置する:
    チェックボックスを右に配置したい場合にチェックします。

  • 個々の項目をlabel要素で囲む:
    label要素で囲みたい場合にチェックをします。(CSSを作成する場合にデザインで有効的)
  • チェックボックスを排他化する:
    こちらにチェックを入れる事で1つのチェック項目しか選択できなくなります。
    複数の選択項目を選択させたい場合はチェックを外しておいてください。

承諾確認

「規約に同意する」などの承諾確認したい際に使う項目です。

Contact Form7承諾確認
  • 同意条件
    同意してもらいたい項目をテキストで入力
    します。
    (例:規約に同意する場合はチェックする)

  • このチェックボックスをデフォルトでチェックされた状態にする
    ここにチェックを入れておくことでデフォルトで同意チェックが入った状態になります。
    ユーザーがわざわざチェックしなくてよくなるのでコンバージョンが高くなるので、
    チェックをいれておくことをおすすめします。

  • これの挙動を反対にする
    チェックを外す事で同意するようにする設定です。
    滅多に使う事が無い項目だと思います。

クイズ

キャンペーン等でクイズなどを設定したい場合に使う項目です。

Contact Form7クイズ
  • クイズと回答
    クイズの問題と解答を「|」で区切って1行毎に入力
    します。

      【例】
    クイズ:犬を英語で言うと?
    回答:dog
    入力例:犬を英語で言うと?|dog

ファイル

ファイルを添付して送る事が出来るフォームを作りたい時に設定する項目です。
求人フォームなどで履歴書などを送ってもらう時に便利な項目です。

Contact Form7ファイル
  • ファイルサイズの上限(バイト)
    ファイルサイズの上限をバイト数で入力する必要があります。
    空欄の場合は1MBが自動的に上限となるため、上限が1MBで良い場合は空欄のままで大丈夫です。
    【参考バイト数】
    1MB = 1048576
    2MB = 2097152
    3MB = 3145728 

  • 受け入れ可能なファイル形式
    ファイル形式を入力します。
    複数のファイル形式を入力する場合は「 | 」で区切ります。

    【記入例】
    jpg|gif|png|pdf

送信ボタン

送信ボタンはデフォルトで入っているのであまり追加する事は無いと思いますが、
万が一削除した場合に追加してください。

Contact Form7送信フォーム
  • ラベル
    ラベルに入力する事で「お問い合わせする」「相談する」「今すぐ送る」など
    送信ボタンの文言を変更する事が出来ます。

 

フォームを保存してフォーム設置ページの作成

ここまででフォーム項目の設定は完了です。

「保存」をクリックします。

保存をクリックすると、
画面上部にフォームのショートコードが表示されます。

ショートコードをコピーしてメモ帳などに貼り付けてメモしてください。

Contact Form7 ショートコード

フォームを設置する固定ページを新規作成します。
(ショートコードを貼り付けるページを作成します。)

「固定ページ」 → 「新規作成」をクリックします。

固定ページ新規作成

フォームを設置するページを作成します。

Contact Form7フォームページ作成
  • ①フォームを設置するページタイトルを入力します。
  • テキストエディタを選択(ビジュアルエディタのままだとフォームが設置できません。)
  • ③先ほどコピーしたフォームのショートコードを貼り付けます。
  • ページを公開します。

最後に公開したページを確認してフォームが無事設置されていればフォームの設置は完了です。

お問い合わせ通知メールの設定

お問い合わせが来た際に自分宛に通知するメールの設定をします。
Contact Form7で「メール」タブを選択します。

Contact Form7メール設定
  • 送信先:
    受信するメールアドレスを入力します。
    カンマ区切りをする事で複数のメールアドレスを設定する事が出来ます。

  • 送信元:
    受け取るメールの差出人名を入力します。
    サイト名などにしておくことで
    どのサイトからお問い合わせなのかを一目でわかるようにする事も出来ます。

  • 題名:
    受け取るメールの件名を入力します。
    こちらも分かりやすい件名にしておくことで
    どのサイトからのお問い合わせかをすぐに分かるようにすることが出来ます。

  • 追加ヘッダー:
    受け取るメールの返信先を設定する事が出来ます。
    基本的にはデフォルトで問題ありませんが、返信先アドレスを指定したい場合は入力してください。

  • メッセージ本文:
    受信する本文を設定する事が出来ます。
    デフォルトで問題ないが、
    自分用に見やすい設定にするのも良いと思います。

自動返信メール設定

お客様からお問い合わせがあった際に、
すぐに自動返信メール設定を送る設定をします。

「メール(2)」を使用にチェックを入れます。

Contact Form7自動返信メール設定
  • 送信先:
     [your-email] と入力
    します。
    このように入力しないと自動返信メールが送られなくなってしまいます。

  • 送信元:
    お客様に自動返信メールを送る際にあなたからのメールと分かるような送信者名を入力します。

  • 題名:
    自動返信で送られるメールの件名です。
    こちらもあなたからのメールと分かるような件名を入力してください。

  • メッセージ本文:
    こちらに入力したメッセージが自動返信メールでお客様のもとに届きます。

    【本文に入れておくと良い内容】
    ・お客様の名前
    ・お問い合わせ等へのお礼文
    ・あなたの名前(もしくはサイト名等)
    ・お問い合わせの内容確認([your-message]と入力すると自動で入力されます)
    ・フッダー(あなたの名前、住所、サイトURL等)

 

メッセージ設定

お客様がフォームを入力した際に表示するメッセージを設定する事が出来ます。
デフォルトでも問題ありませんが、
変更したい場合は変更しましょう。

Contact Form7で「メッセージ」タブをクリックします。

Contact Form7メッセージ

必要に応じて変更をしてください。

設定が上手くいっているか確認

ここまででContact Form7の設定は完了です。

先ほどContact Form7を設定した固定ページを開いて、
一度、自分でフォーム送信をしてみてください。

以下の点を確認してください。

  • フォームがちゃんと送信が出来るか?
  • お問い合わせフォーム送信通知メールが設定したメールアドレスに届くか?内容に問題ないか?
  • 自動返信メールが送信したメールアドレスに届くか?内容に問題ないか?

これらを確認して、
問題が無いようであればフォームの設置は完了です。

問題があるようであれば、
再度、上記を見直して、設定を変更してください。

さいごに

Contact Form7は慣れればとても簡単にフォームを作成する事が出来ます。

また、高機能なフォーム設定する事も出来るので、
色々といじって使いこなしてみてください。

お問い合わせや相談があるのは、
お客様が反応をしてくれている証拠です。

どんどんお問い合わせや相談を増やせるように使いやすいフォームをContact Form7で作りましょう。

この記事が少しでも役に立ったと思ったら応援クリックをお願い致します。

 ↓  ↓  ↓  ↓  ↓

 にほんブログ村 小遣いブログ お金の稼ぎ方・稼ぐ方法へ


▼おすすめの無料教材▼

今なら登録者全員に1万円プレゼント

次世代起業家育成セミナー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください