Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

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

66efd8d312710c14e1e7656010bc60bd_m

新年明けましておめでとうございます!開発部のいろはです。ついに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のプラグインを使用してお問い合わせフォームの作成の方法について解説いたしました。
この他にもお問い合わせフォームを作成するプラグインはまだまだたくさんありますので、
随時ご紹介していきたいと思います。

それではお疲れ様でした!ノシ

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

いろは

いろは

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
水属性(95℃)

■入社年
2017年

■趣味
ごはん(つくる)、白と茶色模様の犬、観葉植物、ボウリング、8bitの音楽

■座右の銘
明けない夜はない

■ひとこと
365日休まず抹茶回収いたします

関連記事

  1. 1369e8024cf51a6585381076715a38e6_m

    EFO(入力フォーム最適化)とは?郵便番号から住所を自動入力させて使いやすく!

  2. db43c292d744f2ab9bcec5c9e2012172_m

    【WordPress】プラグインの使い方(インストール・有効化・停止・削除)

  3. IMG_6697

    2017年新年のご挨拶。昨年を振りかえって

  4. NHK大河ドラマ真田丸とMEET三成展

    戦なき世を創るため… NHK大河ドラマ「真田丸」×石田三成企画展「MEET三成展」へ!

  5. 0I9A6577ISUMI_TP_V

    一人でも楽しめる!GWの過ごし方5選!!

  6. 9f803b3532fa44bcb3001cac6734d898_m

    埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法

  7. 223395ae7cd150697858d397130d03f0_m

    【WordPress】会員ページ作成のオススメプラグイン5選!

  8. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

人気記事

  1. クリアボタン
  2. mv
  3. 9f803b3532fa44bcb3001cac6734d898_m
  4. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  5. 新入社員研修「伝える+伝わるセミナー」
  6. tukutte08
  7. タイ料理「天満3パクチー」
  8. 2017年スタートアップトレンド (アメリカ版)
  9. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK

最近の記事

  1. mv_ssl01 「常時SSL対策」セットアップサービスについて
  2. mv_tsukatte02 【使ってみた】プログラミングが練習できるサイトを集めてみた
  3. c48549e5450e30d62215e30331440f8e_m 【WordPress】記事の順番を直感的に並べ替える!Intuitive Cus…
  4. mv_tukutte10 【作ってみた】LINE NotifyとGoogle Apps Scriptで天気…
  5. IMG_1067 ペンキを塗ってみた|コワーキングを経営する事になった話3
2018年5月
« 4月    
 123456
78910111213
14151617181920
21222324252627
28293031  
PAGE TOP