プラグインを検索し導入
まずは、「メニュー → プラグイン → 新規追加」から「Contact Form 7」を検索して、「今すぐインストール」をクリック後、「有効化」をしてください。
(有効化済みの状態ですが)アイコンは下記になりますので、検索時の参考にしてください。
有効化が終わると、「外観」メニューの上に「お問い合わせ」メニューが現れます。
これで、準備は整いました。
Contact Form 7の仕組み
Contact form 7は、管理画面上から簡単にフォームを作れるプラグインでフォームの作成時・設置時において、動的な部分は全てショートコードを使って制御できるフォームプラグインになります。
下記のようなショートコードを設置したい任意の場所(固定ページなど)に挿入するだけで、管理画面から作成したフォームが自動で生成される仕組みになっています。
フォーム設置用ショートコード例:
[contact-form-7 404 "Not Found"]
フォームの項目について
フォームの内容は下記項目から選択し、項目毎に発行されたショートコードを挿入し利用していく形になります。
- テキスト
- メールアドレス
- URL
- 電話番号
- 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾確認
- クイズ
- reCAPTCHA
- ファイル
- 送信ボタン
設定方法について
フォームの「新規追加」をクリックすると、下記のような画面が表示されます。
デフォルトで「お名前」「メールアドレス」「題名」「メッセージ本文」「送信」が設置されている状態となり、それぞれlabelとspanタグで囲われていますが、この部分は、単純なHTMLなので自由にカスタマイズしてください。
項目名の書かれたボタンを押すと、ポップアップが表示されます。
このポップアップで項目名称等を設定し、「タグを挿入」をクリックすると、カーソルの当たっていた部分にショートコードが挿入されていきます。
「メールタブ」をクリックすると、自分宛に届くメールや送信者に送られる自動返信メールの設定ができますので、このポップアップ時に設定した「名前」を使って、メール本文内にタグ(キャプチャの場合、[text-538])を設定していきます。
右上の保存をクリックすると、フォームの作成は完了です。
設置方法について
フォームを保存すると、冒頭でも紹介したショートコード([contact-form-7 404 "Not Found"])を任意の場所にコピペするだけで設置完了です。