【WordPress】Contact Form 7を使ったお問い合わせフォームを作ってみよう!|大阪のホームページ制作会社 SmileVision

社員ブログ 【WordPress】Contact Form 7を使ったお問い合わせフォームを作ってみよう!

新年明けましておめでとうございます!開発部のいろはです。ついに2018年を迎えましたね!
私は去年の4月に入社しましたが、一年が終わるのが本当に早くあっという間でした(・ω・;)
思い返してみると、入社した当時は今まで経験したことないことばかりで、
毎日「ナニコレ?」の山で、緊張しまくりでした・・・(笑)
前置きはさておき、今回はWordPressのプラグイン「Contact Form 7」を使用した
お問い合わせフォームの作成方法についてご紹介したいと思います。

Contact Form 7とは?

Contact Form 7とはWordPressでお問い合わせフォームを作成することができるプラグインの一つです。
近年はお問い合わせフォームが無くてはならない要素の一つとなっております。
このプラグインは「ショートコード」と呼ばれる文章をコピーペーストするだけで
フォームの内容を簡単に作成することができます。

1.Contact Form 7のダウンロード

下記URLからプラグインをダウンロードしてインストール・有効化します。
■ダウンロード
https://ja.wordpress.org/plugins/contact-form-7/
プラグインのインストールはこちらをご覧ください。

2.フォームの作成

それでは早速フォームを作成してみましょう!
インストール・有効化が完了したら「お問い合わせ」というメニューが追加されます。
「お問い合わせ」から「新規追加」を選択します。
img1
フォームの編集画面が表示されますので、タイトルを入力します。
初期設定時には「無題」になっているため、今後増加していくとどれが区別しにくくなります。
なので、忘れずネーミングしましょう!今回は「コンタクトフォーム1」という名前に設定しました。
img2

3.入力項目の設定

次に、フォームの入力項目の設定を行います。
下記エリアより項目タグ追加したい項目を選択してください。
今回はメールアドレスの下に電話番号の入力項目を追加してみようと思います!
img3
タグを選択するとname属性やplaceholderの指定など編集画面が表示されますので、
任意の情報を入力してください。
タグを挿入で指定した箇所にフォームタグを生成します。
img4-1
最後に挿入したタグの上部に項目名を表記して<p>タグで囲みます。
img5-1

4.メールの設定

次に、問い合せがあった際に指定したアドレスまで通知するように設定を行います。
メールタブを選択して下記内容を入力します。

  1. 送信先
    送信先(管理者など)のアドレスを指定します。
    複数に送信する場合は、カンマ区切りで送信することができます。
  2. 送信元
    差出人(お客様)のお名前を指定します。差出人の名前はタグを使用すると自動入力されます。
    ※デフォルトでは「[your-name]」が差出人の名前になります。
  3. 題名
    送信先に送られてきたメールの題名を指定します。
  4. 追加ヘッダー
    返信先のメールを指定します。To以外にもCcやBccが設定できます。
    同様にタグを使用することでアドレスが自動入力されます。
  5. メッセージ本文
    お問い合わせ内容を記入します。こちらにもタグの設定ができますのでお好みで調整してください。

img6-1
Contact Form 7は任意で差出人へお問い合わせ内容を自動返信することもできます。
使用する場合はメール(2)にチェックを入れて、内容を入力します。
img7

  1. 送信先
    差出人のアドレスを指定します。※デフォルトは[your-name]
    これ以外を指定すると問い合せた人に自動返信のメールが届かなくなります。
  2. 送信元
    管理者の名前を記入します。
  3. 題名
    「お問い合わせありがとうございました」などを記入して、
    問い合せた人に自動返信メールであると明確にしましょう!
  4. 追加ヘッダー
    自動返信の返信は不要ですので、空白に設定します。
  5. メッセージ本文
    自動返信メールの内容を入力します。

img8
2〜4の作業終了後、コンタクトフォームの右上にある「保存」をクリックしてください。
img9

5.作成したフォームを公開する

保存後、コンタクトフォーム一覧画面などにあるショートコードをコピーして
固定ページにコードを貼り付けます。
img10
img11
最後に固定ページを公開して下図のようにフォームが表示されるか確認してください。
img12

Contact Form 7のプラグインを使用してお問い合わせフォームの作成の方法について解説いたしました。
この他にもお問い合わせフォームを作成するプラグインはまだまだたくさんありますので、
随時ご紹介していきたいと思います。
それではお疲れ様でした!ノシ

ABOUT ME
いろは
■部署 開発部 ■スペック(Level、身長、座高、属性、資格) 水属性(98℃) ■入社年 2017年 ■趣味 ごはん(つくる)、白と茶色模様の犬、ボウリング、ナワバリ争い(イカ)、8bit ■座右の銘 明けない夜はない ■ひとこと うどん >> そば > そうめん