MODULE — M06

Enquiry card

A form, framed, with your pitch beside it.

Pitch and form

Tell me what you are building.

Rough is fine. A paragraph and a link to something you have already drawn is usually enough to know whether I am the right pair of hands.

HTML

<div class="enquiry" style="width:100%">
  <div class="enquiry-pitch">
    <span class="enquiry-title">Tell me what you are building.</span>
    <p class="enquiry-text">Rough is fine. A paragraph and a link to something you have already drawn is usually enough to know whether I am the right pair of hands.</p>
  </div>
  <form class="enquiry-form">
    <div class="field">
      <label class="field-label" for="e-name">NAME <span class="field-required">*</span></label>
      <input class="input" id="e-name" type="text" placeholder="Ada Lovelace">
    </div>
    <div class="field">
      <label class="field-label" for="e-mail">EMAIL <span class="field-required">*</span></label>
      <input class="input" id="e-mail" type="email" placeholder="[email protected]">
    </div>
    <div class="field">
      <label class="field-label" for="e-brief">THE BRIEF</label>
      <textarea class="textarea" id="e-brief" placeholder="What are you building, what has been tried, and the date that actually matters."></textarea>
    </div>
    <div class="enquiry-foot">
      <span class="enquiry-note">Replies within two working days.</span>
      <button type="submit" class="btn btn-primary">SEND</button>
    </div>
  </form>
</div>

Reference

Read from modules/enquiry-card.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.enquiry.enquiry-pitch.enquiry-title.enquiry-text.enquiry-form.enquiry-foot.enquiry-note

READS--ds-enquiry-col--ds-enquiry-field-gap--ds-enquiry-gap--ds-font-body--ds-font-display--ds-gap-loose--ds-hairline--ds-ink--ds-ink-faint--ds-ink-soft--ds-measure-wide--ds-pad-card--ds-radius--ds-rule--ds-sunk--ds-text-h3--ds-text-small--ds-text-ui--ds-track-snug--ds-weight-display

Notes

REAL ELEMENTS, NO BEHAVIOUR

Everything here is presentation — no submit handler, no validation, no state — but the elements are the correct ones. Wiring it up is adding an action, not replacing the markup.

The gap between fields is deliberately larger than the gap inside one. The inner gap binds a label, its control and its hint into a single thing; if the two were equal the whole form would read as one undifferentiated column.