CodePen Embed - qBvJxbN

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/evs3rxyg5pzqkm4g7slykbhx" method="post">
      <div class="form-group">
​
        <p>※利用サンプルのためフォームの送信はできません
          <br>※利用の際はフォーム作成時に発行されるUIDをaction部分にセットしてください
        </p>
​
        <span class="required">必須</span><label for="name">名前:</label>
        <input name="お名前" type="text" placeholder="フォーム太郎">
      </div>
      <div class="form-group">
        <span class="required">必須</span><label for="email">メールアドレス:</label>
        <input name="メールアドレス" type="text" data-formrun-type="email" placeholder="form@formabc.com" data-formrun-required>
        <div data-formrun-show-if-error="メールアドレス">メールアドレスを正しく入力してください</div>
      </div>
      <div class="form-group">
        <span class="required">必須</span><label for="message">お問い合わせ内容:</label>
        <textarea name="お問い合わせ" placeholder="料金について" data-formrun-required></textarea>
      </div>
      <div class="button-container">
        <button type="submit" class="sf-btn sf-submit-btn sf-btn-block sf-btn-lg" data-formrun-invalid-input-error-text="正しく入力されていない項目があります" data-formrun-not-input-error-text="未入力の項目があります">▶︎ 送信</button>
      </div>
    </form>
  </div>
</body>
​
</html>

Live

xxxxxxxxxx
 
@import url("https://fonts.googleapis.com/css2?family=M+Plus+Rounded+1c:wght@400;700&display=swap");
​
body,
button,
input,
textarea,
label {
  font-family: "M Plus Rounded 1c", sans-serif;
}
​
body {
  background-color: white;
}
​
p {
  color: red;
  text-align: left;
}
​
.form-container {
  background-color: rgba(250, 250, 250, 255);
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
​
h2 {
  text-align: center;
  margin-bottom: 20px;
}
​
.form-group {
  margin-bottom: 20px;
}
​
.form-group label,
.form-group .required {
  display: inline-block;
  margin-right: 5px;
}
​
.form-group .required {
  background-color: red;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 80%;
}
​
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  display: block;
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}
​
[data-formrun-show-if-error] {
  color: red;
}
​
.button-container {
  text-align: center;
}
​
button {
  background-color: #3498db;
  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: darken(#f1c06b, 10%);
}
​

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.