CodePen Embed - poYxaQo

Live

​x
 
<head>
  <meta charset="UTF-8">
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
​
<body>
​
  <form class="formrun" action="https://form.run/api/v1/r/6gd89k2vw78uhiz3lq63ye1t" method="post">
    <h2>会員登録フォーム</h2>
​
    <p>※利用サンプルのためフォームの送信はできません
      <br>※利用の際はフォーム作成時に発行されるUIDをaction部分にセットしてください
    </p>
​
    <div class="form-group">
      <label for="name">名前:</label>
      <input name="お名前" type="text" placeholder="フォーム太郎">
      <div>
​
        <label>メールアドレス:</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>
        <label>電話番号:</label>
        <input type="text" name="電話番号" data-formrun-type="tel" placeholder="012-3456-7890" required>
        <span class="text-danger" data-formrun-show-if-error="電話番号">電話番号を正しく入力してください</span>
      </div>
​
      <div>
        <label>郵便番号:</label>
        <input type="text" name="郵便番号" data-formrun-type="postal-code-jp" 　placeholder="123-4567">
​
        <label>住所:</label>
        <input type="text" name="住所" data-formrun-type="region locality street-address" placeholder="フォーム県フォーム市あいう町123-4">
      </div>
​
      <label for="newsletter">メルマガ受信の有無:</label>
      <select id="newsletter" name="newsletter" required>
        <option value="yes">受信する</option>
        <option value="no">受信しない</option>
      </select>
​
      <button type="submit" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中...">登録する</button>
  </form>
​
</body>
​
</html>

Live

xxxxxxxxxx
 
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: white;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
​
form {
  background-color: #f5f5dc;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  width: 400px;
}
​
h2 {
  text-align: center;
  color: #4caf50;
  margin-bottom: 20px;
  font-size: 24px;
}
​
p {
  color: red;
  text-align: left;
}
​
label {
  display: block;
  margin: 15px 0 5px;
  font-weight: bold;
  color: #555;
}
​
input,
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 {
  background-color: #4caf50;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  display: inline-block;
}
​
button:hover {
  background-color: #45a049;
}
​

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.