Standard forms

Our ideal form markup

				<form>
<div class="form">
<fieldset class="fieldset">
	<div class="form-field">
		<legend class="form-legend">Legend</legend>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="text-input">Label</label>
<input id="text-input" class="form-item" type="text" placeholder="Text input"/>
	</div>
	<div class="form-field form-field--spaced form-field--error">

	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
	</div>
	<div class="form-field form-field--spaced">
		<div class="form-field__pair">
			<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
		</div>
		<div class="form-field__pair">
			<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
		</div>
	</div>
	<div class="form-field form-field--spaced">
		<div class="form-field__triplet">
			<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
		</div>
		<div class="form-field__triplet">
			<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
		</div>
		<div class="form-field__triplet">
			<label class="form-label" for="email-input">Label</label>
<input id="email-input" class="form-item" type="email" placeholder="Email input"/>
		</div>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="tel-input">Label</label>
<input id="tel-input" class="form-item" type="tel" placeholder="Telephone input"/>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="url-input">Label</label>
<input id="url-input" class="form-item" type="url" placeholder="Url input" autocapitalize="off" autocorrect="off"/>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="password-input">Label</label>
<input id="password-input" class="form-item" type="password" placeholder="Password input" autocapitalize="off" autocorrect="off"/>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="number-input">Label</label>
<input id="number-input" class="form-item" type="text" placeholder="Number input (for touch)" pattern="[0-9]*"/>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="textarea">Label</label>
<textarea id="textarea" class="form-item" placeholder="Textarea"></textarea>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="checkbox-group">Label</label>
<div id="checkbox-group">
	<div class="form-field__checkboxes">
		<input type="checkbox" name="checkbox" id="checkbox" />
		<label class="form-label" for="checkbox">Checkbox</label>
		<input type="checkbox" name="checkbox" id="checkbox-2" />
		<label class="form-label" for="checkbox-2">Checkbox</label>
	</div>
</div>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" class="radio-group">Label</label>
<div id="radio-group">
	<div class="form-field__radiobuttons">
		<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
		<label class="form-label" for="radio-choice-1">Choice 1</label>
		<input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2" />
		<label class="form-label" for="radio-choice-2">Choice 2</label>
	</div>
</div>

	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="select-choice">Label</label>
<div class="form-field__select">
	<select name="select-choice" id="select-choice">
		<option value="Choice 1">Choice 1</option>
		<option value="Choice 2">Choice 2</option>
		<option value="Choice 3">Choice 3</option>
	</select>
</div>
	</div>
	<div class="form-field form-field--spaced">
		<label class="form-label" for="file">Label</label>
<input class="form-item-file" type="file" id="file" name="file" size="60" accept="image/png, image/jpeg">
	</div>
	<div class="form-field form-field--spaced">
		<button class="button" role="button">Button</button>
	</div>
</fieldset>
</div>
</form>
			

Newsletter Sign Up - Octopus Forms Plugin

Octopus is something like Mailchimp - a newsletter service.

This form can be found on the website here: https://beta.dorothyhouse.org.uk/subscribe/

I've replicated it here, and activated both success and error messages with the class `emailoctopus-fadein`

It has it's own base styles which you can find at: `/assets/css/octopus-forms-plugin.css`

Whilst there are themes in the WP Admin, they don't actually do much to the appearance.

Contact Forms - Contact Forms 7 Plugin

This plugin form can have the markup completely altered to suit us.

It has it's own base styles which you can find at: `/assets/css/cf7-forms-plugin.css`, however, it also has the ability to switch these off.