Homeโ€บForm Patterns
Preview
html
EMAIL
PASSWORD
Code
html
<form class="payment-form">
  <div class="input-group">
    <label class="input-label">Card number</label>
    <input class="input" type="text" placeholder="1234 5678 9012 3456" maxlength="19" />
  </div>
  <div class="form-row">
    <div class="input-group">
      <label class="input-label">Expiry Date</label>
      <input class="input" type="text" placeholder="AA/YY" maxlength="5" />
    </div>
    <div class="input-group">
      <label class="input-label">CVV</label>
      <input class="input" type="text" placeholder="123" maxlength="3" />
    </div>
  </div>
  <div class="input-group">
    <label class="input-label">Name on card</label>
    <input class="input" type="text" placeholder="FULL NAME" />
  </div>
  <button class="btn btn-primary" style="width:100%">
    ๐Ÿ”’ Pay securely
  </button>
  <p class="input-hint" style="text-align:center">256-bit SSL encrypted</p>
</form>
Related Blocks
html
Contact Form
Name, email, subject, message โ€” full contact layout.
html
File Upload
Drag & drop file upload area.
html
File Upload
Drag & drop file upload area with preview state.