A centered .form panel for marketing or support pages. Combines Input fields, Checkboxes, and Buttons.
When to use it
- Single-column contact, quote, or newsletter signup on a landing page.
- You need one primary submit and optional consent checkbox.
- Server-side validation maps to
field--errorandaria-invalid(see full Form demo).
Recipe
- Wrap fields in
.formwith.form__title,.form__body, and.form__actions. - Each control row uses
.form__field+.label+.fieldor.textarea-wrap. - Put consent or opt-in in
.form__bodyas a.checkboxbefore actions. - Use
type="submit"on a.btn--primaryinside.form__actions.
Live demo
Copy markup
<form class="form" action="/contact" method="post">
<h2 class="form__title">Contact us</h2>
<div class="form__body">
<div class="form__field">
<label class="label" for="contact-name"><span class="label__text">Name</span></label>
<div class="field">
<input class="field__input" id="contact-name" name="name" type="text" autocomplete="name" required="">
</div>
</div>
<div class="form__field">
<label class="label" for="contact-email"><span class="label__text">Email</span></label>
<div class="field">
<input class="field__input" id="contact-email" name="email" type="email" autocomplete="email" required="">
</div>
</div>
<div class="textarea-wrap form__field">
<label class="label" for="contact-message"><span class="label__text">Message</span></label>
<div class="textarea-field">
<textarea class="textarea" id="contact-message" name="message" rows="4" required=""></textarea>
</div>
</div>
</div>
<div class="form__actions"><button type="submit" class="btn btn--primary">Send message</button></div>
</form>