<form>
            <div class="contact-form">
                <ul>
                    <li>
                        <h3 class="section-title">お問い合わせ</h3>
                        <p class="form-explanation">サイトについての感想、要望、質問、意見、反論などどうぞ。</p>
                    </li>
                    <li>
                        <label for="mail">メールアドレス(必須)</label>
                    </li>
                    <li>
                        <div><input type="email" id="mail" name="user-email"></div>
                    </li>
                    <li>
                        <label for="msg">お問い合わせ内容(必須)</label>
                    </li>
                    <li>
                        <textarea id="msg" name="user-message"></textarea>
                    </li>
                    <li>
                        <button type="submit">送信</button>
                    </li>
                </ul>
            </div>
        </form>
body{
  background-color: rgb(209, 228, 218);
}

.contact-form{
  padding: 8px 40px 15px 5px;
  margin: 40px 60px 60px 60px;
  width: 500px;
  border-radius: 30px;
  box-shadow:  6px 6px 7px #545b57,
             -6px -6px 7px #ffffff;
}
.contact-form li{
  list-style: none;
  padding-bottom: 10px;
  font-size: 15px;
}
.section-title{
  font-size: 25px;
  margin-bottom: 0px;
  color:#a9252c;
}
.form-explanation{
  margin-bottom: 10px;
  font-size: 15px;
}
input{
  padding: 10px;
  border: 0px solid;
  outline: none;
  background: #d1e4da;
  border-radius: 10px;
  box-shadow: inset 5px 5px 8px #88948e,
  inset -5px -5px 8px #ffffff;
}
textarea{
  width: 450px;
  height: 150px;
  border: 0px solid;
  outline: none;
  background: #d1e4da;
  border-radius: 10px;
  box-shadow: inset 5px 5px 8px #88948e,
  inset -5px -5px 8px #ffffff;
}
button{
  background-color: rgb(209, 228, 218);
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #e0f4e9, #bccdc4);
  box-shadow:  7px 7px 9px #626b66,
               -7px -7px 9px #ffffff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.