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、身長、座高、属性、資格)
60℃くらいの水属性

■入社年
2017年

■趣味
8bitとカフェミュージック、白と茶色模様の犬、観葉植物、ナワバリを確保する試合(イカ)、ボウリング

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

■ひとこと
だんだん早くなる

関連記事

  1. mv_job

    イベント来場者管理アプリ「SmileTracking」について

  2. img_01

    西宮の魅力発信

  3. tukutte09

    【作ってみた】本型収納箱「BOOKBOX」でアクセサリーボックス

  4. Raspberry Piを使ってみよう 【セットアップ編】

    Raspberry Piを使ってみよう 【セットアップ編】

  5. キャッチコピー?

    柿の種より人の心を動かすキャッチコピーを考えてみる(その1)

  6. Photoelly039_TP_V

    Webエンジニア初心者が知っておきたいこと

  7. NsNb7ndCeV3FkP61515754521_1515756417

    【WordPress】MW WP Formを使用したお問い合わせフォームの作成

  8. 0I9A6577ISUMI_TP_V

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

人気記事

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

最近の記事

  1. NsNb7ndCeV3FkP61515754521_1515756417 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
  2. db43c292d744f2ab9bcec5c9e2012172_m 【WordPress】プラグインの使い方(インストール・有効化・停止・削除)
  3. 66efd8d312710c14e1e7656010bc60bd_m 【WordPress】Contact Form 7を使ったお問い合わせフォームを…
  4. 223395ae7cd150697858d397130d03f0_m 【WordPress】会員ページ作成のオススメプラグイン5選!
  5. 9f803b3532fa44bcb3001cac6734d898_m 埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法
2018年1月
« 12月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP