基本のお問い合わせフォーム

HTML

<section id="contact">
        <div class="section-inner">
          <h2>お電話でのご予約・お問い合わせ</h2>
          <div class="contact-address">
            <p>
              〒101-0022 東京都千代田区神田練塀町300番地
              住友不動産秋葉原駅前ビル 5F
            </p>
            <p class="tel-no">tel: <span>03-1234-5678</span></p>
          </div>
          <div class="contact-about">
            <h3>ご予約・お問い合わせフォーム</h3>
            <p>※2営業日以内にご返信いたします。</p>
          </div>
          <form action="#" method="post">
            <div class="contact-form">
              <!-- 入力内容を記載 -->
              <dl>
                <dt><label for="name" class="required">氏名（必須）</label></dt>
                <dd>
                  <input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="一　太郎"
                  />
                </dd>
              </dl>
              <dl>
                <dt><label for="" class="required">フリガナ（必須）</label></dt>
                <dd>
                  <input
                    type="text"
                    name="name-kana"
                    id="name-kana"
                    placeholder="イチ　タロウ"
                  />
                </dd>
              </dl>
              <dl>
                <dt>
                  <label for="tel"
                    >電話番号（必須）<span class="suppl"> 半角</span></label
                  >
                </dt>
                <dd>
                  <input
                    type="tel"
                    name="tel"
                    id="tel"
                    placeholder="0312345678"
                  />
                </dd>
              </dl>

              <dl>
                <dt>
                  <label for="email" class="required"
                    >メールアドレス（必須）<span class="suppl">
                      半角英数字</span
                    ></label
                  >
                </dt>
                <dd>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="samurai-chiropractic@example.com "
                  />
                </dd>
              </dl>

              <dl>
                <dt><label for="reserve-day">ご予約希望日</label></dt>
                <dd>
                  <input
                    type="number"
                    id="reserve-day"
                    name="reserve-day"
                    placeholder="例) 2023年3月1日"
                  />
                </dd>
              </dl>

              <dl>
                <dt>
                  <label for="worries" class="required">お悩み（必須）</label>
                </dt>
                <dd>
                  <select name="worries" id="worries">
                    <option value="1">腰の痛みを治したい</option>
                    <option value="2">腰の痛みを治したい</option>
                    <option value="3">腰の痛みを治したい</option>
                    <option value="4">腰の痛みを治したい</option>
                  </select>
                </dd>
              </dl>

              <dl>
                <dt>
                  <label for="inquiry">お問い合わせ内容</label>
                </dt>
                <dd>
                  <textarea
                    name="inquiry"
                    id="inquiry"
                    cols="35"
                    rows="8"
                    placeholder="できるだけ詳しいお問い合わせ内容を記入してください"
                  ></textarea>
                </dd>
              </dl>
              <div class="btn-wrapper">
                <input
                  type="submit"
                  name="submit"
                  value="送信"
                  class="btn-submit"
                />
              </div>
            </div>
          </form>
        </div>
      </section> 

CSS

#contact {
  max-width: 752px;
  padding-top: 32px;
  margin-left: 12%;
  margin-bottom: 80px;
}

.section-inner {
  padding: 0 16px;
}

.contact-address {
  margin-top: 20px;
}

.tel-no {
  font-weight: bold;
  font-size: 16px;
  margin-top: 22px;
}

.tel-no span {
  font-size: 24px;
}

.contact-about {
  margin-top: 24px;
}

.contact-about h3 {
  font-size: 24px;
}

.contact-about p {
  margin-top: 24px;
  font-size: 18px;
}

.contact-form {
  margin-top: 24px;
}

form input,
form select,
form textarea {
  width: 100%;
  line-height: 2.65;
  padding-left: 10px;
}

form label {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 16px;
}

.suppl {
  font-size: 12px;
}

form dl:nth-of-type(n + 2) label {
  margin-top: 48px;
}

.btn-wrapper {
  width: 240px;
  margin: 48px auto;
}

.btn-submit {
  background-color: var(--green);
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
}

CSSがだいぶ適当ですが。
・form要素の中にフォームの内容だけを含めるか、タイトルや文章等を含めるかは自由。
今回はcontacformに埋め込む前提のためタイトル等は含めず。
contactformについては下記の記事で。

・dl要素で情報毎にまとまりをつくる。
・label要素のfor属性値とinput要素のid属性値は合わせておく。

主なフォーム部品

テキスト　：　<input type="text" name="text">
※type属性にはpassword,number,date,emailなどなど

テキストエリア　：　<textarea name="textarea"></textarea>

ラジオボタン　：
<input type="radio" name="radio" value="1" checked>hoge
<input type="radio" name="radio" value="2">fuga

チェックボックス　：
<input type="checkbox" name="check1" value="1" checked>hoge
<input type="checkbox" name="check2" value="2">fuga
<input type="checkbox" name="check3" value="3">hogefuga

ファイルアップロード　：<input type="file" name="file">

送信ボタン　：　<input type="submit" value="送信"

セレクトボックス　：
<select name="select">
  <option value="1">メニュー１</option>
  <option value="2" selected>メニュー２</option>
  <option value="3">メニュー３</option>
</select>

セレクトボックス(複数選択)　：
<select name="select" multiple>
  <option value="1">メニュー１</option>
  <option value="2" selected>メニュー２</option>
  <option value="3" selected>メニュー３</option>
</select>