Part4 - 1カラム(4) お問い合わせフォーム

form

フォーム記述例

<!-- .main-content -->
<main class="main-content">

  <section class="msgSec">
  </section><!-- /.msgSec -->

  <section class="dateSec">
  </section><!-- /.dateSec -->

  <section class="form-section">
    <div class="container">
    <h2>RSVP</h2>
    <form action="#" method="post" class="rsvp">
      <p class="attendRadio">
        <label><input type="radio" name="attend" value="ご出席" checked="checked">ご出席</label>
        <label><input type="radio" name="attend" value="ご欠席">ご欠席</label>
      </p>
      <p>
        お名前<input type="text" name="user_name">
      </p>
      <p>
        メールアドレス<input type="email" name="user_mail">
      </p>
      <p>
        ご自身のタイプ
        <select name="user_type">
          <option value="草食動物">草食動物</option>
          <option value="肉食動物">肉食動物</option>
          <option value="人間さん">人間さん</option>
        </select>
      </p>
      <p class="allergyCheck">
        アレルギーのある食べ物<br>
        <label><input type="checkbox" name="allergy" value="卵">卵</label>
        <label><input type="checkbox" name="allergy" value="乳">乳</label>
        <label><input type="checkbox" name="allergy" value="小麦">小麦</label>
        <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
      </p>
      <p>
        メッセージ
        <textarea name="message"></textarea>
      </p>
      <p class="submitBtn">
        <input type="submit" value="送信">
      </p>
    </form>
    </div><!-- /.container -->
  </section><!-- /.form-section -->

</main>
<!-- /.main-content -->

form - CSS記述

/* ------------------------------------------
  form
------------------------------------------- */
.form-section {
  padding-bottom: 60px;
  background-color: #efe8d9;
}
.rsvp {
  width: 600px;
  margin: 0 auto;
}
  .rsvp > p {
    line-height: 1.4;
    margin-bottom: 20px;
  }
input[type="text"],
input[type="email"],
select,
textarea {
  border: 1px solid #cccccc;
  background-color: #ffffff;
  width: 100%;
  margin-top: 5px;
  padding: 4px 8px;
}
  input[type="radio"],
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    vertical-align: baseline;
    margin-right: 4px;
  }
  .attendRadio {
    text-align: center;
    margin-bottom: 40px;
  }
  .attendRadio label {
    margin: 0 20px;
    font-size: 24px;
  }
  .allergyCheck label {
    margin-right: 24px;
  }
  select {
    -webkit-appearance: none;
    appearance: none;
    background: #fff url(../img/arrow.png) no-repeat 98% 50%;
    background-size: 17px 10px;
  }
  textarea {
    height: 148px;
    margin-bottom: 30px;
  }
  .submitBtn {
    text-align: center;
    }
    input[type="submit"] {
      background-color: #121212;
      color: #ffffff;
      padding: 18px 80px;
    }

フッター部

<!-- .footer -->
<footer class="footer">
  <p><small>© Capyzou ＆ Capyco</small></p>
</footer>
<!-- /.footer -->

/* ------------------------------------------
  footer
------------------------------------------- */
.footer {
  background-color: #c7887f;
  color: #f3e9e5;
  padding: 20px 10px 26px;
  text-align: center;
}