Forms

Igloo styles native form elements, the Contact Form block and Umbraco Forms (via the igloo form theme). Forms are laid out with the Tailwind grid.

v13 → v17 change

Validation icons now use Phosphor (ph ph-check-circle) instead of Font Awesome (fa fa-check-circle), and the custom cb-wrap / rb-wrap checkbox markup is gone — checkboxes and radios are native inputs styled directly. Labels, help-block and field-validation-error are unchanged.

Field

A field is a <label> and an input. Wrap the input in relative so the validation tick can be positioned, and use error-color for the required marker and validation message.

<div class="col-span-12 md:col-span-6">
  <label for="name">Name <span class="error-color">*</span></label>
  <div class="relative">
    <input type="text" id="name" autocomplete="name" />
    <i class="ph ph-check-circle" aria-hidden="true"></i>
    <span class="error-color"></span>
  </div>
</div>

Use help-block for help text under a field:

<div class="help-block">We'll only use this to reply.</div>

Layout

Forms use a 12-column grid; fields span columns responsively:

<form class="grid grid-cols-12 gap-8">
  <div class="col-span-12 md:col-span-6"><!-- Name --></div>
  <div class="col-span-12 md:col-span-6"><!-- Email --></div>
  <div class="col-span-12"><!-- Message --></div>
  <div class="col-span-12">
    <button class="button variant-btn-…" type="submit">Send message</button>
  </div>
</form>

Checkboxes & radios

These are native inputs (no wrapper element needed); Umbraco Forms groups them in .checkboxlist / .radiobuttonlist, which Igloo styles.

<label><input type="checkbox" /> Subscribe to the newsletter</label>

<label><input type="radio" name="option" /> Option one</label>
<label><input type="radio" name="option" /> Option two</label>

Validation error

<label for="email">Email <span class="error-color">*</span></label>
<input type="email" id="email" required />
<span class="error-color">Please enter a valid email address.</span>

Umbraco Forms output uses field-validation-error for the same purpose, which is styled to match.

Success

After a successful submit, Igloo shows an animated tick followed by your confirmation message:

<div class="text-center">
  <svg aria-hidden="true" class="checkmark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"></circle>
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path>
  </svg>
  <p>Thanks — we'll be in touch.</p>
</div>