Multi-column contact form

<style>
  form { max-width: 40rem; margin: 2rem auto; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; font-family: system-ui, sans-serif; }
  label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
  .full { grid-column: 1 / -1; }
  input, textarea { padding: .65rem .75rem; border: 1px solid #d4d4d4; border-radius: .5rem; }
  button { grid-column: 1 / -1; padding: .75rem; border: 0; border-radius: .5rem; background: #047857; color: #fff; font-weight: 600; }
</style>
<form action="https://formheron.com/f/YOUR_KEY" method="POST">
  <label>First name<input name="first_name" required /></label>
  <label>Last name<input name="last_name" required /></label>
  <label class="full">Email<input type="email" name="email" required /></label>
  <label class="full">Message<textarea name="message" rows="5" required></textarea></label>
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
</form>