Forms
Fun Form
This is our default form style. Note that it expects to be used in a constrained width container.
<div class="page">
<div class="wrapper">
<div class="content content-narrow">
<div class="fun-form">
<form>
<div class="field">
<label for="username-fun">Username</label>
<div class="field-input">
<input
id="username-fun"
class="input-text"
type="text"
value="Your Name"
/>
<div class="error">
<span class="error-text">Here’s what an error looks like!</span>
</div>
</div>
<div class="field-help">
30 characters or fewer. Letters, digits, underscores or dashes
only.
</div>
</div>
<div class="field">
<label for="about-fun">About You</label>
<div class="field-input">
<textarea id="about-fun">Something something…</textarea>
</div>
<div class="field-help">255 characters max.</div>
</div>
<div class="field field-prefix">
<label>URL</label>
<span class="name-prefix">https://mltshp.com/</span>
<div class="field-input">
<input
class="input-text"
type="text"
name="name"
placeholder="example"
/>
<div class="error">
<span class="error-text"> That URL is not valid. </span>
</div>
</div>
</div>
<div class="field">
<label for="favorite-fun">Flavor</label>
<div class="field-input">
<select id="favorite-fun">
<option>--</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
<option value="vanilla">Vanilla</option>
</select>
</div>
</div>
<div class="field">
<div class="field-input">
<label>
<input type="checkbox" name="disable_notifications" value="1" />
Disable Notifications?
</label>
</div>
</div>
<div class="field">
<div class="field-input">
<label>
<input type="radio" name="rad" />
Radio input
</label>
</div>
</div>
<div class="field field-submit">
<input
class="btn btn-primary btn-shadow btn-large"
type="submit"
value="Create It!"
/>
</div>
</form>
</div>
</div>
</div>
</div>
Fun Form Stacked
A vertically-stacked modifier for Fun Form. Useful for width-constrained areas like the sidebar.
<div class="page">
<div class="wrapper">
<div class="content content-narrow">
<div class="fun-form fun-form-stacked">
<form>
<div class="field">
<label for="username-stacked">Username</label>
<div class="field-input">
<input id="username-stacked" class="input-text" type="text" />
<div class="error">
<span class="error-text">Here’s what an error looks like!</span>
</div>
</div>
<div class="field-help">
30 characters or fewer. Letters, digits, underscores or dashes
only.
</div>
</div>
<div class="field">
<label for="about-stacked">About You</label>
<div class="field-input">
<textarea id="about-stacked"></textarea>
</div>
<div class="field-help">255 characters max.</div>
</div>
<div class="field field-prefix">
<label>URL</label>
<span class="name-prefix">https://mltshp.com/</span>
<div class="field-input">
<input class="input-text" type="text" name="name" value="" />
<div class="error">
<span class="error-text"> That URL is not valid. </span>
</div>
</div>
</div>
<div class="field">
<label for="favorite-stacked">Flavor</label>
<div class="field-input">
<select id="favorite-stacked">
<option>--</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
<option value="vanilla">Vanilla</option>
</select>
</div>
</div>
<div class="field">
<div class="field-input">
<label>
<input type="checkbox" name="disable_notifications" value="1" />
Disable Notifications?
</label>
</div>
</div>
<div class="field">
<div class="field-input">
<label>
<input type="radio" name="rad" />
Radio input
</label>
</div>
</div>
<div class="field field-submit">
<input
class="btn btn-primary btn-shadow btn-large"
type="submit"
value="Create It!"
/>
</div>
</form>
</div>
</div>
</div>
</div>
Fun Form Errors
List of errors that usually lives above the form.
Couldn’t create the shake. You’ll need to change a couple of things.
<p class="fun-form-errors">
<strong>Couldn’t create the shake</strong>. You’ll need to change a couple of
things.
</p>
Form Fields
Unstyled native form elements for reference.
<form>
<fieldset>
<legend>Fieldset Legend</legend>
<div class="field">
<label for="ex-text">Text input</label>
<div class="field-input">
<input id="ex-text" type="text" value="default value" />
</div>
</div>
<div class="field">
<label for="ex-email">Email input</label>
<div class="field-input">
<input id="ex-email" type="email" />
</div>
</div>
<div class="field">
<label for="ex-search">Search input</label>
<div class="field-input">
<input id="ex-search" type="search" />
</div>
</div>
<div class="field">
<label for="ex-tel">Tel input</label>
<div class="field-input">
<input id="ex-tel" type="tel" />
</div>
</div>
<div class="field">
<label for="ex-url">URL input</label>
<div class="field-input">
<input id="ex-url" type="url" placeholder="http://" />
</div>
</div>
<div class="field">
<label for="ex-password">Password input</label>
<div class="field-input">
<input id="ex-password" type="password" value="password" />
</div>
</div>
<div class="field">
<label for="ex-file">File input</label>
<div class="field-input">
<input id="ex-file" type="file" />
</div>
</div>
<div class="field field-radio">
<div class="field-input">
<input id="ex-radio" type="radio" name="rad" />
</div>
<label for="ex-radio">Radio input</label>
</div>
<div class="field field-checkbox">
<div class="field-input">
<input id="ex-checkbox" type="checkbox" />
</div>
<label for="ex-checkbox">Checkbox input</label>
</div>
<div class="field">
<label for="ex-select">Select field</label>
<div class="field-input">
<select id="ex-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>
</div>
<div class="field">
<label for="ex-textarea">Textarea</label>
<div class="field-input">
<textarea id="ex-textarea" cols="30" rows="5">Textarea text</textarea>
</div>
</div>
</fieldset>
<fieldset>
<legend>Clickable inputs and buttons</legend>
<input type="reset" value="Reset (input)" />
<input type="button" value="Button (input)" />
<input type="submit" value="Submit (input)" />
<button type="button">Button (button)</button>
</fieldset>
</form>