Arusan Blog > HTML > [HTML]お問い合わせフォームの作り方
HTML

[HTML]お問い合わせフォームの作り方

今回は、以下の画像のようなお問い合わせフォームの作り方を解説したいと思います。

お問い合わせフォームの作り方

今回は、上記画像のコードを紹介した後、HTMLの要素の解説をしたいと思います。

画像のコード紹介

ブラウザでの表示

HTML


<div class="contact-form">
          <form action="#" method="post">
            <dl>
              <div class="contact__form-box">
                <dt>
                  <div>お問い合わせ種別</div>
                </dt>
                <dd>
                  <select name=""  id="" aria-placeholder="選択してください">
                    <option value="">選択してください</option>
                    <option value="">選択してください</option>
                    <option value="">選択してください</option>
                  </select>
                </dd>
              </div>

              <div class="contact__form-box">
                <dt>
                  <div>氏名</div>
                  <span>必須</span>
                </dt>
                <dd class="contact-1">
                  <input type="text" placeholder="氏名">
                </dd>
              </div>

              <div class="contact__form-box">
                <dt>
                  <div>フリガナ</div>
                  <span>必須</span>
                </dt>
                <dd class="contact-1">
                  <input type="text" placeholder="フリガナ">
                </dd>
              </div>

              <div class="contact__form-box">
                <dt>
                  <div>メールアドレス</div>
                </dt>
                <dd class="contact-1">
                  <input type="email" placeholder="sample@gmail.com">
                </dd>
              </div>

              <div class="contact__form-box">
                <dt>
                  <div>性別</div>
                </dt>
                <dd class="content-2">
                  <div class="contact__radio">
                    <input type="radio" name="sex" id="men">
                    <label for="men">男性</label>
                  </div>
                  <div class="contact__radio">
                    <input type="radio" name="sex" id="women">
                    <label for="women">女性</label>
                  </div>
                </dd>
              </div>
              <div class="contact__form-box1">
                <dt>
                  <label for="">メッセージ</label>
                </dt>
                <dt>
                  <textarea name="" id="" cols="30" rows="8"></textarea>
                </dt>
              </div>
            </dl>
            <div class="contact__form-box2">
              <input type="checkbox" name="" id="private">
              <label for="private">個人情報保護方針に同意する</label>
            </div>
            <div class="contact-btn">
              <a href="#">送信する</a>
            </div>
          </form>
        </div>

Sass


$breakpoints: (
 'sp': 'screen and (max-width: 767px)',
 'md': 'screen and (min-width: 768px)',
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}


.contact-form {

  @include mq(sp) {
    padding: 40px 16px;
  }

  @include mq(md) {
    padding: 60px 90px;
  }
}

.contact__form-box {

  @include mq(sp) {
    font-size: 16px;
    line-height: 22.5px;
    color: #3E3E3E;
    margin-bottom: 40px;
  }

  @include mq(md) {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: rgba(62, 62, 62, 1);
    line-height: 22.5px;
    margin-bottom: 41px;
  }

  span {

    @include mq(sp) {
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      font-weight: normal;
      padding: 2px 8px 2px;
      background-color: rgba(255, 70, 70, 1);
      border-radius: 5px;
      margin-left: 20px;
    }

    @include mq(md) {
      font-size: 16px;
      color: rgba(255, 255, 255, 1);
      font-weight: normal;
      padding: 4px 8px 4px;
      background-color: rgba(255, 70, 70, 1);
      border-radius: 5px;
    }
  }

  dt {

    @include mq(sp) {
      width: 195px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    @include mq(md) {
      width: 195px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 80px;
    }
  }

  .contact-1 {


    @include mq(sp) {
      width: 100%;
    }

    @include mq(md) {
      width: 505px;
      color: rgba(112, 112, 112, 1);
    }

    input[type="text"]:focus,input[type="email"]:focus {
       border-bottom: 2px solid #4973FF;
       outline: none;
    }
    input {


      @include mq(sp) {
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(112, 112, 112, 1);
        font-size: 16px;
        line-height: 23px;
        height: 25px;
      }

      @include mq(md) {
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(112, 112, 112, 1);
        font-size: 22px;
        line-height: 22.5px;
        height: 40px;
      }
    }

  }
}
  select {

    &:focus {
      outline: none;
      border: 1px solid #4973FF;
    }

    @include mq(sp) {
      width: 100%;
      padding-top: 2px;
      padding-bottom: 6px;
      font-size: 16px;
      line-height: 23px;
      color: rgba(112, 112, 112, 1);
    }

    @include mq(md) {
      width: 261px;
      padding-left: 20px;
      padding-top: 2px;
      padding-bottom: 6px;
      font-size: 18px;
      line-height: 22.5px;
      color: rgba(112, 112, 112, 1);
    }
}

.contact__radio {

  position: relative;

  @include mq(sp) {
    margin-right: 65px;
  }

  @include mq(md) {
    margin-right: 80px;
  }

  input {

    display: none;


    @include mq(md) {
      width: 10px;
      margin-right: 15px;
    }
  }

    label {

      @include mq(sp) {
        padding-left: 30px;
      }

      @include mq(md) {
        padding-left: 30px;
      }
    }

    label:after {
      content: "";
      display: inline-block;
      border: 1px solid #3E3E3E;
      border-radius: 50%;
      padding: 5px;
      position: relative;
      left: -70px;

    }

    label:before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: #4973Ff;
      border-radius: 50%;

      @include mq(sp) {
        position: relative;
        left: -28px;
        top: -2px;
        opacity: 0;
      }

      @include mq(md) {
        position: relative;
        left: -16px;
        top: -2px;
        opacity: 0;
      }
    }

    input[type=radio]:hover + label:after {
      border: 1px solid #4973FF;
      cursor: pointer;

    }

    input[type=radio]:checked + label:before {
      opacity: 1;
    }
}

.content-2 {

  display: flex;
}

.contact__form-box1 {

  dt {

    @include mq(sp) {
      font-size: 16px;
      line-height: 22.5px;
      font-weight: normal;
      color: rgba(62, 62, 62, 1);
      margin-bottom: 10px;
    }

    @include mq(md) {
      font-size: 22px;
      line-height: 22.5px;
      font-weight: normal;
      color: rgba(62, 62, 62, 1);
      margin-bottom: 10px;
    }
  }

  textarea {
    width: 100%;
    outline: none;

    &:focus {
      border: 1px solid #4973FF;
    }
  }
}

.contact__form-box2 {

  margin-top: 30px;

  @include mq(sp) {
    display: flex;
    align-items: center;
  }

  @include mq(md) {
    display: flex;
    align-items: center;
  }

  input {

    display: none;
  }

  label {

    padding-left: 40px;

    @include mq(sp) {
      font-size: 16px;
      line-height: 22.5px;
      color: #3E3E3E;
    }

    @include mq(md) {
      font-size: 18px;
      line-height: 22.5px;
      color: rgba(62, 62, 62, 1);
    }
  }

  label:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #3E3E3E;
    position: relative;
    top: -22px;
    left: -35px;
  }

  label:before {
    opacity: 0;
    content: "";
    display: inline-block;
    width: 7px;
    height: 15px;
    border-right: 4px solid #4973FF;
    border-bottom: 4px solid #4973FF;
    transform: rotate(45deg);
    position: relative;
    top: -1px;
    left: -28px;
  }

  input[type=checkbox]:checked + label:before {
    opacity: 1;
  }

  input[type=checkbox]:hover + label:after {
    border: 1px solid #4973FF;
    cursor: pointer;
  }
}

.contact-btn {

  margin-top: 30px;
   @include mq(sp) {
     text-align: center;
   }

  a {

    &:hover {
      background-color: #ff9e1f;
    }

    @include mq(sp) {
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.45px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(255, 170, 59, 1);
      border-radius: 10px;
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
      padding: 13.5px 24px;
    }


    @include mq(md) {
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.45px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(255, 170, 59, 1);
      border-radius: 10px;
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
      padding: 14px 50px;
    }

  }
}

CSS


@media screen and (max-width: 767px) {
  .contact-form {
    padding: 40px 16px;
  }
}

@media screen and (min-width: 768px) {
  .contact-form {
    padding: 60px 90px;
  }
}

@media screen and (max-width: 767px) {
  .contact__form-box {
    font-size: 16px;
    line-height: 22.5px;
    color: #3E3E3E;
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #3e3e3e;
    line-height: 22.5px;
    margin-bottom: 41px;
  }
}

@media screen and (max-width: 767px) {
  .contact__form-box span {
    font-size: 14px;
    color: white;
    font-weight: normal;
    padding: 2px 8px 2px;
    background-color: #ff4646;
    border-radius: 5px;
    margin-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box span {
    font-size: 16px;
    color: white;
    font-weight: normal;
    padding: 4px 8px 4px;
    background-color: #ff4646;
    border-radius: 5px;
  }
}

@media screen and (max-width: 767px) {
  .contact__form-box dt {
    width: 195px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box dt {
    width: 195px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 80px;
  }
}

@media screen and (max-width: 767px) {
  .contact__form-box .contact-1 {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box .contact-1 {
    width: 505px;
    color: #707070;
  }
}

.contact__form-box .contact-1 input[type="text"]:focus, .contact__form-box .contact-1 input[type="email"]:focus {
  border-bottom: 2px solid #4973FF;
  outline: none;
}

@media screen and (max-width: 767px) {
  .contact__form-box .contact-1 input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #707070;
    font-size: 16px;
    line-height: 23px;
    height: 25px;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box .contact-1 input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #707070;
    font-size: 22px;
    line-height: 22.5px;
    height: 40px;
  }
}

select:focus {
  outline: none;
  border: 1px solid #4973FF;
}

@media screen and (max-width: 767px) {
  select {
    width: 100%;
    padding-top: 2px;
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 23px;
    color: #707070;
  }
}

@media screen and (min-width: 768px) {
  select {
    width: 261px;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 6px;
    font-size: 18px;
    line-height: 22.5px;
    color: #707070;
  }
}

.contact__radio {
  position: relative;
}

@media screen and (max-width: 767px) {
  .contact__radio {
    margin-right: 65px;
  }
}

@media screen and (min-width: 768px) {
  .contact__radio {
    margin-right: 80px;
  }
}

.contact__radio input {
  display: none;
}

@media screen and (min-width: 768px) {
  .contact__radio input {
    width: 10px;
    margin-right: 15px;
  }
}

@media screen and (max-width: 767px) {
  .contact__radio label {
    padding-left: 30px;
  }
}

@media screen and (min-width: 768px) {
  .contact__radio label {
    padding-left: 30px;
  }
}

.contact__radio label:after {
  content: "";
  display: inline-block;
  border: 1px solid #3E3E3E;
  border-radius: 50%;
  padding: 5px;
  position: relative;
  left: -70px;
}

.contact__radio label:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #4973Ff;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .contact__radio label:before {
    position: relative;
    left: -28px;
    top: -2px;
    opacity: 0;
  }
}

@media screen and (min-width: 768px) {
  .contact__radio label:before {
    position: relative;
    left: -16px;
    top: -2px;
    opacity: 0;
  }
}

.contact__radio input[type=radio]:hover + label:after {
  border: 1px solid #4973FF;
  cursor: pointer;
}

.contact__radio input[type=radio]:checked + label:before {
  opacity: 1;
}

.content-2 {
  display: flex;
}

@media screen and (max-width: 767px) {
  .contact__form-box1 dt {
    font-size: 16px;
    line-height: 22.5px;
    font-weight: normal;
    color: #3e3e3e;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box1 dt {
    font-size: 22px;
    line-height: 22.5px;
    font-weight: normal;
    color: #3e3e3e;
    margin-bottom: 10px;
  }
}

.contact__form-box1 textarea {
  width: 100%;
  outline: none;
}

.contact__form-box1 textarea:focus {
  border: 1px solid #4973FF;
}

.contact__form-box2 {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .contact__form-box2 {
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box2 {
    display: flex;
    align-items: center;
  }
}

.contact__form-box2 input {
  display: none;
}

.contact__form-box2 label {
  padding-left: 40px;
}

@media screen and (max-width: 767px) {
  .contact__form-box2 label {
    font-size: 16px;
    line-height: 22.5px;
    color: #3E3E3E;
  }
}

@media screen and (min-width: 768px) {
  .contact__form-box2 label {
    font-size: 18px;
    line-height: 22.5px;
    color: #3e3e3e;
  }
}

.contact__form-box2 label:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #3E3E3E;
  position: relative;
  top: -22px;
  left: -35px;
}

.contact__form-box2 label:before {
  opacity: 0;
  content: "";
  display: inline-block;
  width: 7px;
  height: 15px;
  border-right: 4px solid #4973FF;
  border-bottom: 4px solid #4973FF;
  transform: rotate(45deg);
  position: relative;
  top: -1px;
  left: -28px;
}

.contact__form-box2 input[type=checkbox]:checked + label:before {
  opacity: 1;
}

.contact__form-box2 input[type=checkbox]:hover + label:after {
  border: 1px solid #4973FF;
  cursor: pointer;
}

.contact-btn {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .contact-btn {
    text-align: center;
  }
}

.contact-btn a:hover {
  background-color: #ff9e1f;
}

@media screen and (max-width: 767px) {
  .contact-btn a {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.45px;
    font-weight: bold;
    color: white;
    background-color: #ffaa3b;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    padding: 13.5px 24px;
  }
}

@media screen and (min-width: 768px) {
  .contact-btn a {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.45px;
    font-weight: bold;
    color: white;
    background-color: #ffaa3b;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    padding: 14px 50px;
  }
}

HTMLの要素の解説

form

form要素は、お問い合わせフォームなどの入力・送信フォームを作るときに使います。

<form></form>の間に、入力項目の内容タグ（input、select、textareaなど）を入れます。


<form action="#" method="post">
・・・
</form>

action　➡️　送信先のURLを指定

method　➡️　転送方法を指定

dl、dt、dd

dlで囲まれたdt、ddは、1つの対であることを表します。

dt　➡️　定義する用語

dd　➡️　定義した用語の説明

を記載する。

例


<dl>
<dt>ロンドンオリンピック</dt>
<dd>2012年にイギリスのロンドンで開催</dd>
</dl>

<dl>
<dt>リオデジャネイロ</dt>
<dd>2016年にブラジルのリオデジャネイロで開催</dd>
</dl>

input

input要素の属性

type　➡️　属性の値に応じてブラウザの表示が変わる

placeholder　➡️　フォーム内に表示される文字を指定

この他にも、様々な属性があるため、『MDN web docs』で確認しましょう！

label

フォームの項目名と部品を関連付けるための要素です。

⭐️point

inputのidとlabelのforの名前を合わせる！


<div class="contact__radio">
  <input type="radio" name="sex" id="men">
  <label for="men">男性</label>
</div>
<div class="contact__radio">
  <input type="radio" name="sex" id="women">
  <label for="women">女性</label>
</div>

select、option

select　➡️　セレクトボックスを作成するための要素

option　➡️　セレクトボックスの選択肢を指定するための要素


<select name="animal" aria-placeholder="選択してください">
   <option value="dog">イヌ</option>
   <option value="cat">ネコ</option>
   <option value="rabbit">ウサギ</option>
</select>

See the Pen wvWgymy by ryu (@ryu-no-sss) on CodePen.

まとめ

今回は、お問い合わせフォームの作り方をご紹介しました。

レイアウトについては、ご自身でぽちぽちと自分好みに変更しましょう！

それでは、最後まで読んでいただきありがとうございました。

タグ
関連記事
Doctype宣言の書き方（ショートカットキー）とhead内に記載しないといけない要素
imgとbackground-imageの違いと使い方
[HTML&CSS]navタグとリスト要素の使い方[ul,ol,li]
[h1〜h6、p、a、span、br]テキスト要素を表示するためのHTMLコード集
[独学での勉強方法]HTML&CSSをマスターする完全ロードマップ
sectionとarticleの違いについて[使い方も解説]
[HTML&CSS]擬似要素と擬似クラスの種類と使い方[後編]
[HTML&CSS]inputの枠線の色を変える・消す方法
この記事をシェアする