CodePen Embed - eYXPrzj

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/y57h943tf95z1lqt533jc0bm" method="post">
​
      <p>※利用サンプルのためフォームの送信はできません
        <br>※利用の際はフォーム作成時に発行されるUIDをaction部分にセットしてください
      </p>
​
      <div class="form-group">
        <label for="name">名前<span class="required-mark">※</span></label>
        <input name="お名前" type="text">
        <div>
          <label>メールアドレス</label>
          <input name="メールアドレス" type="text" data-formrun-type="email" data-formrun-required>
          <div data-formrun-show-if-error="メールアドレス">メールアドレスを正しく入力してください</div>
        </div>
​
        <label class="form-control-label" for="tel">電話番号</label>
        <input type="text" name="電話番号" data-formrun-type="tel">
        <span class="text-danger" data-formrun-show-if-error="電話番号">電話番号を正しく入力してください</span>
      </div>
​
      <label for="event name">参加したいイベント名<span class="required-mark">※</span></label>
      <select id="event name" name="newsletter" required>
        <option value="event"></option>
        <option value="event A">イベントA</option>
        <option value="event B">イベントB</option>
      </select>
​
      <div class="form-group">
        <label class="form-control-label" for="member">参加人数<span class="required-mark">※</span></label>
        <input type="number" data-formrun-type="number" max="10" min="1" name="人数">
        <div data-formrun-show-if-error="人数">1~10の間の数字を入力してください</div>
      </div>
​
      <div class="button-container">
        <button type="submit" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中...">送信</button>
      </div>
    </form>
  </div>
</body>

Live

xxxxxxxxxx
 
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
​
body,
button,
input,
textarea,
label {
  font-family: "Nunito", sans-serif;
}
​
body {
  background-color: #ffffff;
}
​
p {
  color: red;
  text-align: left;
}
​
.form-container {
  background-color: rgba(233, 247, 248, 0.91);
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
​
.form-group {
  margin-bottom: 20px;
}
​
.form-group label {
  display: flex;
  align-items: center;
}
​
.required-mark {
  color: red;
  margin-left: 4px;
  font-size: 80%; /* やや小さめに設定 */
}
​
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group textarea {
  display: block;
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ffffff;
}
​
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
}
[data-formrun-show-if-error] {
  color: red;
}
​
.button-container {
  margin-top: 40px; /* 上部の余白を増やす */
  margin-bottom: 20px; /* 下部にも余白を追加 */
}
​
button {
  background-color: rgba(0, 0, 128, 1);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: calc(100% - 20px);
  display: block;
  margin: 0 auto;
}
​
button:hover {
  background-color: #27408b;
}
​

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.