30_お問い合わせフォームを設置する

Author: sleepfreaks

あらゆる用途使用できる「お問い合わせフォーム」

HPを運営していると、閲覧者がHP管理者へ連絡をといたい。
という場合が多々あります。

「ライブ情報を教えて欲しい」「制作をお願いしたい」など
嬉しいお問い合わせも多いかもしれません。

閲覧者としっかりとコミュニケーションがとれるように、
「お問い合わせ」ページにフォームを設置してみましょう。

問い合わせフォームを作成するための無料プラグインがあります。
「プラグインを追加記事」と同様に「Contact Form 7」をインストールしてください。



フォームの設置方法

プラグインのインストール

プラグインインストールのお決まり手順です。

フォームを作成

「お問い合わせ」という項目ができているため選択します。
その中から「新規追加」をクリックします。

新規作成

ここでも「新規追加」をクリックします。

フォームを作成する

まずはフォーム自体に名前をつけます。
わかりやすい名前で構いません。

既に項目があります。これに新たな項目を追加していきます。
右の「タグの作成」クリックします。

項目追加 プルダウン

ここでは「問合せの種類」をプルダウンで指定できるように追加してみましょう。

「ドロップダウン メニュー」を選択します。

プルダウン項目を設定

  • 1_必ず入力して欲しい項目の場合チェックを入れます。
    この項目が空白の場合、フォームが送信できないようにします
  • 2_選択項目を行に分けて入力します
  • 3_デフォルトの選択項目が空欄になります。
    必要な場合にチェックを入れます。
    もしこれを行わない場合は、
    フォーム初期段階は「ライブについて」が選ばれた状態で表示されます。

項目を追加

作成されたコードをフォームへそのままコピペします。

今回の場合は

項目追加の文章

こうなります。
このフォームはメールで送られてきます。

その設定を行いましょう。

画面を下にスクロールさせると以下が設置されています。

メールアドレス設定

宛先にフォームが送られてくる「メールアドレス」を設定します。

右部分にはデフォルトで配置されている項目が設定されていますが、
上記で「プルダウン」設置しましたので、その記載が必要です。

コンタクトフォーム項目追加

プルダウンメニュー作成時に表示されたコードをコピペします。
これで設定が完了しました。

コンタクトフォームを保存

画面を上へ戻すと「保存」がありますので、
クリックし保存してください。

早速このフォームを「お問い合わせ」ページヘ配置してみましょう。

コンタクトフォームのコード

「保存」後にコードが表示されますので、コピーします。

ページを選択

「固定ページ」一覧から以前に作成した「お問い合わせ」をクリックします。

固定ページへコードを配置

上記のコードを本文へそのままペーストします。
その後「更新」をクリックします。

お問い合わせ フォーム確認

無事にページへフォームが配置されました。