<form class="lead-form" style="max-width:360px" onsubmit="return false">
  <div class="field"><label for="lf-name">Name</label><input id="lf-name" type="text" required></div>
  <div class="field"><label for="lf-org">Organisation</label><input id="lf-org" type="text" required></div>
  <div class="field"><label for="lf-mail">Email</label><input id="lf-mail" type="email" required></div>
  <button class="btn btn--primary">Talk to us</button>
</form>

Ready to modernise?

Tell us where you operate and what you run today.

CTA row

<div class="cta-row" style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)">
  <div>
    <h3 style="margin-bottom:var(--space-1)">Ready to modernise?</h3>
    <p class="muted" style="margin:0">Tell us where you operate and what you run today.</p>
  </div>
  <button class="btn btn--primary">Talk to us</button>
</div>

Usage

The CTA row keeps copy left and the single primary action right, on one row; it stacks under 760px.
The primary CTA is consistently "Talk to us".
Invalid fields take the danger border via :user-invalid, no JS required.

‹ Field & Input