プラグインを検索し導入

まずは、「メニュー → プラグイン → 新規追加」から「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"])を任意の場所にコピペするだけで設置完了です。

Similar Posts