1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. フォームの設定と各ファイルの調整

フォームの設定と各ファイルの調整

フォームの設定と各ファイルの調整

前回まででホームページがほぼほぼ出来上がってきましたね。あとはお問い合わせフォームの調整をしてやれば完成ですので、もう少し頑張っていきましょう。

フォーム部分では「form」タグ内にさまざまなタグを用いて情報を処理する事ができます。今回はinputタグとtextareaタグを使ってテキスト入力欄を作ります。

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

目次 [閉じる]

入力フォームをHTMLで構築する

慣れないと記述が複雑なのでよくわからないと思いますので、ゆっくりとひとつひとつ確認していってください。入力フォームはinput.htmlに記述します。

input.html

                	
    
                    	
  1. <section id="contact">
    2. 
                    	
  2.   <div class="imageWrap"></div>
    3. 
                    	
  3.   <div class="inner" id="contactInner">
    4. 
                     	
  4.     ～「.title」の記述省略～
    5. 
                     	
  5.     ～「.txt」の記述省略～
    6. 
                     	
  6.     <div class="formBox">
    7. 
                     	
  7.       <form method="post" action="./#contactInner" enctype="multipart/form-data">
    8. 
                     	
  8.         <input type="hidden" name="csrf_token" value="{$csrf_token}">
    9. 
                     	
  9.         <div class="itemWrap">
    10. 
                     	
  10.           <label><p>お名前<i class="required"></i></p><input type="text" name="お名前" value="{$お名前}"></label>
    11. 
                    	
  11.           <input type="hidden" name="required[]" value="お名前">
    12. 
                    	
  12.           {if:$required.お名前}<em data-rule="required">※{$required.お名前}</em>{/if:$required.お名前}
    13. 
                    	
  13.         </div>
    14. 
                    	
  14.         <div class="itemWrap">
    15. 
                    	
  15.           <label><p>メールアドレス<i class="required"></i></p><input type="text" name="メールアドレス" value="{$メールアドレス}"></label>
    16. 
                    	
  16.           <input type="hidden" name="required[]" value="メールアドレス">
    17. 
                    	
  17.           {if:$required.メールアドレス}<em data-rule="required">※{$required.メールアドレス}</em>{/if:$required.メールアドレス}
    18. 
                    	
  18.           <input type="hidden" name="email[]" value="メールアドレス">
    19. 
                    	
  19.           {if:$email.メールアドレス}<em data-rule="email">※{$email.メールアドレス}</em>{/if:$email.メールアドレス}
    20. 
                    	
  20.         </div>
    21. 
                    	
  21.         <div class="itemWrap">
    22. 
                    	
  22.           <label><p>お問い合わせ内容<i class="required"></i></p><textarea name="お問い合わせ内容">{$お問い合わせ内容}</textarea></label>
    23. 
                    	
  23.           <input type="hidden" name="required[]" value="お問い合わせ内容">
    24. 
                    	
  24.           {if:$required.お問い合わせ内容}<em data-rule="required">※{$required.お問い合わせ内容}</em>{/if:$required.お問い合わせ内容}
    25. 
                     	
  25.         </div>
    26. 
                     	
  26.         <div class="fonmBtn">
    27. 
                     	
  27.           <input type="submit" value="確認する">
    28. 
                     	
  28.         </div>
    29. 
                     	
  29.       </form>
    30. 
                     	
  30.     </div>
    31. 
                    	
  31.   </div>
    32. 
                    	
  32. </section>
    33.

今回は一番シンプルな形で「お名前」「メールアドレス」「お問い合わせ内容」の3点のみを記入するフォームを作ります。この3点は必須項目となり、どれかひとつが未記入でも送信できない仕様です。

まずformタグのaction属性には「./#contactInner」を指定しています。前回、少しお話しましたがこの記述があると確認ページに遷移したりエラーメッセージが表示されても「#contactInner」へ移動します。

この記述がないとページ上部へ画面が移動してしまうので注意してください。

inputタグにはいくつも使い方があるんですが、「お名前」と「メールアドレス」には「type=”text”」として文字の記入欄を作っています。「確認する」などの機能を付けるならinputを「type=”sumit”」とします。

そしてtextareaタグも文字の記入欄を作るんですが、複数行にまたがる文章などを記入してもらう際に使用します。逆に言うとinputタグでは複数行の文字の記入はできません。

                	
    
                     	
  1. <label><p>お名前<i class="required"></i></p><input type="text" name="お名前" value="{$お名前}"></label>
    2. 
                    	
  2. <input type="hidden" name="required[]" value="お名前">
    3. 
                    	
  3. {if:$required.お名前}<em data-rule="required">※{$required.お名前}</em>{/if:$required.お名前}
    4.

わかりやすくするために「お名前」の部分だけ取り出して確認していきましょう。

inputタグのname属性には「お名前」をvalue属性には「{$お名前}」を記述します。「type=”hidden”」が付いているinputはvalue属性を「お名前」とします。

そして「お名前」を必須項目とするために「type=”hidden”」のinputタグのname属性を「required[]」とします。「{if:$required.お名前}～{/if:$required.お名前}」の記述は「お名前」欄が未記入の時に表示するエラーメッセージを設定しています。

textareaは記述が少し違っていてvalue属性は記述しません。その代わりに「<textarea>」と「</textarea>」の間に「{$お問い合わせ内容}」を記述します。

またメールアドレスの「{if:$email.メールアドレス}～{/if:$email.メールアドレス}」の部分では、記入された文字列がメールアドレスとして正しい文字列じゃなければエラーメッセージを返します。

竹馬

inputタグの「type=”hidden”」というのはユーザーには見えない隠しフィールドを意味しています。今回のように内部のシステム情報などの紐付けなどに使用されます。

入力フォームをCSSで調整する

それではinput.htmlのフォーム部分をデザインしていきます。

style.css

                	
    
                        
  1. /* input */
    2. 
                    	
  2. #contact .formBox { margin-top: 60px }
    3. 
                    	
  3. #contact .formBox .itemWrap {
    4. 
                    	
  4.   width: 100%;
    5. 
                    	
  5.   padding: 20px 10px;
    6. 
                    	
  6.   border-bottom: 1px dashed #c1c1c1
    7. 
                    	
  7. }
    8. 
                    	
  8. #contact .formBox .itemWrap:first-child { border-top: 1px dashed #c1c1c1 }
    9. 
                    	
  9. #contact .formBox .itemWrap label { display: table }
    10. 
                    	
  10. #contact .formBox .itemWrap label p {
    11. 
                    	
  11.   width: 240px;
    12. 
                    	
  12.   font-size: 1.6rem;
    13. 
                    	
  13.   letter-spacing: 0.09em;
    14. 
                    	
  14.   vertical-align: top;
    15. 
                    	
  15.   text-align: left;
    16. 
                    	
  16.   padding: 13px 0 0 0;
    17. 
                    	
  17.   display: table-cell;
    18. 
                    	
  18.   position: relative
    19. 
                    	
  19. }
    20. 
                    	
  20. #contact .formBox .itemWrap label p .required {
    21. 
                    	
  21.   color: #e21412;
    22. 
                    	
  22.   font-size: 1.3rem;
    23. 
                    	
  23.   letter-spacing: 0.09em;
    24. 
                    	
  24.   font-style: normal;
    25. 
                    	
  25.   position: absolute;
    26. 
                    	
  26.   top: 18px;
    27. 
                    	
  27.   right: 20px
    28. 
                    	
  28. }
    29. 
                    	
  29. #contact .formBox .itemWrap label p .required::after { content: "必須" }
    30. 
                    	
  30. #contact .formBox .itemWrap input {
    31. 
                    	
  31.   width: 620px;
    32. 
                    	
  32.   height: 50px;
    33. 
                    	
  33.   font-size: 1.6rem;
    34. 
                    	
  34.   vertical-align: middle;
    35. 
                    	
  35.   padding: 0 10px;
    36. 
                    	
  36.   border: 2px solid #c1c1c1;
    37. 
                    	
  37.   transition: all 0.2s
    38. 
                    	
  38. }
    39. 
                    	
  39. #contact .formBox .itemWrap input:hover,
    40. 
                    	
  40. #contact .formBox .itemWrap input:active {
    41. 
                    	
  41.   border: 2px solid #1f1f1f
    42. 
                    	
  42. }
    43. 
                    	
  43. #contact .formBox .itemWrap textarea {
    44. 
                    	
  44.   width: 620px;
    45. 
                    	
  45.   height: 120px;
    46. 
                    	
  46.   font-size: 1.6rem;
    47. 
                    	
  47.   vertical-align: middle;
    48. 
                    	
  48.   padding: 10px;
    49. 
                    	
  49.   border: 2px solid #c1c1c1;
    50. 
                    	
  50.   transition: all 0.2s
    51. 
                    	
  51. }
    52. 
                    	
  52. #contact .formBox .itemWrap textarea:hover,
    53. 
                    	
  53. #contact .formBox .itemWrap textarea:active {
    54. 
                    	
  54.   border: 2px solid #1f1f1f
    55. 
                    	
  55. }
    56. 
                    	
  56. #contact .formBox .itemWrap em {
    57. 
                    	
  57.   color: #e21412;
    58. 
                    	
  58.   font-size: 1.3rem;
    59. 
                    	
  59.   font-style: normal;
    60. 
                    	
  60.   letter-spacing: 0.09em;
    61. 
                    	
  61.   text-align: left;
    62. 
                    	
  62.   padding: 0 10px 0 240px;
    63. 
                    	
  63.   margin-top: 10px;
    64. 
                    	
  64.   display: block
    65. 
                    	
  65. }
    66. 
                    	
  66. #contact .formBox .itemWrap em + em { margin-top: 0 }
    67. 
                    	
  67. #contact .formBox .fonmBtn {
    68. 
                    	
  68.   width: 360px;
    69. 
                    	
  69.   text-align: center;
    70. 
                    	
  70.   margin: 20px auto 0
    71. 
                    	
  71. }
    72. 
                    	
  72. #contact .formBox .fonmBtn input {
    73. 
                    	
  73.   width: 100%;
    74. 
                    	
  74.   color: #fff;
    75. 
                    	
  75.   font-size: 1.6rem;
    76. 
                    	
  76.   font-weight: 600;
    77. 
                    	
  77.   font-family: inherit;
    78. 
                    	
  78.   letter-spacing: 0.09em;
    79. 
                    	
  79.   line-height: 60px;
    80. 
                    	
  80.   border: none;
    81. 
                    	
  81.   background: #e21412;
    82. 
                    	
  82.   position: relative;
    83. 
                    	
  83.   display: block
    84. 
                    	
  84. }
    85. 
                    	
  85. @media screen and (max-width: 768px) {
    86. 
                    	
  86.   #contact .formBox { margin-top: 40px }
    87. 
                    	
  87.   #contact .formBox .itemWrap { padding: 20px 0 }
    88. 
                    	
  88.   #contact .formBox .itemWrap label { display: block }
    89. 
                    	
  89.   #contact .formBox .itemWrap label p {
    90. 
                    	
  90.     width: 100%;
    91. 
                    	
  91.     padding: 6px 0;
    92. 
                    	
  92.     display: block
    93. 
                    	
  93.   }
    94. 
                    	
  94.   #contact .formBox .itemWrap label p .required {
    95. 
                    	
  95.     top: 10px;
    96. 
                    	
  96.     right: 0
    97. 
                    	
  97.   }
    98. 
                    	
  98.   #contact .formBox .itemWrap input { width: 100% }
    99. 
                    	
  99.   #contact .formBox .itemWrap textarea { width: 100% }
    100. 
                    	
  100.   #contact .formBox .itemWrap em { padding: 0 }
    101. 
                    	
  101.   #contact .formBox .fonmBtn { width: 300px }
    102. 
                    	
  102. }
    103.

「ロゴとグローバルナビの設置【PC】」の部分でもお話しした疑似要素を使って「必須」という文字を表記います。グローバルメニューの部分では区切り線を表示しましたが今回は文字列を表記しています。

疑似要素はいろんな場面で使えるのでぜひ覚えておいてください。

フォーム部分はちょっとした細かいデザインも必要になってきますのでいくつか紹介します。まずは記入欄ですが、デモサイトではinputタグとtextareaタグを共に文字サイズを「1.6rem」と設定しています。

この文字サイズであれば問題ないのですが、文字のサイズが小さければスマホで操作する時に自動でズームがかかってしまいます。

みなさんもスマホでフォームの操作をする際に文字の記入や数値を選択しようとして、通常の画面から少しズームしてしまったという経験はないでしょうか？僕はたまにそういうフォームに出会います。

そういうフォームは記入が終了してもズームしたままなのでピンチアウトなどをおこなって通常の画面サイズに戻します。この操作を知らない方もおられるので出来るだけズームは起こさないようにしましょう。

あとはスマホのデザインを整えていてもiPhoneなどではinputタグなどを独自のデザインに変更されてしまいます。特にinputタグをボタンとして使用する際は「border」「background」「border-radius」の設定は記述するようにしましょう。

そしてもうひとつ、一番最初に紹介した共通デザインにも記述していますが「-webkit-appearance: none」の指定もおこなう必要があります。

確認ページをHTMLで構築する

次に確認ページの確認をします。このコードはconfirm.htmlに記述していきます。

confirm.html

                	
    
                    	
  1. <section id="contact">
    2. 
                    	
  2.   <div class="imageWrap"></div>
    3. 
                    	
  3.   <div class="inner" id="contactInner">
    4. 
                     	
  4.     ～「.title」の記述省略～
    5. 
                     	
  5.     ～「.txt」の記述省略～
    6. 
                      	
  6.     <div class="formBox">
    7. 
                      	
  7.       <p class="confirmTxt">下記の項目をご確認の上、送信してください。</p>
    8. 
                      	
  8.       <div class="confirmBox">
    9. 
                      	
  9.         <table>
    10. 
                      	
  10.           {loop:$params}
    11. 
                      	
  11.           <tr>
    12. 
                      	
  12.             <th>{$params[].key} </th>
    13. 
                      	
  13.             <td>{$params[].value.nl2br} </td>
    14. 
                      	
  14.           </tr>
    15. 
                      	
  15.           {/loop:$params}
    16. 
                      	
  16.         </table>
    17. 
                     	
  17.       </div>
    18. 
                     	
  18.       <div class="btnWrap">
    19. 
                     	
  19.         <form method="post" action="./#contactInner">
    20. 
                     	
  20.           {$hiddens}
    21. 
                     	
  21.           <input type="hidden" name="page_name" value="input">
    22. 
                     	
  22.           <input type="submit" value="入力画面に戻る">
    23. 
                     	
  23.         </form>
    24. 
                     	
  24.         <form method="post" action="./#contactInner">
    25. 
                     	
  25.           {$hiddens}
    26. 
                     	
  26.           <input type="hidden" name="page_name" value="finish">
    27. 
                     	
  27.           <input type="submit" value="送信する">
    28. 
                     	
  28.         </form>
    29. 
                     	
  29.       </div>
    30. 
                     	
  30.     </div>
    31. 
                    	
  31.   </div>
    32. 
                    	
  32. </section>
    33.

input.htmlに比べればわかりやすですかね（笑）。こちらもひとつずつ確認していきましょう。記入してもらった値はtableレイアウトで表示しています。

「{loop:$params}～{/loop:$params}」を記述すると記入した項目を繰り返して出力できます。thタグには「{$params[].key}」として項目名を、tdタグには「{$params[].value.nl2br}」として記入して頂いた値を表示します。

形としては記入して頂いた情報を一覧で表示し、それで間違いがなければ「送信する」をクリック、書き直したい場合は「入力画面に戻る」をクリックするというものです。

なのでtableタグの下には「type=”submit”」のinputタグを2つ表示する事になります。ここもaction属性に「./#contactInner」を記述してページ内リンクを利用します。

竹馬

デモサイトでは「送信する」ボタンは赤色、「入力画面に戻る」ボタンは灰色にしています。ユーザーが認識しやすい目立つ色を使って視覚的に導いていくのも大事です。

確認ページをCSSで調整する

次は確認ページのデザインを整えていきましょう。

style.css

                	
    
                        
  1. /* comfirm */
    2. 
                        
  2. #contact .formBox .confirmTxt {
    3. 
                        
  3.   font-size: 1.6rem;
    4. 
                        
  4.   letter-spacing: 0.09em
    5. 
                        
  5. }
    6. 
                        
  6. #contact .formBox .confirmBox { margin-top: 10px }
    7. 
                        
  7. #contact .formBox .confirmBox table {
    8. 
                        
  8.   width: 900px;
    9. 
                        
  9.   border: 1px solid #c1c1c1
    10. 
                        
  10. }
    11. 
                        
  11. #contact .formBox .confirmBox th,
    12. 
                        
  12. #contact .formBox .confirmBox td {
    13. 
                        
  13.   letter-spacing: 0.09em;
    14. 
                        
  14.   text-align: left;
    15. 
                        
  15.   padding: 10px;
    16. 
                        
  16.   border: 1px solid #c1c1c1
    17. 
                        
  17. }
    18. 
                        
  18. #contact .formBox .confirmBox th {
    19. 
                        
  19.   width: 200px;
    20. 
                        
  20.   background: #f0f0f0
    21. 
                        
  21. }
    22. 
                        
  22. #contact .formBox .btnWrap {
    23. 
                        
  23.   font-size: 0;
    24. 
                        
  24.   text-align: center;
    25. 
                        
  25.   margin-top: 20px
    26. 
                        
  26. }
    27. 
                        
  27. #contact .formBox .btnWrap form {
    28. 
                        
  28.   width: 300px;
    29. 
                        
  29.   vertical-align: middle;
    30. 
                        
  30.   display: inline-block
    31. 
                        
  31. }
    32. 
                        
  32. #contact .formBox .btnWrap form + form { margin-left: 40px }
    33. 
                        
  33. #contact .formBox .btnWrap form:nth-child(1) input[type=submit] {
    34. 
                        
  34.   width: 100%;
    35. 
                        
  35.   height: 60px;
    36. 
                        
  36.   font-size: 1.6rem;
    37. 
                        
  37.   font-weight: 600;
    38. 
                        
  38.   font-family: inherit;
    39. 
                        
  39.   letter-spacing: 0.09em;
    40. 
                        
  40.   line-height: 60px;
    41. 
                        
  41.   vertical-align: middle;
    42. 
                        
  42.   border: none;
    43. 
                        
  43.   background: #c1c1c1;
    44. 
                        
  44.   position: relative;
    45. 
                        
  45.   text-decoration: none;
    46. 
                        
  46.   display: block
    47. 
                        
  47. }
    48. 
                        
  48. #contact .formBox .btnWrap form:nth-child(2) input[type=submit] {
    49. 
                        
  49.   width: 100%;
    50. 
                        
  50.   color: #fff;
    51. 
                        
  51.   font-size: 1.6rem;
    52. 
                        
  52.   font-weight: 600;
    53. 
                        
  53.   font-family: inherit;
    54. 
                        
  54.   letter-spacing: 0.09em;
    55. 
                        
  55.   line-height: 60px;
    56. 
                        
  56.   border: none;
    57. 
                        
  57.   background: #e21412;
    58. 
                        
  58.   position: relative;
    59. 
                        
  59.   text-decoration: none;
    60. 
                        
  60.   display: block
    61. 
                        
  61. }
    62. 
                        
  62. @media screen and (max-width: 768px) {
    63. 
                        
  63.   #contact .formBox .confirmBox table {
    64. 
                        
  64.     width: 100%;
    65. 
                        
  65.     border-bottom: none
    66. 
                        
  66.   }
    67. 
                        
  67.   #contact .formBox .confirmBox th,
    68. 
                        
  68.   #contact .formBox .confirmBox td {
    69. 
                        
  69.     width: 100%;
    70. 
                        
  70.     border: none;
    71. 
                        
  71.     border-bottom: 1px solid #c1c1c1;
    72. 
                        
  72.     display: block
    73. 
                        
  73.   }
    74. 
                        
  74.   #contact .formBox .btnWrap form { width: 100% }
    75. 
                        
  75.   #contact .formBox .btnWrap form + form {
    76. 
                        
  76.     margin-top: 10px;
    77. 
                        
  77.     margin-left: 0
    78. 
                        
  78.   }
    79. 
                        
  79.   #contact .formBox .btnWrap form:nth-child(1) input[type=submit],
    80. 
                        
  80.   #contact .formBox .btnWrap form:nth-child(2) input[type=submit] {
    81. 
                        
  81.     width: 300px;
    82. 
                        
  82.     margin: 0 auto
    83. 
                        
  83.   }
    84. 
                        
  84. }
    85.

tableのデザインが出てきましたけどそんなに難しくないですね。thタグとtdタグを横並びに表示していますけど、スマホ表示の時にはthタグもtdタグも1行ずつ表示しています。以前やったdlタグと同じ形です。

フォーム関連でもうひとつ言っておくと、inputタグやtextareaタグは共通デザインで指定した「font-family」が適応されなかったりします。

なのでデモサイトでは「type=”submit”」のinputタグに対しては「font-family:inherit;」の指定を付け加えています。記入欄はそのままにしているので文字の種類を合わせたい方はここにも設定を追加してみてください。

完了ページ・エラーページをHTMLで構築する

残りの完了ページ（finish.html）とエラーページ（error.html）は形がほぼほぼ同じなのでまとめて見ていきます。

finish.html

                	
    
                    	
  1. <section id="contact">
    2. 
                    	
  2.   <div class="imageWrap"></div>
    3. 
                    	
  3.   <div class="inner" id="contactInner">
    4. 
                     	
  4.     ～「.title」の記述省略～
    5. 
                     	
  5.     ～「.txt」の記述省略～
    6. 
                     	
  6.     <div class="formBox">
    7. 
                     	
  7.       <h3 class="finishTitle">お問い合わせありがとうございます。</h3>
    8. 
                     	
  8.       <p>お問い合わせ内容を確認の後、2営業日以内にご連絡させて頂きます。<br>連絡がない場合はメールが届いていない恐れがありますのでお手数ですがお電話にてご連絡ください。</p>
    9. 
                     	
  9.     </div>
    10. 
                    	
  10.   </div>
    11. 
                    	
  11. </section>
    12.

完了ページというのはフォーム送信が完了した後に「お問い合わせありがとうございます」などのメッセージを添えて表示されるページです。

今回は記入欄が3つしかありませんが、ユーザーが手間をかけてわざわざ送ってくれたメッセージです。ここでは感謝の気持ちを表し、「送信が完了した」という事をしっかりと伝えましょう。

error.html

                	
    
                    	
  1. <section id="contact">
    2. 
                    	
  2.   <div class="imageWrap"></div>
    3. 
                    	
  3.   <div class="inner" id="contactInner">
    4. 
                     	
  4.     ～「.title」の記述省略～
    5. 
                     	
  5.     ～「.txt」の記述省略～
    6. 
                      	
  6.     <div class="formBox">
    7. 
                      	
  7.       <h3 class="errorTitle">エラーが発生しました</h3>
    8. 
                      	
  8.       <p>お手数をおかけしますが、再度、お問い合わせフォームからご連絡頂くか、<br>「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    9. 
                      	
  9.       <div class="errorBtn">
    10. 
                      	
  10.         <a href="./">お問い合わせフォームへ戻る</a>
    11. 
                      	
  11.       </div>
    12. 
                      	
  12.     </div>
    13. 
                    	
  13.   </div>
    14. 
                    	
  14. </section>
    15.

個人的にはTransmitMailを使っていてエラーは出た事がないんですが、もしもの時のためにこのページも用意しておきましょう。

何らかの不具合によってフォームシステムがうまく機能しない時にこのページに遷移するんですが、その場合、「もう一度試して頂くか、お電話でご連絡ください」と記入があれば良いかと思います。

Webの操作に慣れないユーザーさんであれば、「頑張って記入したのに、もうエエわっ！」って怒ってサイトを離れてしまう事もあるのでアフターフォローも大切です。

竹馬

制作途中のfinish.htmlやerror.htmlなどのデザインをブラウザで確認する場合は、直接、HTMLファイルをブラウザにドラッグ&ドロップすればOKです。

完了ページ・エラーページをCSSで調整する

いよいよ最後の完了ページとエラーページのデザイン調整です。下記のコードをコピペしてください。

style.css

                	
    
                        
  1. /* finish & error */
    2. 
                        
  2. #contact .formBox h3 {
    3. 
                        
  3.   font-size: 2rem;
    4. 
                        
  4.   letter-spacing: 0.09em;
    5. 
                        
  5.   text-align: center;
    6. 
                        
  6.   margin-bottom: 40px
    7. 
                        
  7. }
    8. 
                        
  8. #contact .formBox h3.finishTitle,
    9. 
                        
  9. #contact .formBox h3.errorTitle {
    10. 
                        
  10.   color: #e21412
    11. 
                        
  11. }
    12. 
                        
  12. #contact .formBox h3.errorTitle + p,
    13. 
                        
  13. #contact .formBox h3.finishTitle + p {
    14. 
                        
  14.   font-size: 1.6rem;
    15. 
                        
  15.   letter-spacing: 0.09em;
    16. 
                        
  16.   text-align: center
    17. 
                        
  17. }
    18. 
                        
  18. #contact .formBox p + p { margin-top: 10px }
    19. 
                        
  19. #contact .formBox .errorBtn {
    20. 
                        
  20.   width: 300px;
    21. 
                        
  21.   text-align: center;
    22. 
                        
  22.   margin: 60px auto 0
    23. 
                        
  23. }
    24. 
                        
  24. #contact .formBox .errorBtn a {
    25. 
                        
  25.   color: #fff;
    26. 
                        
  26.   font-size: 1.6rem;
    27. 
                        
  27.   letter-spacing: 0.09em;
    28. 
                        
  28.   line-height: 60px;
    29. 
                        
  29.   background: #e21412;
    30. 
                        
  30.   position: relative;
    31. 
                        
  31.   display: block;
    32. 
                        
  32. }
    33. 
                        
  33. @media screen and (max-width: 768px) {
    34. 
                        
  34.   #contact .formBox h3.errorTitle + p br,
    35. 
                        
  35.   #contact .formBox h3.finishTitle + p br {
    36. 
                        
  36.     display: none
    37. 
                        
  37.   }
    38. 
                        
  38. }
    39.

はい、という訳でここまででお問い合わせページも完成です。ちなみにフォームシステムはサーバーへアップロードしないと動作しないので注意してください。

input.htmlやconfirm.htmlのファイルを先ほどのように、直接、ブラウザへドラッグ&ドロップしてローカルでチェックしても「{$お名前}」などの記述がそのまま表示されてしまいます。

これはデザイン崩れじゃないので安心してください（笑）。フォームの動作確認をおこなう時はご自身のサーバーへファイルをアップロードしてからおこなってください。

記述したHTMLとCSSの確認

ではこのページで追加したコードをひと通り確認しておきます。

input.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                    	
  10. <main>
    11. 
                    	
  11.   <section id="contact">
    12. 
                    	
  12.     <div class="imageWrap"></div>
    13. 
                    	
  13.     <div class="inner" id="contactInner">
    14. 
                     	
  14.       <div class="title">
    15. 
                     	
  15.         <h2>お問い合わせ</h2>
    16. 
                     	
  16.       </div>
    17. 
                     	
  17.       <div class="txt">
    18. 
                     	
  18.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    19. 
                     	
  19.       </div>
    20. 
                     	
  20.       <div class="formBox">
    21. 
                     	
  21.         <form method="post" action="./#contactInner" enctype="multipart/form-data">
    22. 
                     	
  22.           <input type="hidden" name="csrf_token" value="{$csrf_token}">
    23. 
                     	
  23.           <div class="itemWrap">
    24. 
                     	
  24.             <label><p>お名前<i class="required"></i></p><input type="text" name="お名前" value="{$お名前}"></label>
    25. 
                    	
  25.             <input type="hidden" name="required[]" value="お名前">
    26. 
                    	
  26.             {if:$required.お名前}<em data-rule="required">※{$required.お名前}</em>{/if:$required.お名前}
    27. 
                    	
  27.           </div>
    28. 
                    	
  28.           <div class="itemWrap">
    29. 
                    	
  29.             <label><p>メールアドレス<i class="required"></i></p><input type="text" name="メールアドレス" value="{$メールアドレス}"></label>
    30. 
                    	
  30.             <input type="hidden" name="required[]" value="メールアドレス">
    31. 
                    	
  31.             {if:$required.メールアドレス}<em data-rule="required">※{$required.メールアドレス}</em>{/if:$required.メールアドレス}
    32. 
                    	
  32.             <input type="hidden" name="email[]" value="メールアドレス">
    33. 
                    	
  33.             {if:$email.メールアドレス}<em data-rule="email">※{$email.メールアドレス}</em>{/if:$email.メールアドレス}
    34. 
                    	
  34.           </div>
    35. 
                    	
  35.           <div class="itemWrap">
    36. 
                    	
  36.             <label><p>お問い合わせ内容<i class="required"></i></p><textarea name="お問い合わせ内容">{$お問い合わせ内容}</textarea></label>
    37. 
                    	
  37.             <input type="hidden" name="required[]" value="お問い合わせ内容">
    38. 
                    	
  38.             {if:$required.お問い合わせ内容}<em data-rule="required">※{$required.お問い合わせ内容}</em>{/if:$required.お問い合わせ内容}
    39. 
                     	
  39.           </div>
    40. 
                     	
  40.           <div class="fonmBtn">
    41. 
                     	
  41.             <input type="submit" value="確認する">
    42. 
                     	
  42.           </div>
    43. 
                     	
  43.         </form>
    44. 
                     	
  44.       </div>
    45. 
                    	
  45.     </div>
    46. 
                    	
  46.   </section>
    47. 
                    	
  47. </main>
    48. 
                        
  48. <footer>
    49. 
                        
  49. ～footerの記述省略～
    50. 
                        
  50. </footer>
    51. 
                        
  51. ～JSファイルの読み込み省略～
    52. 
                        
  52. </body>
    53. 
                        
  53. </html>
    54.

confirm.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                    	
  10. <main>
    11. 
                    	
  11.   <section id="contact">
    12. 
                    	
  12.     <div class="imageWrap"></div>
    13. 
                    	
  13.     <div class="inner" id="contactInner">
    14. 
                     	
  14.       <div class="title">
    15. 
                     	
  15.         <h2>お問い合わせ</h2>
    16. 
                     	
  16.       </div>
    17. 
                     	
  17.       <div class="txt">
    18. 
                     	
  18.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    19. 
                     	
  19.       </div>
    20. 
                      	
  20.       <div class="formBox">
    21. 
                      	
  21.         <p class="confirmTxt">下記の項目をご確認の上、送信してください。</p>
    22. 
                      	
  22.         <div class="confirmBox">
    23. 
                      	
  23.           <table>
    24. 
                      	
  24.             {loop:$params}
    25. 
                      	
  25.             <tr>
    26. 
                      	
  26.               <th>{$params[].key} </th>
    27. 
                      	
  27.               <td>{$params[].value.nl2br} </td>
    28. 
                      	
  28.             </tr>
    29. 
                      	
  29.             {/loop:$params}
    30. 
                      	
  30.           </table>
    31. 
                     	
  31.         </div>
    32. 
                     	
  32.         <div class="btnWrap">
    33. 
                     	
  33.           <form method="post" action="./#contactInner">
    34. 
                     	
  34.             {$hiddens}
    35. 
                     	
  35.             <input type="hidden" name="page_name" value="input">
    36. 
                     	
  36.             <input type="submit" value="入力画面に戻る">
    37. 
                     	
  37.           </form>
    38. 
                     	
  38.           <form method="post" action="./#contactInner">
    39. 
                     	
  39.             {$hiddens}
    40. 
                     	
  40.             <input type="hidden" name="page_name" value="finish">
    41. 
                     	
  41.             <input type="submit" value="送信する">
    42. 
                     	
  42.           </form>
    43. 
                     	
  43.         </div>
    44. 
                     	
  44.       </div>
    45. 
                    	
  45.     </div>
    46. 
                    	
  46.   </section>
    47. 
                    	
  47. </main>
    48. 
                        
  48. <footer>
    49. 
                        
  49. ～footerの記述省略～
    50. 
                        
  50. </footer>
    51. 
                        
  51. ～JSファイルの読み込み省略～
    52. 
                        
  52. </body>
    53. 
                        
  53. </html>
    54.

finish.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                    	
  10. <main>
    11. 
                    	
  11.   <section id="contact">
    12. 
                    	
  12.     <div class="imageWrap"></div>
    13. 
                    	
  13.     <div class="inner" id="contactInner">
    14. 
                     	
  14.       <div class="title">
    15. 
                     	
  15.         <h2>お問い合わせ</h2>
    16. 
                     	
  16.       </div>
    17. 
                     	
  17.       <div class="txt">
    18. 
                     	
  18.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    19. 
                     	
  19.       </div>
    20. 
                     	
  20.       <div class="formBox">
    21. 
                     	
  21.         <h3 class="finishTitle">お問い合わせありがとうございます。</h3>
    22. 
                     	
  22.         <p>お問い合わせ内容を確認の後、2営業日以内にご連絡させて頂きます。<br>連絡がない場合はメールが届いていない恐れがありますのでお手数ですがお電話にてご連絡ください。</p>
    23. 
                     	
  23.       </div>
    24. 
                    	
  24.     </div>
    25. 
                    	
  25.   </section>
    26. 
                    	
  26. </main>
    27. 
                        
  27. <footer>
    28. 
                        
  28. ～footerの記述省略～
    29. 
                        
  29. </footer>
    30. 
                        
  30. ～JSファイルの読み込み省略～
    31. 
                        
  31. </body>
    32. 
                        
  32. </html>
    33.

finish.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                    	
  10. <main>
    11. 
                    	
  11.   <section id="contact">
    12. 
                    	
  12.     <div class="imageWrap"></div>
    13. 
                    	
  13.     <div class="inner" id="contactInner">
    14. 
                     	
  14.       <div class="title">
    15. 
                     	
  15.         <h2>お問い合わせ</h2>
    16. 
                     	
  16.       </div>
    17. 
                     	
  17.       <div class="txt">
    18. 
                     	
  18.         <p>いやしのカレー サンプルへのお問い合わせや団体様のご予約などお気軽にご連絡ください。<br>お問い合わせ内容を確認の後、改めてご連絡させて頂きます。（定休日 : 水曜日）<br>お急ぎの場合はお電話にて「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    19. 
                     	
  19.       </div>
    20. 
                      	
  20.       <div class="formBox">
    21. 
                      	
  21.         <h3 class="errorTitle">エラーが発生しました</h3>
    22. 
                      	
  22.         <p>お手数をおかけしますが、再度、お問い合わせフォームからご連絡頂くか、<br>「06-○○○○-○○○○」へ直接ご連絡ください。（営業時間 : 10：00 ～ 23:00）</p>
    23. 
                      	
  23.         <div class="errorBtn">
    24. 
                      	
  24.           <a href="./">お問い合わせフォームへ戻る</a>
    25. 
                      	
  25.         </div>
    26. 
                      	
  26.       </div>
    27. 
                    	
  27.     </div>
    28. 
                    	
  28.   </section>
    29. 
                    	
  29. </main>
    30. 
                        
  30. <footer>
    31. 
                        
  31. ～footerの記述省略～
    32. 
                        
  32. </footer>
    33. 
                        
  33. ～JSファイルの読み込み省略～
    34. 
                        
  34. </body>
    35. 
                        
  35. </html>
    36.

style.css

                	
    
                        
  1. ～共通デザイン省略～
    2. 
                        
  2. ～headerデザイン省略～
    3. 
                        
  3. ～navデザイン省略～
    4. 
                        
  4. ～スライダーデザイン省略～
    5. 
                        
  5. ～お知らせデザイン省略～
    6. 
                        
  6. ～メニューデザイン省略～
    7. 
                        
  7. ～お店情報デザイン省略～
    8. 
                        
  8. ～footerデザイン省略～
    9. 
                        
  9. ～お問い合わせ共通デザイン省略～
    10. 
                        
  10. /* input */
    11. 
                    	
  11. #contact .formBox { margin-top: 60px }
    12. 
                    	
  12. #contact .formBox .itemWrap {
    13. 
                    	
  13.   width: 100%;
    14. 
                    	
  14.   padding: 20px 10px;
    15. 
                    	
  15.   border-bottom: 1px dashed #c1c1c1
    16. 
                    	
  16. }
    17. 
                    	
  17. #contact .formBox .itemWrap:first-child { border-top: 1px dashed #c1c1c1 }
    18. 
                    	
  18. #contact .formBox .itemWrap label { display: table }
    19. 
                    	
  19. #contact .formBox .itemWrap label p {
    20. 
                    	
  20.   width: 240px;
    21. 
                    	
  21.   font-size: 1.6rem;
    22. 
                    	
  22.   letter-spacing: 0.09em;
    23. 
                    	
  23.   vertical-align: top;
    24. 
                    	
  24.   text-align: left;
    25. 
                    	
  25.   padding: 13px 0 0 0;
    26. 
                    	
  26.   display: table-cell;
    27. 
                    	
  27.   position: relative
    28. 
                    	
  28. }
    29. 
                    	
  29. #contact .formBox .itemWrap label p .required {
    30. 
                    	
  30.   color: #e21412;
    31. 
                    	
  31.   font-size: 1.3rem;
    32. 
                    	
  32.   letter-spacing: 0.09em;
    33. 
                    	
  33.   font-style: normal;
    34. 
                    	
  34.   position: absolute;
    35. 
                    	
  35.   top: 18px;
    36. 
                    	
  36.   right: 20px
    37. 
                    	
  37. }
    38. 
                    	
  38. #contact .formBox .itemWrap label p .required::after { content: "必須" }
    39. 
                    	
  39. #contact .formBox .itemWrap input {
    40. 
                    	
  40.   width: 620px;
    41. 
                    	
  41.   height: 50px;
    42. 
                    	
  42.   font-size: 1.6rem;
    43. 
                    	
  43.   vertical-align: middle;
    44. 
                    	
  44.   padding: 0 10px;
    45. 
                    	
  45.   border: 2px solid #c1c1c1;
    46. 
                    	
  46.   transition: all 0.2s
    47. 
                    	
  47. }
    48. 
                    	
  48. #contact .formBox .itemWrap input:hover,
    49. 
                    	
  49. #contact .formBox .itemWrap input:active {
    50. 
                    	
  50.   border: 2px solid #1f1f1f
    51. 
                    	
  51. }
    52. 
                    	
  52. #contact .formBox .itemWrap textarea {
    53. 
                    	
  53.   width: 620px;
    54. 
                    	
  54.   height: 120px;
    55. 
                    	
  55.   font-size: 1.6rem;
    56. 
                    	
  56.   vertical-align: middle;
    57. 
                    	
  57.   padding: 10px;
    58. 
                    	
  58.   border: 2px solid #c1c1c1;
    59. 
                    	
  59.   transition: all 0.2s
    60. 
                    	
  60. }
    61. 
                    	
  61. #contact .formBox .itemWrap textarea:hover,
    62. 
                    	
  62. #contact .formBox .itemWrap textarea:active {
    63. 
                    	
  63.   border: 2px solid #1f1f1f
    64. 
                    	
  64. }
    65. 
                    	
  65. #contact .formBox .itemWrap em {
    66. 
                    	
  66.   color: #e21412;
    67. 
                    	
  67.   font-size: 1.3rem;
    68. 
                    	
  68.   font-style: normal;
    69. 
                    	
  69.   letter-spacing: 0.09em;
    70. 
                    	
  70.   text-align: left;
    71. 
                    	
  71.   padding: 0 10px 0 240px;
    72. 
                    	
  72.   margin-top: 10px;
    73. 
                    	
  73.   display: block
    74. 
                    	
  74. }
    75. 
                    	
  75. #contact .formBox .itemWrap em + em { margin-top: 0 }
    76. 
                    	
  76. #contact .formBox .fonmBtn {
    77. 
                    	
  77.   width: 360px;
    78. 
                    	
  78.   text-align: center;
    79. 
                    	
  79.   margin: 20px auto 0
    80. 
                    	
  80. }
    81. 
                    	
  81. #contact .formBox .fonmBtn input {
    82. 
                    	
  82.   width: 100%;
    83. 
                    	
  83.   color: #fff;
    84. 
                    	
  84.   font-size: 1.6rem;
    85. 
                    	
  85.   font-weight: 600;
    86. 
                    	
  86.   font-family: inherit;
    87. 
                    	
  87.   letter-spacing: 0.09em;
    88. 
                    	
  88.   line-height: 60px;
    89. 
                    	
  89.   border: none;
    90. 
                    	
  90.   background: #e21412;
    91. 
                    	
  91.   position: relative;
    92. 
                    	
  92.   display: block
    93. 
                    	
  93. }
    94. 
                    	
  94. @media screen and (max-width: 768px) {
    95. 
                    	
  95.   #contact .formBox { margin-top: 40px }
    96. 
                    	
  96.   #contact .formBox .itemWrap { padding: 20px 0 }
    97. 
                    	
  97.   #contact .formBox .itemWrap label { display: block }
    98. 
                    	
  98.   #contact .formBox .itemWrap label p {
    99. 
                    	
  99.     width: 100%;
    100. 
                    	
  100.     padding: 6px 0;
    101. 
                    	
  101.     display: block
    102. 
                    	
  102.   }
    103. 
                    	
  103.   #contact .formBox .itemWrap label p .required {
    104. 
                    	
  104.     top: 10px;
    105. 
                    	
  105.     right: 0
    106. 
                    	
  106.   }
    107. 
                    	
  107.   #contact .formBox .itemWrap input { width: 100% }
    108. 
                    	
  108.   #contact .formBox .itemWrap textarea { width: 100% }
    109. 
                    	
  109.   #contact .formBox .itemWrap em { padding: 0 }
    110. 
                    	
  110.   #contact .formBox .fonmBtn { width: 300px }
    111. 
                    	
  111. }
    112. 
                    	
  112.  
    113. 
                        
  113. /* comfirm */
    114. 
                        
  114. #contact .formBox .confirmTxt {
    115. 
                        
  115.   font-size: 1.6rem;
    116. 
                        
  116.   letter-spacing: 0.09em
    117. 
                        
  117. }
    118. 
                        
  118. #contact .formBox .confirmBox { margin-top: 10px }
    119. 
                        
  119. #contact .formBox .confirmBox table {
    120. 
                        
  120.   width: 900px;
    121. 
                        
  121.   border: 1px solid #c1c1c1
    122. 
                        
  122. }
    123. 
                        
  123. #contact .formBox .confirmBox th,
    124. 
                        
  124. #contact .formBox .confirmBox td {
    125. 
                        
  125.   letter-spacing: 0.09em;
    126. 
                        
  126.   text-align: left;
    127. 
                        
  127.   padding: 10px;
    128. 
                        
  128.   border: 1px solid #c1c1c1
    129. 
                        
  129. }
    130. 
                        
  130. #contact .formBox .confirmBox th {
    131. 
                        
  131.   width: 200px;
    132. 
                        
  132.   background: #f0f0f0
    133. 
                        
  133. }
    134. 
                        
  134. #contact .formBox .btnWrap {
    135. 
                        
  135.   font-size: 0;
    136. 
                        
  136.   text-align: center;
    137. 
                        
  137.   margin-top: 20px
    138. 
                        
  138. }
    139. 
                        
  139. #contact .formBox .btnWrap form {
    140. 
                        
  140.   width: 300px;
    141. 
                        
  141.   vertical-align: middle;
    142. 
                        
  142.   display: inline-block
    143. 
                        
  143. }
    144. 
                        
  144. #contact .formBox .btnWrap form + form { margin-left: 40px }
    145. 
                        
  145. #contact .formBox .btnWrap form:nth-child(1) input[type=submit] {
    146. 
                        
  146.   width: 100%;
    147. 
                        
  147.   height: 60px;
    148. 
                        
  148.   font-size: 1.6rem;
    149. 
                        
  149.   font-weight: 600;
    150. 
                        
  150.   font-family: inherit;
    151. 
                        
  151.   letter-spacing: 0.09em;
    152. 
                        
  152.   line-height: 60px;
    153. 
                        
  153.   vertical-align: middle;
    154. 
                        
  154.   border: none;
    155. 
                        
  155.   background: #c1c1c1;
    156. 
                        
  156.   position: relative;
    157. 
                        
  157.   text-decoration: none;
    158. 
                        
  158.   display: block
    159. 
                        
  159. }
    160. 
                        
  160. #contact .formBox .btnWrap form:nth-child(2) input[type=submit] {
    161. 
                        
  161.   width: 100%;
    162. 
                        
  162.   color: #fff;
    163. 
                        
  163.   font-size: 1.6rem;
    164. 
                        
  164.   font-weight: 600;
    165. 
                        
  165.   font-family: inherit;
    166. 
                        
  166.   letter-spacing: 0.09em;
    167. 
                        
  167.   line-height: 60px;
    168. 
                        
  168.   border: none;
    169. 
                        
  169.   background: #e21412;
    170. 
                        
  170.   position: relative;
    171. 
                        
  171.   text-decoration: none;
    172. 
                        
  172.   display: block
    173. 
                        
  173. }
    174. 
                        
  174. @media screen and (max-width: 768px) {
    175. 
                        
  175.   #contact .formBox .confirmBox table {
    176. 
                        
  176.     width: 100%;
    177. 
                        
  177.     border-bottom: none
    178. 
                        
  178.   }
    179. 
                        
  179.   #contact .formBox .confirmBox th,
    180. 
                        
  180.   #contact .formBox .confirmBox td {
    181. 
                        
  181.     width: 100%;
    182. 
                        
  182.     border: none;
    183. 
                        
  183.     border-bottom: 1px solid #c1c1c1;
    184. 
                        
  184.     display: block
    185. 
                        
  185.   }
    186. 
                        
  186.   #contact .formBox .btnWrap form { width: 100% }
    187. 
                        
  187.   #contact .formBox .btnWrap form + form {
    188. 
                        
  188.     margin-top: 10px;
    189. 
                        
  189.     margin-left: 0
    190. 
                        
  190.   }
    191. 
                        
  191.   #contact .formBox .btnWrap form:nth-child(1) input[type=submit],
    192. 
                        
  192.   #contact .formBox .btnWrap form:nth-child(2) input[type=submit] {
    193. 
                        
  193.     width: 300px;
    194. 
                        
  194.     margin: 0 auto
    195. 
                        
  195.   }
    196. 
                        
  196. }
    197. 
                        
  197.  
    198. 
                        
  198. /* finish & error */
    199. 
                        
  199. #contact .formBox h3 {
    200. 
                        
  200.   font-size: 2rem;
    201. 
                        
  201.   letter-spacing: 0.09em;
    202. 
                        
  202.   text-align: center;
    203. 
                        
  203.   margin-bottom: 40px
    204. 
                        
  204. }
    205. 
                        
  205. #contact .formBox h3.finishTitle,
    206. 
                        
  206. #contact .formBox h3.errorTitle {
    207. 
                        
  207.   color: #e21412
    208. 
                        
  208. }
    209. 
                        
  209. #contact .formBox h3.errorTitle + p,
    210. 
                        
  210. #contact .formBox h3.finishTitle + p {
    211. 
                        
  211.   font-size: 1.6rem;
    212. 
                        
  212.   letter-spacing: 0.09em;
    213. 
                        
  213.   text-align: center
    214. 
                        
  214. }
    215. 
                        
  215. #contact .formBox p + p { margin-top: 10px }
    216. 
                        
  216. #contact .formBox .errorBtn {
    217. 
                        
  217.   width: 300px;
    218. 
                        
  218.   text-align: center;
    219. 
                        
  219.   margin: 60px auto 0
    220. 
                        
  220. }
    221. 
                        
  221. #contact .formBox .errorBtn a {
    222. 
                        
  222.   color: #fff;
    223. 
                        
  223.   font-size: 1.6rem;
    224. 
                        
  224.   letter-spacing: 0.09em;
    225. 
                        
  225.   line-height: 60px;
    226. 
                        
  226.   background: #e21412;
    227. 
                        
  227.   position: relative;
    228. 
                        
  228.   display: block;
    229. 
                        
  229. }
    230. 
                        
  230. @media screen and (max-width: 768px) {
    231. 
                        
  231.   #contact .formBox h3.errorTitle + p br,
    232. 
                        
  232.   #contact .formBox h3.finishTitle + p br {
    233. 
                        
  233.     display: none
    234. 
                        
  234.   }
    235. 
                        
  235. }
    236.

お疲れ様でした～、これで最初から最後までホームページ作り上げましたね。

このホームページの制作難易度は5段階のレベルで分けるなら「★★☆☆☆」、レベル2くらいかな（笑）。フォームはちょっと複雑ですけど全体的には簡単なホームページです。

かなりシンプルな形なので、情報だけ変えてこのまま使って頂いても良いですし、僕としてはこれをベースにしていろいろとご自身でデザインを追加して遊んでもらえたらなぁ、と思います。

僕もまだまだ知らない事だらけです。ホームページは作りながらちょっとずつ知識を積み上げていくカンジなので、そのためにも遊び心を忘れずにホームページ作りを楽しんでください。

お問い合わせページの骨組みを作る 無料で使えるデモサイト

よく読まれている記事

おすすめの記事

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

チェピレア日記