
問い合わせフォームを設置出来るContact Form 7 の使い方
カテゴリ:WEB制作


お問い合わせフォームが簡単に作れる定番プラグイン、Contact Form 7 の使い方を解説します。
インデックス
目次
1.プラグインのインストールと有効化
まず、プラグインを検索して有効化します。プラグイン→新規追加でプラグインの検索画面を表示して[Contact Form 7]を検索してインストールをクリック

インストールが終わったら有効化をクリック

2.フォームを作成
お問い合わせ→新規作成でフォームの作成画面へ

自分の入れたい項目に名前を付けます。その名前に合わせた機能をクリックするとウインドが立ち上がります。

下記が挿入のウインドウで必須項目にチェックを入れると文字通り必須項目になりデフォルト値、このテキストの項目のプレースホルダーとして使用するを入力すると、よく有るグレーで初期値(記入見本)が入っている状態で表示出来ます。

必須項目については【*(アスタリスク)】を機能名の横 [text* your-name] のように入れると必須項目になります。
3.お問い合わせ通知用メールの作成
まずは自分の所に届くメールの設定を行います。[your-○○○]でユーザーの入力した項目が取り出せます。送信先は自分のメールアドレスを入れてください。

4.ユーザーへの自動返信メールの作成
メール2を使用をチェック入れるとメールの送信先を追加出来ます。送信先を[your-email]にすると自動返信でユーザーにメールが届きます。送信元には自分のアドレスとかを入れてください。下記設定の例です。

5.エラー(例外)時のメッセージを変更する
入力ミスやモレなどがあった際にでるエラーメッセージを変更が出来ます。

6.設置〜完了
あとはこの部分のコピーします。

記事にペーストします。

完成です。

7.まとめ
以上で設置完了です。CSS等の知識があればデザインを変更する事も可能です。