Forms¶

MetrePay forms are clean, trustworthy, and simple. Every form element is designed to reduce friction and build confidence in the payment process.

Text Input¶

Email address

Full name

.input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid #92A3C8;     /* --mp-color-border-input */
  border-radius: 8px;               /* --mp-radius-md */
  font-family: 'Cabin', sans-serif;
  font-size: 15px;                  /* --mp-font-size-md */
  color: #555555;                   /* --mp-color-text-input */
  background: #FFFFFF;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
  border-color: #6E96FF;            /* --mp-color-blue */
  box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15);
}

.input::placeholder {
  color: #999999;                   /* --mp-color-text-muted */
}

Label¶

.label {
  display: block;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;                  /* --mp-font-size-base */
  font-weight: 600;
  color: #333333;                   /* --mp-color-text-dark */
  margin-bottom: 6px;
}

Field Spacing¶

.field {
  margin-bottom: 20px;              /* --mp-space-5 */
}

Validation States¶

Email address

Please enter a valid email address.

Full name

✓ Looks good!

/* Error state */
.input--error {
  border-color: #c80000;            /* --mp-color-error */
}

.field-error-message {
  font-size: 13px;
  color: #c80000;
  margin-top: 4px;
}

/* Success state */
.input--success {
  border-color: #1a7f4b;            /* --mp-color-success */
}

Error Alert (Form-level)¶

⚠️ The information entered is incorrect. Please check your details and try again.

<div class="notification is-danger" style="border-radius:4px; font-family:'Cabin',sans-serif; font-size:14px;">
  ⚠️ The information entered is incorrect. Please check your details and try again.
</div>

Grouped Input (Stripe-inspired)¶

For card number / expiry / CVC fields — grouped in a single bordered container:

Card details

.input-group {
  border: 1.5px solid #92A3C8;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

.input-group__row {
  display: flex;
  border-top: 1px solid #E5ECFB;
}

.input-group__field {
  flex: 1;
  padding: 12px 14px;
  border: none;
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  color: #555555;
  background: transparent;
  outline: none;
}

.input-group__field + .input-group__field {
  border-left: 1px solid #E5ECFB;
}

.select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid #92A3C8;
  border-radius: 8px;
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  color: #555555;
  background: #FFFFFF;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2392A3C8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

Textarea¶

.textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #92A3C8;
  border-radius: 8px;
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  color: #555555;
  background: #FFFFFF;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.textarea:focus {
  outline: none;
  border-color: #6E96FF;
  box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15);
}

Complete Form Example¶

<div style="max-width:720px; margin:40px auto; background:white; border-radius:10px; padding:32px; box-shadow:0px 0px 6px 3px rgba(127,146,189,0.1); font-family:'Cabin',sans-serif;">

  <!-- Step indicator -->
  <div style="margin-bottom:24px;">
    <span style="font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#6E96FF;">STEP 1 OF 2</span>
    <h2 style="font-size:24px; font-weight:700; color:#333; margin:4px 0 0 0;">Your information</h2>
  </div>

  <!-- Fields -->
  <div style="margin-bottom:20px;">
    <label style="display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:6px;">Full name</label>
    <input type="text" placeholder="John Smith"
      style="width:100%; height:42px; padding:0 14px; border:1.5px solid #92A3C8; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; color:#555; box-sizing:border-box;">
  </div>

  <div style="margin-bottom:20px;">
    <label style="display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:6px;">Email</label>
    <input type="email" placeholder="you@example.com"
      style="width:100%; height:42px; padding:0 14px; border:1.5px solid #92A3C8; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; color:#555; box-sizing:border-box;">
  </div>

  <div style="margin-bottom:20px;">
    <label style="display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:6px;">Document number</label>
    <input type="text" placeholder="12345678"
      style="width:100%; height:42px; padding:0 14px; border:1.5px solid #92A3C8; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; color:#555; box-sizing:border-box;">
  </div>

  <!-- Submit -->
  <button style="width:100%; height:42px; background:#6E96FF; color:white; border:none; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; font-weight:600; cursor:pointer; margin-top:8px;">
    Continue →
  </button>

</div>

Rules¶

Form rules

Always use height: 42px for text inputs — never shorter
Always use border: 1.5px solid #92A3C8 as the default input border
Always use border-radius: 8px on inputs
Always use font-weight: 600 on labels
Always add margin-bottom: 20px between fields
Focus state must use blue ring: box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15)
Error messages go below the field, in #c80000, font-size: 13px
Form-level errors go above the submit button in an alert block
Never use placeholder text as a substitute for labels
Always include a visible label above every input