01contact-form-01.css

.contact{
  box-sizing: border-box;
  margin: 0 auto;
}
.contact input{
  cursor: pointer;
}
.contact__unit{
  border: 1px solid #aaa;
}
.contact__unit+.contact__unit{
  border-top: none;
}
.contact__term{
  display: flex;
  align-items: center;
  padding: 8px 12px;

  background-color: #eee;
}
.contact__term-text{
  display: inline-block;
}
.contact__term-hosoku{
  display: inline-block;
  margin-left: 8px;

  color: #e00000;
}
.contact__data__row{
  margin: 8px 12px;
}
.contact__part{
  box-sizing: border-box;

  border: none;
}
.contact__part-text,select.contact__part{
  display: block;
  width: 100%;
  height: 50px;
  padding-left: 12px;
}
textarea.contact__part{
  display: block;
  width: 100%;
  height: 100px;
  padding: 8px 12px;
  resize: none;
}
.contact__label{
  display: block;
  margin: 8px 0;

  cursor: pointer;
}
.contact__part[type="checkbox"],.contact__part[type="radio"]{
  margin-right: 4px;
}
#bt-submit{
  display: block;
  padding: 8px 12px;
  margin: 12px auto;
}
/* sample */
.contact__agreement{
  height: 100px;
  padding: 12px;
  overflow-y: auto;

  border: 1px solid #333;
}

@media screen and (min-width:769px) {
  .contact-outer{
    text-align: center;
  }
  .contact{
    display: inline-block;

    text-align: left;
  }
  .contact__unit{
    display: flex;
  }
  .contact__term{
    width: 300px;
  }
  .contact__data{
    width: 400px;
  }
}

02contact-form-01.html

<div class="contact-outer">
  <form action="#" method="post" class="contact">
    <div id="contact__message"></div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">お名前</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="text" name="contact__part-name" class="contact__part contact__part-text" placeholder="例：山田太郎" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">フリガナ</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="text" name="contact__part-kana" class="contact__part contact__part-text" placeholder="例：ヤマダタロウ" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">メールアドレス</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="email" name="contact__part-email" class="contact__part contact__part-text j-email" placeholder="例：sample@example.com" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">メールアドレス(確認用)</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="email" class="contact__part contact__part-text j-email" placeholder="再度入力してください" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">電話番号(ハイフン無し)</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="tel" name="contact__part-tel" class="contact__part contact__part-text" pattern="[0-9]*" placeholder="例：0123456789" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">住所(都道府県)</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <select name="contact__part-address1" class="contact__part" required>
          <option value="">選択してください</option>
          <option value="北海道">北海道</option>
          <option value="青森県">青森県</option>
          <option value="岩手県">岩手県</option>
          <option value="宮城県">宮城県</option>
          <option value="秋田県">秋田県</option>
          <option value="山形県">山形県</option>
          <option value="福島県">福島県</option>
          <option value="茨城県">茨城県</option>
          <option value="栃木県">栃木県</option>
          <option value="群馬県">群馬県</option>
          <option value="埼玉県">埼玉県</option>
          <option value="千葉県">千葉県</option>
          <option value="東京都">東京都</option>
          <option value="神奈川県">神奈川県</option>
          <option value="新潟県">新潟県</option>
          <option value="富山県">富山県</option>
          <option value="石川県">石川県</option>
          <option value="福井県">福井県</option>
          <option value="山梨県">山梨県</option>
          <option value="長野県">長野県</option>
          <option value="岐阜県">岐阜県</option>
          <option value="静岡県">静岡県</option>
          <option value="愛知県">愛知県</option>
          <option value="三重県">三重県</option>
          <option value="滋賀県">滋賀県</option>
          <option value="京都府">京都府</option>
          <option value="大阪府">大阪府</option>
          <option value="兵庫県">兵庫県</option>
          <option value="奈良県">奈良県</option>
          <option value="和歌山県">和歌山県</option>
          <option value="鳥取県">鳥取県</option>
          <option value="島根県">島根県</option>
          <option value="岡山県">岡山県</option>
          <option value="広島県">広島県</option>
          <option value="山口県">山口県</option>
          <option value="徳島県">徳島県</option>
          <option value="香川県">香川県</option>
          <option value="愛媛県">愛媛県</option>
          <option value="高知県">高知県</option>
          <option value="福岡県">福岡県</option>
          <option value="佐賀県">佐賀県</option>
          <option value="長崎県">長崎県</option>
          <option value="熊本県">熊本県</option>
          <option value="大分県">大分県</option>
          <option value="宮崎県">宮崎県</option>
          <option value="鹿児島県">鹿児島県</option>
          <option value="沖縄県">沖縄県</option>
        </select>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">住所(市区町村)</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <input type="text" name="contact__part-address2" class="contact__part contact__part-text" placeholder="例：◯◯市" required>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">住所(番地・建物名)</div>
      </div>
      <div class="contact__data">
        <input type="text" name="contact__part-address3" class="contact__part contact__part-text" placeholder="例：1-2-3 ◯◯マンション102">
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">資料請求</div>
      </div>
      <div class="contact__data">
        <div class="contact__data__row">
          <label class="contact__label">
            <input type="checkbox" name="contact__part-shiryoseikyu" class="contact__part">資料を請求する
          </label>
        </div>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">利用規約への同意</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <div class="contact__data__row">
          <div class="contact__agreement">
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
            規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル<br>
          </div>
        </div>
        <div class="contact__data__row">
          <label class="contact__label">
            <input type="checkbox" name="contact__part-shiryoseikyu" class="contact__part" required>利用規約へ同意する
          </label>
        </div>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">このサイトを何で知りましたか</div>
      </div>
      <div class="contact__data">
        <div class="contact__data__row">
          <label class="contact__label">
            <input type="radio" name="contact__part-route" class="contact__part">web検索から
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-route" class="contact__part">web広告を見て
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-route" class="contact__part">家族・友人から
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-route" class="contact__part">SNS
          </label>
        </div>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">使用端末</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <div class="contact__data__row">
          <label class="contact__label">
            <input type="radio" name="contact__part-device" class="contact__part" required>スマートフォン(iPhone)
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-device" class="contact__part">スマートフォン(Android)
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-device" class="contact__part">タブレット
          </label>
          <label class="contact__label">
            <input type="radio" name="contact__part-device" class="contact__part">PC
          </label>
        </div>
      </div>
    </div>
    <div class="contact__unit">
      <div class="contact__term">
        <div class="contact__term-text">お問い合わせ内容</div>
        <div class="contact__term-hosoku">*必須</div>
      </div>
      <div class="contact__data">
        <textarea name="contact__part-content" class="contact__part" placeholder="お問い合わせ内容を入力してください" required></textarea>
      </div>
    </div>
    <input type="submit" id="bt-submit" value="送信する">
  </form>
</div>

03contact-form-01.js

contactForm();
function contactForm(){
  const els_j_email = document.getElementsByClassName('j-email');

  [...els_j_email].forEach(el=>{
    el.addEventListener('input',()=>{
      if(els_j_email.length==2){
        if(els_j_email[0].value!=''&&els_j_email[0].value!=els_j_email[1].value){
          els_j_email[1].setCustomValidity('メールアドレスが一致しません。');
        }else{
          els_j_email[1].setCustomValidity('');
        }
      }
    });
  })
}