Contact Form 7の使い方

お問い合わせページを簡単に作成できるwordpressのプラグイン「Contact Form 7」の使い方を説明したいと思います。

1.「Contact Form 7」のダウンロード

①左のメニューバーから「プラグイン」→「新規追加」をクリック

②プラグイン検索で「Contact Form 7」と入力し「ENTER」

③「Contact Form 7」というプラグインが表示されるので、「今すぐインストール」をクリック

しばらくすると有効化ボタンに変化します。

④「有効化」ボタンをクリック

これで、「Contact Form 7」のダウンロードとインストールが終了です。

左メニューバーに「お問い合わせ」という項目が追加されます。

2.フォームの設定

①左メニューバーの「お問い合わせ」→「新規追加」をクリック

②「Contact Form 7」の編集（設定）画面に行きます。

デフォルトの設定で、

・お名前

・メールアドレス

・題名

・メッセージ本文

・送信ボタン

が設定されてます。

③フォームタグの種類

14項目のフォームタグが用意されています。

④テキスト・メールアドレス・URLの設定

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・デフォルト値：文字を入力することで、入力例を表示することができる。

□このテキストを項目のプレースホルダ―として使用するにチェックする事で（デフォルト値）表示するようになる。

・Akismet：□送信者の名前の入力を要求する項目にチェックを入れるとスパムメールを減らすことが可能（Akismetの設定が必要）

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする。

⑤電話番号・テキストエリアの設定

※「テキスト」「テキストエリア」の違いは、テキストが入力欄が1行に対して、テキストエリアは何行でも入力できるようになっています。

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・デフォルト値：文字を入力することで、入力例を表示することができる

□このテキストを項目のプレースホルダ―として使用するにチェックする事で（デフォルト値）表示するようになる。

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

④日付の設定

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・デフォルト値：文字を入力することで、入力例を表示することができる

□このテキストを項目のプレースホルダ―として使用するにチェックする事で（デフォルト値）表示するようになる。

・範囲：下限と上限で生年月日の範囲を指定できる

クリックするとカレンダーが表示され選択ができる

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

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

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・オプション：ドロップダウンメニューで表示したい項目を1行ずつ入力する

□複数選択を可能にする：□にチェックを入れると複数選択が可能になる

□空の項目を先頭に挿入する：□にチェックを入れると先頭の表示が空白になる

※表示例

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

⑥チェックボックスの設定

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・オプション：チェックボックスで表示したい項目を1行ずつ入力する

□ラベルを前に、チェックボックスを後に配置する：□にチェックを入れるとチェックボックスが右側に配置される（基本的には使わないと思う）

□個々の項目をlabel要素で囲む：□にチェックを入れるとチェック項目ごとに<label>で囲むようになる

□チェックボックスを排他化する：□にチェックを入れると1つのチェックボックスしか選択できなくなる（複数選択にしたい場合は必要なし）

※表示例（オプションの3つのチェックボックスにはレ点してない）

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

⑦ラジオボタンの設定

・名前：タグの英数字の名前（デフォルトで良いと思う）

・オプション：ラジオボタンで表示したい項目を1行ずつ入力する

□ラベルを前に、チェックボックスを後に配置する：□にチェックを入れるとチェックボックスが右側に配置される（基本的には使わないと思う）

□個々の項目をlabel要素で囲む：□にチェックを入れるとチェック項目ごとに<label>で囲むようになる

※表示例（オプションの2つのチェックボックスにはレ点してない）

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

⑧承諾確認の設定

主にプライバシーポリシーに同意しますか？のチェックなどに使うと思います。

・名前：タグの英数字の名前（デフォルトで良いと思う）

・同意条件：承諾確認したい事を入力する

・オプション：□チェックボックスを任意選択にする（必ずチェックしときましょう）

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

※表示例

⑨クイズの設定

・名前：タグの英数字の名前（デフォルトで良いと思う）

・クイズと回答：一行に一対の、パイプで区切られたクイズと回答 (例: ブラジルの首都は?|リオ) を入力

※表示例

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

⑩ファイルのアップロード設定

・項目タイプ：□必須項目にチェックを入れると必須項目になる

・名前：タグの英数字の名前（デフォルトで良いと思う）

・ファイルサイズの上限（バイト）：添付ファイルの上限サイズ（バイト数）を入力（空欄の場合は1MBが上限）

・受け入れ可能なファイル形式：ファイルの形式を指定（例：jpg|png）※パイプで区切る

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

※表示例

⑪送信ボタンの設定

・ラベル：送信ボタンに表示したい言葉を入力（例：送信）

・ID属性・クラス属性：CSSなどでデザインを修正したい時にしようする

※表示例

3.メールの設定

①フォームの隣にあるメールタブをクリックします

メールタブでは、「自動返信メール」の設定することができます。

②下にスクロールし、「メール（2）」にチェックを入れる

チェックを入れると、自動返信メール作成用の設定画面が表示されます。

※メール（2）上のメール設定は特に設定しなくて良いと思います

③自動返信メールの設定（メール2）

・送信先： [your-email]（デフォルト設定で良いと思います）

※ [your-email]以外にすると自動返信メールがお問い合わせした人に届きません

・送信元：あなたの名前やサイト名を入力

・題名：自動返信メール件名を入力する（例：お問い合わせありがとうございます等）

・メッセージ本文：自動返信メールの内容を入力する

4.メッセージの設定

様々な状況で用いられるメッセージをここで編集できます。

デフォルト以外の言葉にしたい方は編集してあげて下さい。

5.その他の設定

その他の設定で、サンクスページの設定ができます。

サンクスページとは、お問い合わせや資料請求、購入などでユーザーに行動を起こしてもらった後に表示するページのことです。

表示したい場合は、

以下のコードを入力しましょう。

1on_sent_ok: “window.location.href =’サンクスページのURL’;”

サンクスページを作る事で、送信できたかどうかを確認できるので設定してあげてた方が良いと思います。

以上で、一通りの設定が終了です。

5.フォームの表示

①設定が終了したら必ず、「保存ボタン」をクリックしましょう

②ショートコードをコピーする

青い背景なので、コピーしてるときの範囲がわかりずらいです・・・ちゃんとコピーできているか、気をつけてください。

③表示したい場所に貼り付ける

表示したい投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください。

④貼り付け手順（投稿ページ・固定ページの場合）

（1）⊕ボタンをクリック

（2）ウィジェットをクリック

（3）ショートコードをクリック

（4）ショートコードをペーストする

プレビューなどで表示して、問題なく表示出来たら完成です。

できない人はコメント下さい。

6.「Contact Form 7」のまとめ

色々と設定ができる非常に優秀なプラグインだと思います。

凄く簡単にお問い合わせが設置できるのでお勧めです。