CodePen Embed - ExMqQNg

Live

​x
 
<head>
  <meta charset="UTF-8">
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
​
<body>
  <div class="form-container">
    <h2>予約フォーム</h2>
    <form class="formrun" action="https://form.run/api/v1/r/x82xqb3c4vwox6wizbjn0fsd" method="post">
      
      <p>※利用サンプルのためフォームの送信はできません
        <br>※利用の際はフォーム作成時に発行されるUIDをaction部分にセットしてください
      </p>
      
      <div class="form-group">
        <label for="name">名前</label>
        <input name="お名前" type="text" placeholder="フォーム太郎">
      </div> <!-- ここで名前のフォームグループを閉じる -->
​
      <!-- メールアドレスのフォームグループ -->
      <div class="form-group">
        <label for="email">メールアドレス</label>
        <input name="メールアドレス" type="text" data-formrun-type="email" placeholder="aaa@aaaaaaa.com" data-formrun-required>
        <div data-formrun-show-if-error="メールアドレス">メールアドレスを正しく入力してください</div>
      </div> <!-- メールアドレスのフォームグループを閉じる -->
​
      <!-- 予約日時のフォームグループ -->
      <div class="form-group">
        <label for="date">予約日時</label>
        <input name="予約日時" type="text" data-formrun-type="date" placeholder="1月1日 10:00" data-formrun-required>
        <div data-formrun-show-if-error="予約日時">日付を正しく入力してください</div>
      </div> <!-- 予約日時のフォームグループを閉じる -->
​
      <!-- 参加人数のフォームグループ -->
      <div class="form-group">
        <label for="member">参加人数</label>
        <input type="number" data-formrun-type="number" max="4" min="1" name="人数" placeholder="2人">
        <div data-formrun-show-if-error="人数">1~4の間の数字を入力してください</div>
      </div> <!-- 参加人数のフォームグループを閉じる -->
​
      <button type="submit" class="submit-button">予約を確定する</button>
    </form>
  </div>
</body>
</html>

Live

xxxxxxxxxx
 
body {
  font-family: Arial, sans-serif;
}
​
p {
  color: red; 
  text-align: left; 
}
​
.form-container {
  max-width: 500px;
  margin: auto;
  border: 1px solid #ccc;
  padding: 20px;
}
.form-group {
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  margin-bottom: 10px;
}
.form-group label {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 10px; 
  flex-basis: 25%; 
  text-align: center; 
}
.form-group input {
  flex-grow: 1; 
  padding: 10px;
  border: 1px solid #ccc;
}
[data-formrun-show-if-error] {
  width: 100%; 
  color: red; 
  margin-top: 5px; 
  order: 3; 
}
.submit-button {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-top: 20px;
}
​

This Pen is owned by formrun on CodePen.

See more by @wclydhxw-the-decoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.