Alt-k
5/13/2019 - 8:15 AM

お問い合わせフォームサンプル

<table class="base-table contact-table">
    <tr>
        <th>会社名</th>
        <td><input name="company" type="text"></td>
    </tr>
    <tr>
        <th>担当者指名<span class="must">必須</span></th>
        <td><input name="name" type="text"></td>
    </tr>
    <tr>
        <th>メールアドレス<span class="must">必須</span></th>
        <td><input name="mailad" type="text"></td>
    </tr>
    <tr>
        <th>住所</th>
        <td><input name="address" type="text"></td>
    </tr>
    <tr>
        <th>TEL<span class="must">必須</span></th>
        <td><input name="tel" type="text"></td>
    </tr>
    <tr>
        <th>お問い合わせ内容<span class="must">必須</span></th>
        <td><textarea name="mess"></textarea></td>
    </tr>
    <p class="btn"><input type="submit" value="確認画面へ進む"></p>
</table>
/* お問い合わせフォーム */
.base-table {
  width: 100%;
  border-top: 2px solid #60656e;
}

.base-table th {
  font-weight: bold;
  padding: 3rem 3rem;
  text-align: left;
  letter-spacing: 0.06em;
  width: 300px;
}

.base-table td {
  padding: 3rem 3rem;
}

.contact-table .must {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #e61616;
  padding: 0.2rem 0.9rem;
  float: right;
}

.contact-table tr {
  border-bottom: 2px solid #60656e;
}

.contact-table td input[type="text"] {
  height: 50px;
  width: 65%;
  background: #ebebeb;
  border: 1px solid #cccfd1;
  padding: 0.5rem;
}

.contact-table td textarea {
  height: 270px;
  width: 100%;
  background: #ebebeb;
  border: 1px solid #cccfd1;
  padding: 0.5rem;
}

.contact_text {
  vertical-align: top;
}

.btn {
  text-align: center;
  margin-top: 3rem;
}

input[type="submit"] {
  font-size: 1.6rem;
  background: -moz-linear-gradient(#f7fbfc, #cbcbcb);
  background: -webkit-linear-gradient(#f7fbfc, #cbcbcb);
  background: linear-gradient(#f7fbfc, #cbcbcb);
  background-color: transparent;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.7rem 2.7rem 0.6rem 2.7rem;
  border: 1px solid #c3c3c3;
}