Form
Use a form to collect user input. Can have multiple inputs or only one. Should have a single primary button.
Link to section titled: Component
Component
Form
- html<!-- COMPONENT-START: nc-form -->
<form class="nc-card nc-form">
<span class="nc-slub nc-form-tag">Form Tag (Maybe name of form)</span>
<h2 class="nc-form-title">Form Title</h2>
<p class="nc-form-hint">
This is a general description what the form is about. It should help indicate, what is achieved and what is
required.
</p>
<div class="nc-stack -far -contained">
<div class="nc-input-field">
<label for="email" class="nc-stack">
<span class="nc-input-label">What's your name?</span>
</label>
<input
id="email"
class="nc-input"
aria-required="true"
autocomplete="name"
type="text"
/>
</div>
<button class="nc-button -primary" type="submit">Let's go</button>
</div>
</form>
<!-- COMPONENT-START: nc-form --> Link to section titled: Usage notes
Usage notes
- It's preferred to have a 1-column layout for the best experience. Otherwise it's hard to scan
- It's preferred to have as few questions as possible per form. Best is a single question to not overwhelm the users.
Link to section titled: Examples
Examples
Longer Form
You can also have long forms. Feel free to add fieldsets to group inputs together.
Longer Form
- html<!-- COMPONENT-START: nc-form -->
<form class="nc-card nc-form">
<span class="nc-slub nc-form-tag">Norcode Survey</span>
<h2 class="nc-form-title">1. What did you think of it?</h2>
<p class="nc-form-hint">
We would love to get your opinion on this, so we can improve further and continue to provide a great service
</p>
<div class="nc-stack -far">
<fieldset class="nc-fieldset">
<legend class="nc-legend nc-input-label">Who are you</legend>
<p class="nc-hint">Help us get to know you</p>
<div class="nc-stack">
<div class="nc-input-field">
<label for="email" class="nc-stack">
<span class="nc-input-label">Email</span>
</label>
<input
id="email"
class="nc-input"
aria-required="true"
autocomplete=""
type="email"
/>
</div>
<div class="nc-input-field">
<label for="name" class="nc-stack">
<span class="nc-input-label">What's your name?</span>
<span class="nc-hint">Give us your name, so we know would said something wrong</span>
</label>
<input
id="name"
class="nc-input"
aria-required="true"
autocomplete=""
type="text"
/>
</div>
</div>
</fieldset>
<fieldset class="nc-fieldset">
<legend class="nc-legend nc-input-label">How did we do?</legend>
<p class="nc-hint">Please be nice</p>
<div class="nc-stack">
<div class="nc-input-field">
<label for="rating" class="nc-stack">
<span class="nc-input-label">Your rating</span>
</label>
<input
id="rating"
class="nc-input"
aria-required="true"
autocomplete=""
type="number"
/>
</div>
</div>
</fieldset>
<button class="nc-button -primary" type="submit">Send survey</button>
</div>
</form>
<!-- COMPONENT-START: nc-form -->Page Form
One question per page provides the best UX. It is super scannable and does not overwhelm the user. No card required.
Page Form
- html<!-- COMPONENT-START: nc-form -->
<form class="nc-form">
<span class="nc-slub nc-form-tag">Norcode Survey</span>
<h1 class="nc-form-title">1. What did you think of it?</h1>
<p class="nc-form-hint">One page, one question. This is the easiest way to get data from your users.</p>
<div class="nc-stack -far">
<div class="nc-input-field">
<label for="email" class="nc-stack">
<span class="nc-input-label">What's your name?</span>
</label>
<input
id="email"
class="nc-input"
aria-required="true"
autocomplete="name"
type="text"
/>
</div>
<button class="nc-button -primary" type="submit">Let's go</button>
</div>
</form>
<!-- COMPONENT-START: nc-form -->