wordpress初期状態ではお問い合わせフォームは用意されていません。
自作することも可能ですが、プラグインを入れることで簡単に設置することができます。
フォームにも色々なものがありますが、今回は「Contact Form 7」を設置します。
※プラグインを入れる場合は、検討のうえインストールを行ってください。
他のプラグインとの兼ね合いによって、上手く作動しない場合があります。
今回は以下のことについてご紹介します。
■「Contact Form 7」の特徴
■プラグインをいれる
■「Contact Form 7」の設定
▽フォーム
▽メール
▽メッセージ
■固定ページに設置
▽テーマに入れる方法
■確認する
■「Contact Form 7」の特徴
1.wordpressにコードを入れるだけでお問い合わせフォームが設置できる。
2.メールフォームの入力項目をカスタマイズできる。
3.プラグイン自体が日本語表記なのでわかりやすい。
4.アンケートなどにも活用できる
■プラグインをいれる
では「Contact Form 7」のプラグインを入れましょう。
メインナビゲーションメニューの『プラグイン』→『新規追加』をクリック
「Contact Form 7」と検索すると表示されますので、『今すぐインストール』をクリック
有効化すると、メインナビゲーションメニューに「お問い合わせ」が追加されます。
■「Contact Form 7」の設定
メインナビゲーションメニューの「お問い合わせ」をクリックすると、
コンタクトフォームの画面が表示されます。
初期の状態はお問い合わせフォームが１つ用意されていますので、これを編集していきます。
『コンタクトフォーム１』をクリック
▽フォーム
フォーム画面が表示されます。
上部のタイトル部分にフォーム名を入力してください。
| テキスト | 一行の入力項目を追加 |
| メールアドレス | メールアドレスの入力項目を追加 |
| URL | URLの入力項目を追加 |
| 電話番号 | 電話番号の入力項目を追加 |
| 数値 | スライダーを動かして数値を入力するタイプの入力項目を追加 |
| 日付 | 手入力、もしくはカレンダーからの選択の入力項目を追加 |
| テキストエリア | 自由テキスの入力項目を追加 |
| ドロップダウンメニュー | ドロップタイプの選択ボタンを追加 |
| チェックボックス | チェックボックスタイプの選択ボタンを追加 |
| ラジオボタン | ラジオボタンタイプの選択ボタンを追加 |
| 承諾確認 | 「同意する」のチェックなどに使われる項目を追加 |
| クイズ | クイズの答えを入力する項目を追加 ※クイズに正解しないと送信できない |
| reCAPTCHA | スパムメール対策に使用します。 使用するにはサイトを登録する必要があります。 |
| ファイル | 添付ファイルをアップロードできるボタンを追加 |
| 送信ボタン | 送信ボタンを追加 |
初期状態のままでも運用できるようになっています。必要に応じて入力項目や文言を調整してください。
上部のタブで《フォーム》《メール》《メッセージ》《その他の設定》の切り替えができます。
▽メール
赤枠の各部分を必要に応じて変更します。
送信先は送信するアドレス（受け取り手）、送信元は送信したアドレス（送り手）です。
▽メッセージ
どのような場合にどのようなメッセージを表示するかの設定です。
初期状態のままでも運用できるようになっています。必要に応じて入力項目や文言を調整してください。
設定が完了しましたら『保存』をクリック
■固定ページに設置
メールフォームの設定が完了しましたら、固定ページに表示させます。
メールフォームの画面に戻ります。
先ほど編集したフォームの横にショートコードが表示されています。
ショートコード部分をクリックすると、文字全体が選択されますので、マウス右クリックでコピーしてください。（Ctrl+Cでも可）
コンタクトフォームを入れたい固定ページを開き、先ほどのショートコードをいれます。
マウス右クリックでペーストを選択してください。（Ctrl+Vでも可）
上手く入っているかプレビューで確認し、下書きまたは公開ボタンをクリック。
▽テーマに入れる方法
フッターなどに入れたい場合はテーマに直接書き込みます。
ショートコードをそのままphpにコピーしても、表示されません。
ショートコードをdo_shortcode()関数に引数として渡して、その出力を表示する必要があります。
詳細はこちらをご覧ください。
「Contact Form 7」公式サイト
※テーマを直接触りますので、事前にバックアップを！
■確認する
wordpressにコンタクトフォームを設置できましたら、テスト送信を行ってください。
本文なども入力し、どのように送られてくるかも確認してください。
メールが届いていなければ、再度登録したメールアドレスをご確認ください。
※設定エラーが出ている場合、正常に動かないことがあります。
詳しくは「Contact Form 7」公式サイトの設定エラーを解消するをご覧ください。
以上、コンタクトフォームの設置でした。
お疲れ様でした。
最新記事 by 小笹 通典 (全て見る)
- WordPressの使い方：子テーマを作る - 2020年1月27日
- Youtube動画を埋め込む方法 - 2020年1月27日
- よく使うHTMLタグ - 2020年1月27日