1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. お問い合わせページの制作

お問い合わせページの制作

お問い合わせページの制作

次に「お問い合わせ」の固定ページを作成していきます。今回、お問い合わせフォームには「Contact Form 7」というプラグインを利用していきますので設定方法もご確認ください。

流れとしては「Contact Form 7」の設定をおこない、固定ページに「お問い合わせ」の内容を記述していきます。その際、フォームシステムを読み込むためのコードも記述します。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

【Contact Form 7】フォームの設定

まずは「Contact Form 7」のフォーム設定をおこないます。「Contact Form 7」ではひと通りフォーム部品が扱え、メールやエラーメッセージなども簡単に変更する事ができます。

サンプルブログのフォームは至ってシンプルです。「テキストボックス」「テキストエリア」「送信ボタン」の3点で作成します。ココではフォーム部分のソースコードから見ていきましょう。

管理画面の左側に並んでいるメニューの中にある「お問い合わせ」→「新規追加」と進んで「コンタクトフォームを追加」へ移動します。このページでフォームの設定をおこないます。

【Contact Form 7】フォームの設定

①にお好きなフォーム名を記入します。ちなみにサンプルブログでは「お問い合わせフォーム」としています。②のタブが「フォーム」となっているのを確認して、③に下記コードをコピペして④の「保存」をクリックします。

フォーム

                	
    
                    	
  1. <dl>
    2. 
                    	
  2.   <dt><label for="name">お名前</label></dt>
    3. 
                    	
  3.   <dd>[text* your-name id:name]</dd>
    4. 
                    	
  4. </dl>
    5. 
                    	
  5. <dl>
    6. 
                    	
  6.   <dt><label for="email">メールアドレス</label></dt>
    7. 
                    	
  7.   <dd>[email* your-email id:email]</dd>
    8. 
                    	
  8. </dl>
    9. 
                    	
  9. <dl>
    10. 
                    	
  10.   <dt><label for="message">お問い合わせ内容</label></dt>
    11. 
                    	
  11.   <dd>[textarea* your-message id:message ]</dd>
    12. 
                    	
  12. </dl>
    13. 
                    	
  13. <div class="formBtn">
    14. 
                    	
  14.   [submit "送信する"]
    15. 
                    	
  15. </div>
    16.

③の枠内には既にコードが記述されていますが、上記のコードで上書き保存しておきましょう。[]角括弧で囲まれたコードの意味を説明すると、「textarea」はそのまま「textarea」タグが出力されます。

「text」は「input」タグの「type=”text”」、「email」は「input」タグの「type=”email”」、「submit」は「input」タグの「type=”submit”」が出力されます。「*」を付けると必須項目にする事ができます。

「your-name」「your-email」「your-message」は「name」属性の値で、「id:○○」では指定した「id」を追加できます。あと「submit」の「”送信する”」は「value」属性の値です。

竹馬

「Contact Form 7」の設定は「フォーム」と「メール」だけおこないます。あらかじめ初期設定されているので、今回はエラーメッセージなどの変更はしないで進めます。

【Contact Form 7】自分への通知メール設定

次に「Contact Form 7」のメール設定をおこなっていきます。メールにはお問い合わせがあった事を自分に知らせる「通知メール」と、相手にお送りする「自動返信メール」があります。

メールの設定をおこなう場合は、タブを「フォーム」から「メール」に変更します。

【Contact Form 7】自分への通知メール設定

タブの中にある①の「メール」をクリックします。②は「送信先」、⑤は「追加ヘッダー」です。この2箇所はデフォルトのままでOKです。修正するのは③の「送信元」、④の「題名」、⑥の「メッセージ本文」です。

送信元

                	
    
                    	
  1. サンプルブログ <sample＠chepirare.com>
    2.

③の「送信元」は「サイト名」と「<メールアドレス>」を記述します。メールアドレスの部分はワードプレスをインストールした時に登録したメールアドレスが自動で記述されます。

題名

                	
    
                    	
  1. 【サンプルブログ】お問い合わせがありました
    2.

④の「題名」はメールのタイトルの事です。この項目は上記の記述に変更しています。

メッセージ本文

                	
    
                    	
  1. 「サンプルブログ」のお問い合わせフォームから以下の内容が送信されました。
    2. 
                    	
  2. お問い合わせ内容を確認の上、お客様へご連絡をお願いします。
    3. 
                    	
  3. 
                    	
  4. -------------------------------------------
    5. 
                    	
  5. 
                    	
  6. ■お名前
    7. 
                    	
  7. [your-name]
    8. 
                    	
  8. 
                    	
  9. ■メールアドレス
    10. 
                    	
  10. [your-email]
    11. 
                    	
  11. 
                    	
  12. ■お問い合わせ内容
    13. 
                    	
  13. [your-message]
    14. 
                    	
  14. 
                    	
  15. -------------------------------------------
    16.

⑥の「メッセージ本文」に自分宛の内容を記述して「保存」をクリックします。

メールの「タイトル」や「本文」の文面はご自身で自由に変更してお使いください。サンプルブログで紹介している文面はひとつの例として参考にしてもらえたらと思います。

メールで使えるタグについても説明しておきます。今回は「フォーム」で設定した「name」属性の[your-name][your-email][your-message]のコードを使う事ができます。

例えば本文に[your-email]と記述すると、フォームに記入された「メールアドレス」を出力する事ができます。このコードは「フォーム」と連動していますので、フォーム部品を追加すればメールで使えるコードも追加されます。

【Contact Form 7】相手への自動返信メール設定

引き続きメールの設定をおこないます。先ほどは自分宛の「通知メール」を設定しましたが、今度はフォームを送信された相手にお送りする「自動返信メール」の設定です。

「自動返信メール」の機能は無くす事もできますが、今回は追加する方法をご紹介します。

【Contact Form 7】相手への自動返信メール設定

メールの編集画面を下へスクロールしていくと、①の「メール（2）を使用」という項目がありますのでチェックを入れます。この項目にチェックを入れなければ「自動返信メール」は使えません。

「通知メール」と同じく、②の「送信先」と⑤の「追加ヘッダー」はそのままでOKです。

送信元

                	
    
                    	
  1. サンプルブログ <sample＠chepirare.com>
    2.

③の「送信元」も「通知メール」と同じく「サイト名」と「<メールアドレス>」を記述します。

題名

                	
    
                    	
  1. 【サンプルブログ】お問い合わせありがとうございます
    2.

④の「題名」には自動返信メールのタイトルを記述します。

メッセージ本文

                	
    
                    	
  1. 「サンプルブログ」へお問い合わせ頂き、誠にありがとうございます。
    2. 
                    	
  2. お問い合わせフォームから以下の内容をお受け致しました。
    3. 
                    	
  3. 
                    	
  4. -------------------------------------------
    5. 
                    	
  5. 
                    	
  6. ■お名前
    7. 
                    	
  7. [your-name]
    8. 
                    	
  8. 
                    	
  9. ■メールアドレス
    10. 
                    	
  10. [your-email]
    11. 
                    	
  11. 
                    	
  12. ■お問い合わせ内容
    13. 
                    	
  13. [your-message]
    14. 
                    	
  14. 
                    	
  15. -------------------------------------------
    16. 
                    	
  16. 
                    	
  17. お問い合わせ内容を確認の上、あらためてご連絡差し上げます。今しばらくお待ちください。
    18. 
                    	
  18. このメールに心当たりの無い方は、お手数ですが「[_site_admin_email]」までご連絡いただきますようお願い申し上げます。
    19.

⑥の「メッセージ本文」に自動返信でお送りする内容を記述して「保存」をクリックします。

「Contact Form 7」にはあらかじめメールタグと呼ばれるものがいくつも用意されています。サンプルブログでも使用している[_site_admin_email]は、ワードプレスの設定時に登録したメールアドレスを出力します。

今回は使用していませんが、初期設定で[_site_title]も記述されています。こちらのタグで「サイト名」を出力します。通常であれば[_site_title]を使ってもらえば良いんですが、サンプルブログではちょっとマズイ事に。

サンプルブログでは「タイトルを設定する」で「サイトのタイトル」と「キャッチフレーズ」を逆に設定しています。なので[_site_title]を記述すると「キャッチフレーズ」のほうが出力されてしまうんです。

ですからサイト名の表示に関してはメールタグを使わずに直に記述しています。

竹馬

もしエラーメッセージなども変更したければ、タブの「メッセージ」をクリックして編集してみてください。文言を変更して保存するだけなので簡単です。

お問い合わせの固定ページを作成する

続いて「お問い合わせ」の固定ページを作成していきます。「サイトマップ」の固定ページとは違って、管理画面のエディターにHTMLのソースコードを記述していきます。

「固定ページ」→「新規追加」と進んで「固定ページを編集」へ移動したら、①のタイトルを「お問い合わせ」、②のパーマリンクを「contact」にします。

固定ページを作成する

本文の記述には「ビジュアル」と「テキスト」の2つの方法がありますが、③の「テキスト」を選択します。そして④の枠内に下記コードを記述して⑤の「更新」をクリックします。

お問い合わせ

                	
    
                    	
  1. <section id="contact">
    2. 
                    	
  2.   <div class="title">
    3. 
                    	
  3.     <h1>お問い合わせ</h1>
    4. 
                    	
  4.   </div>
    5. 
                    	
  5.   <div class="inner">
    6. 
                    	
  6.     <div class="form">
    7. 
                    	
  7.       <div class="txtWrap">
    8. 
                    	
  8.         <p>「サンプルブログ」をご覧いただきましてありがとうございます。</p>
    9. 
                    	
  9.         <p>当サイトへのお問い合わせはこちらのお問い合わせフォームよりご連絡ください。お問い合わせの際には「個人情報の取り扱いについて」もご一読をお願いいたします。</p>
    10. 
                    	
  10.       </div>
    11. 
                    	
  11.       <div class="formWrap">
    12. 
                    	
  12.         <div class="formBox">[contact-form-7 id="63" title="お問い合わせフォーム"]</div>
    13. 
                    	
  13.       </div>
    14. 
                    	
  14.     </div>
    15. 
                    	
  15.     <div class="privacyBox">
    16. 
                     	
  16.       <div class="title">
    17. 
                     	
  17.         <h2>個人情報の取り扱いについて</h2>
    18. 
                     	
  18.       </div>
    19. 
                     	
  19.       <div class="privasyTxt">
    20. 
                     	
  20.         <h3>個人情報を収集する目的</h3>
    21. 
                     	
  21.         <p>ご入力いただいた個人情報は、お問合せ内容にお答えする目的で取得しておりますので、その目的の範囲を超えて利用することはありません。</p>
    22. 
                     	
  22.         <h3>個人情報の第三者への提供</h3>
    23. 
                     	
  23.         <p>第三者に委託・提供することはありません。</p>
    24. 
                     	
  24.         <h3>任意性について</h3>
    25. 
                    	
  25.         <p>個人情報の記入はお客様の判断にお任せします。ただし、ご回答するにあたりメールアドレスを正確に入力していただけない場合は、ご回答することが出来なくなります。</p>
    26. 
                    	
  26.         <h3>個人情報の開示等の請求について</h3>
    27. 
                     	
  27.         <p>提出していただいた個人情報について、利用目的の通知、個人情報の開示、訂正、項目の追加・削除、また個人情報自体の消去や利用停止、提供停止を求める権利があります。これらの請求をおこなうときはご連絡ください。</p>
    28. 
                    	
  28.       </div>
    29. 
                    	
  29.     </div>
    30. 
                    	
  30.   </div>
    31. 
                    	
  31. </section>
    32.

大事なのは「Contact Form 7」のショートコードをご自身のコードに書き換える事です。サンプルブログで言うと[contact-form-7 id=”63″ title=”お問い合わせフォーム”]のショートコードです。

【Contact Form 7】ショートコードの確認

ショートコードは「コンタクトフォームの編集」のページ上部に表示されています。

ショートコードをコピーして、サンプルブログのコードを書き換えておいてください。あとは本文中に「サンプルブログ」の記述もあるので、ご自身のサイト名に変更してご利用ください。

「お問い合わせ」のページには、「お問い合わせフォーム」と「個人情報の取り扱いについて」の項目があります。「個人情報の取り扱いについて」というのは「プライバシーポリシー」というものですね。

管理画面の左側に並んでいるメニューの「固定ページ」をクリックするとページの一覧が表示されますが、その中に下書き状態の「プライバシーポリシー」のページが存在しています。

最初の頃はなかったんですが、いつかのバージョンアップで「プライバシーポリシー」のページが附属されるようになりました。それだけサイトには「プライバシーポリシー」の記載が重要になってきたという事です。

フォームがなければ「プライバシーポリシー」の記載は必要ありませんが、フォームで「お名前」や「メールアドレス」などの個人情報を提供してもらう場合は記載しておきましょう。

竹馬

サンプルブログで記載している「個人情報の取り扱いについて」の文言は簡単にまとめたものです。もっと詳しい内容にされたい場合はご自身で文言を変更してお使いください。

お問い合わせのデザインをstyle.cssに追加

最後に「お問い合わせ」のデザインを「style.css」に追加していきましょう。「Contact Form 7」によって出力されるタグに対しても簡単なデザイン設定をおこなっています。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバー・記事一覧・検索結果省略～
    6. 
                    	
  6. ～エラーページ省略～
    7. 
                    	
  7. ～その他の記事・記事ページ省略～
    8. 
                    	
  8. ～サイトマップページ省略～
    9. 
                    	
  9. /* ------ contact ------ */
    10. 
                    	
  10. #contact .title h1 {
    11. 
                    	
  11.   font-size: 2.4rem;
    12. 
                    	
  12.   font-weight: 300;
    13. 
                    	
  13.   padding-bottom: 10px;
    14. 
                    	
  14.   border-bottom: 1px dashed #c1c1c1;
    15. 
                    	
  15.   position: relative
    16. 
                    	
  16. }
    17. 
                    	
  17. #contact .inner {
    18. 
                    	
  18.   margin-top: 40px;
    19. 
                    	
  19.   background: #fff
    20. 
                    	
  20. }
    21. 
                    	
  21. #contact .form { padding: 40px 20px }
    22. 
                    	
  22. #contact .txtWrap { font-size: 1.6rem }
    23. 
                    	
  23. #contact .txtWrap p + p { margin-top: 20px }
    24. 
                    	
  24. #contact .formWrap { margin-top: 60px }
    25. 
                    	
  25. #contact .formBox dl + dl { margin-top: 40px }
    26. 
                    	
  26. #contact .formBox dt {
    27. 
                    	
  27.   width: 100%;
    28. 
                    	
  28.   font-size: 1.6rem;
    29. 
                    	
  29.   line-height: 40px
    30. 
                    	
  30. }
    31. 
                    	
  31. #contact .formBox dt::after {
    32. 
                    	
  32.   content: "必須";
    33. 
                    	
  33.   color: #f2577e;
    34. 
                    	
  34.   font-size: 1.2rem;
    35. 
                    	
  35.   margin-left: 20px
    36. 
                    	
  36. }
    37. 
                    	
  37. #contact .formBox dd {
    38. 
                    	
  38.   width: 100%;
    39. 
                    	
  39.   font-size: 1.6rem
    40. 
                    	
  40. }
    41. 
                    	
  41. #contact .formBox dd input {
    42. 
                    	
  42.   width: 100%;
    43. 
                    	
  43.   height: 40px;
    44. 
                    	
  44.   padding: 10px;
    45. 
                    	
  45.   border: 1px solid #7f7f7f;
    46. 
                    	
  46.   border-radius: 0;
    47. 
                    	
  47.   -webkit-appearance: none
    48. 
                    	
  48. }
    49. 
                    	
  49. #contact .formBox dd textarea {
    50. 
                    	
  50.   width: 100%;
    51. 
                    	
  51.   height: 140px;
    52. 
                    	
  52.   padding: 10px;
    53. 
                    	
  53.   border: 1px solid #7f7f7f;
    54. 
                    	
  54.   border-radius: 0;
    55. 
                    	
  55.   -webkit-appearance: none
    56. 
                    	
  56. }
    57. 
                    	
  57. #contact .formBox .formBtn {
    58. 
                    	
  58.   text-align: center;
    59. 
                    	
  59.   margin-top: 20px
    60. 
                    	
  60. }
    61. 
                    	
  61. #contact .formBox .formBtn input {
    62. 
                    	
  62.   width: 320px;
    63. 
                    	
  63.   color: #fff;
    64. 
                    	
  64.   font-size: 1.6rem;
    65. 
                    	
  65.   font-family: "Kiwi Maru", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    66. 
                    	
  66.   padding: 16px;
    67. 
                    	
  67.   border: none;
    68. 
                    	
  68.   background: #ff657c;
    69. 
                    	
  69.   transition: 0.3s;
    70. 
                    	
  70.   -webkit-appearance: none;
    71. 
                    	
  71.   cursor: pointer
    72. 
                    	
  72. }
    73. 
                    	
  73. #contact .formBox .formBtn input:hover { opacity: 0.7 }
    74. 
                    	
  74. #contact .formBox input:focus,
    75. 
                    	
  75. #contact .formBox textarea:focus {
    76. 
                    	
  76.   outline: 0
    77. 
                    	
  77. }
    78. 
                    	
  78. input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1300px white inset }
    79. 
                    	
  79. #contact .privacyBox { margin-top: 60px }
    80. 
                    	
  80. #contact .privacyBox h2 {
    81. 
                    	
  81.   color: #fff;
    82. 
                    	
  82.   font-size: 2.4rem;
    83. 
                    	
  83.   font-weight: 300;
    84. 
                    	
  84.   padding: 10px;
    85. 
                    	
  85.   background: #ff657c;
    86. 
                    	
  86.   position: relative
    87. 
                    	
  87. }
    88. 
                    	
  88. #contact .privacyBox h2::before {
    89. 
                    	
  89.   content: '';
    90. 
                    	
  90.   width: 98%;
    91. 
                    	
  91.   height: 1px;
    92. 
                    	
  92.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    93. 
                    	
  93.   background-size: 10px 3px;
    94. 
                    	
  94.   position: absolute;
    95. 
                    	
  95.   top: 5px;
    96. 
                    	
  96.   left: 1%;
    97. 
                    	
  97.   z-index: 999
    98. 
                    	
  98. }
    99. 
                    	
  99. #contact .privacyBox h2::after {
    100. 
                    	
  100.   content: '';
    101. 
                    	
  101.   width: 98%;
    102. 
                    	
  102.   height: 1px;
    103. 
                    	
  103.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    104. 
                    	
  104.   background-size: 10px 3px;
    105. 
                    	
  105.   position: absolute;
    106. 
                    	
  106.   bottom: 5px;
    107. 
                    	
  107.   left: 1%;
    108. 
                    	
  108.   z-index: 999
    109. 
                    	
  109. }
    110. 
                    	
  110. #contact .privacyBox .privasyTxt {
    111. 
                    	
  111.   padding: 20px;
    112. 
                    	
  112.   margin-top: 20px
    113. 
                    	
  113. }
    114. 
                    	
  114. #contact .privacyBox .privasyTxt h3 {
    115. 
                    	
  115.   color: #fff;
    116. 
                    	
  116.   font-size: 1.5rem;
    117. 
                    	
  117.   font-weight: 300;
    118. 
                    	
  118.   padding: 10px;
    119. 
                    	
  119.   background: #7f7f7f
    120. 
                    	
  120. }
    121. 
                    	
  121. #contact .privacyBox .privasyTxt p {
    122. 
                    	
  122.   font-size: 1.5rem;
    123. 
                    	
  123.   margin-top: 10px
    124. 
                    	
  124. }
    125. 
                    	
  125. #contact .privacyBox .privasyTxt p + h3 { margin-top: 20px }
    126. 
                    	
  126. 
                    	
  127. /* contact form 7 */
    128. 
                    	
  128. #contact .wpcf7-not-valid-tip {
    129. 
                    	
  129.   color: #f2577e;
    130. 
                    	
  130.   font-size: 1.2rem;
    131. 
                    	
  131.   margin-top: 4px
    132. 
                    	
  132. }
    133. 
                    	
  133. #contact .wpcf7-mail-sent-ok {
    134. 
                    	
  134.   color: #fff;
    135. 
                    	
  135.   font-size: 1.4rem;
    136. 
                    	
  136.   text-align: center;
    137. 
                    	
  137.   padding: 10px;
    138. 
                    	
  138.   border: none;
    139. 
                    	
  139.   background: #f2577e
    140. 
                    	
  140. }
    141. 
                    	
  141. #contact .wpcf7-validation-errors,
    142. 
                    	
  142. #contact .wpcf7-acceptance-missing,
    143. 
                    	
  143. #contact .wpcf7-mail-sent-ok,
    144. 
                    	
  144. #contact .wpcf7-response-output {
    145. 
                    	
  145.   color: #fff;
    146. 
                    	
  146.   font-size: 1.4rem;
    147. 
                    	
  147.   text-align: center;
    148. 
                    	
  148.   padding: 10px;
    149. 
                    	
  149.   border: none;
    150. 
                    	
  150.   background: #f2577e
    151. 
                    	
  151. }
    152. 
                    	
  152. @media screen and (max-width: 768px) {
    153. 
                    	
  153.   #contact .title h1 { font-size: 2.4rem }
    154. 
                    	
  154.   #contact .txtWrap { text-align: left }
    155. 
                    	
  155.   #contact .txtWrap br { display: none }
    156. 
                    	
  156.   #contact .formWrap { margin-top: 40px }
    157. 
                    	
  157.   #contact .formBox dl + dl { margin-top: 20px }
    158. 
                    	
  158.   #contact .formBox .formBtn input {
    159. 
                    	
  159.     width: 100%;
    160. 
                    	
  160.     max-width: 320px
    161. 
                    	
  161.   }
    162. 
                    	
  162.   #contact .formBox .formBtn input:hover {
    163. 
                    	
  163.     color: #fff;
    164. 
                    	
  164.     background: #ff657c
    165. 
                    	
  165.   }
    166. 
                    	
  166.   #contact .privacyBox { margin-top: 20px }
    167. 
                    	
  167.   #contact .privacyBox h2 { font-size: 1.7rem }
    168. 
                    	
  168.   #contact .privacyBox .privasyTxt { margin-top: 20px }
    169. 
                    	
  169. 
                    	
  170.   /* contact form 7 */
    171. 
                    	
  171.   #contact .wpcf7-validation-errors,
    172. 
                    	
  172.   #contact .wpcf7-acceptance-missing {
    173. 
                    	
  173.     text-align: left
    174. 
                    	
  174.   }
    175. 
                    	
  175.   #contact .wpcf7-mail-sent-ok { text-align: left }
    176. 
                    	
  176. }
    177.

今までのコードで一番長いですね（笑）。長いですけどじっくり見てもらうとそんなに難しくないハズです。ココでは「autofill」という疑似クラスについて説明しておきます。

                	
    
                    	
  1. input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1300px white inset }
    2.

Webサイトでフォームを操作する際、テキストボックスをクリックすると過去に記述した情報が候補として選択できたりします。これは「オートコンプリート」と呼ばれる機能です。

ただブラウザのChromeでは候補となる情報が表示される時に、テキストボックスの背景色が黄色に変化してしまいます。上記の設定は背景色の変化を防止するためのコードです。

細かいトコなんですけど、気になりだすと修正しないと気が済まない部分ですね。

竹馬

お疲れ様でした！これでひと通りブログサイトが完成です！でも、大変なのはこれからですよ（笑）。ブログは継続して作り続けなければ意味がないですからね～。

サイトマップページの制作 ブログの投稿手順と記述方法

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記