Form - EO Framework

Utilisez la classe wpeo-form sur l’élément englobant le formulaire.

Le HTML des champs ci-dessous doit se placer à l’intérieur de la balise contenant la classe wpeo-form.

Les différents champs

Champs Texte

<div class="form-element">
	<span class="form-label">Champs texte</span>
	<label class="form-field-container">
		<input type="text" class="form-field" />
	</label>
</div>

Label

Champs Textarea

<div class="form-element">
	<span class="form-label">Champs textarea</span>
	<label class="form-field-container">
		<textarea class="form-field" rows="5"></textarea>
	</label>
</div>

Label

Champs Select

<div class="form-element">
	<span class="form-label">Champs Select</span>
	<label class="form-field-container">
		<select id="monselect" class="form-field">
			<option value="valeur1">Valeur 1</option>
			<option value="valeur2" selected>Valeur 2</option>
			<option value="valeur3">Valeur 3</option>
		</select>
	</label>
</div>

Label

Champs Radio

<div class="form-element form-align-horizontal">
	<span class="form-label">Champs Radio</span>
	<label class="form-field-container">
		<div class="form-field-inline">
			<input type="radio" id="radio1" class="form-field" name="type" checked value="radio1">
			<label for="radio1">Label 1</label>
		</div>
		<div class="form-field-inline">
			<input type="radio" id="radio2" class="form-field" name="type" value="radio2">
			<label for="radio2">Label 2</label>
		</div>
	</label>
</div>

Label

Label 1

Label 2

Champs Checkbox

<div class="form-element form-align-horizontal">
	<span class="form-label">Champs Checkbox</span>
	<label class="form-field-container">
		<div class="form-field-inline">
			<input type="checkbox" id="checkbox10" class="form-field" name="type" checked value="checkbox10">
			<label for="checkbox10">checkbox 1</label>
		</div>
		<div class="form-field-inline">
			<input type="checkbox" id="checkbox20" class="form-field" name="type" value="checkbox20">
			<label for="checkbox20">Checkbox 2</label>
		</div>
	</label>
</div>

Label

checkbox 1

Checkbox 2

Champs date

<div class="form-element group-date">
	<span class="form-label">Champs Date</span>
	<label class="form-field-container">
		<span class="form-field-icon-prev"><i class="fal fa-calendar-alt"></i></span>
		<input type="text" class="mysql-date" name="start_date" />
		<input type="text" class="form-field date" />
	</label>
</div>

Champs Date

Champs Dropdown

Ce champs utilise le module Dropdown

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<div class="wpeo-dropdown">
			<span class="dropdown-toggle form-field"><span>Label du champs dropdown</span> <i class="fas fa-caret-down"></i></span>
			<ul class="dropdown-content">
				<li class="dropdown-item">Item 1</li>
				<li class="dropdown-item">Item 2</li>
				<li class="dropdown-item">Item 3</li>
			</ul>
		</div>
	</label>
</div>

Label

Champs Autocomplete

Ce champs utilise le module Autocomplete

<div class="form-element">
	<span class="form-label">Champs Autocomplete</span>
	<div class="form-field-container">
		<div class="wpeo-autocomplete">
			<label class="autocomplete-label" for="mon-autocomplete">
				<i class="autocomplete-icon-before far fa-search"></i>
				<input id="mon-autocomplete" placeholder="Recherche..." class="autocomplete-search-input" type="text" />
				<span class="autocomplete-icon-after"><i class="far fa-times"></i></span>
			</label>
			<ul class="autocomplete-search-list">
				<li class="autocomplete-result">
					<div class="autocomplete-result-container">
						<span class="autocomplete-result-title">Résultat 1</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>

Label

Résultat 1

Icones

Icone simple

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<span class="form-field-icon-prev"><i class="fas fa-user"></i></span>
		<input type="text" class="form-field" placeholder="Texte" />
	</label>
</div>

Label

Icone/texte avant et après le champs

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<span class="form-field-label-prev"><i class="fal fa-euro-sign"></i></span>
		<input type="text" class="form-field" placeholder="Texte" />
	</label>
</div>

Label

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<input type="text" class="form-field" placeholder="Texte" />
		<span class="form-field-label-next"><i class="fal fa-euro-sign"></i></span>
	</label>
</div>

Label

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<span class="form-field-label-prev">Texte</span>
		<input type="text" class="form-field" placeholder="Texte" />
		<span class="form-field-label-next"><i class="fal fa-euro-sign"></i></span>
	</label>
</div>

Label Texte

Champs requis

<div class="form-element form-element-required">...</div>

Label

Champs désactivé

<div class="form-element form-element-disable">...</div>

Label

Erreur sur un champs

<div class="form-element form-element-error">...</div>

Label

Label secondaire

<div class="form-element">
	<span class="form-label">Label</span>
	<label class="form-field-container">
		<input type="text" class="form-field" placeholder="Texte" />
	</label>
	<span class="form-sublabel">Phrase supplémentaire</span>
</div>

Label Phrase supplémentaire

Couleurs

Les classes s’utilisent au même niveau que la classe wpeo-form

form-light : change la couleur des champs en blanc

Exemple d’un formulaire complet

Le formulaire est utilisé avec le module Grid pour la mise en page

<form class="wpeo-grid grid-2 grid-padding-1 wpeo-form">
	<div>
		<div class="form-element">
			<span class="form-label">Votre nom</span>
			<label class="form-field-container">
				<input type="text" class="form-field" />
			</label>
		</div>
	</div>
	<div>
		<div class="form-element">
			<span class="form-label">Votre Prénom</span>
			<label class="form-field-container">
				<input type="text" class="form-field" />
			</label>
		</div>
	</div>
	<div class="grid-2">
		<div class="form-element form-element-required">
			<span class="form-label">Votre Email</span>
			<label class="form-field-container">
				<input type="text" class="form-field" />
			</label>
		</div>
	</div>
	<div>
		<div class="form-element form-align-horizontal">
			<span class="form-label">Hobbies</span>
			<label class="form-field-container">
				<div class="form-field-inline">
					<input type="checkbox" id="checkbox1" class="form-field" name="type" checked value="checkbox1">
					<label for="checkbox1">Jeux vidéos</label>
				</div>
				<div class="form-field-inline">
					<input type="checkbox" id="checkbox2" class="form-field" name="type" value="checkbox2">
					<label for="checkbox2">Séries</label>
				</div>
			</label>
		</div>
	</div>
	<div>
		<div class="form-element form-align-horizontal">
			<span class="form-label">Origine</span>
			<label class="form-field-container">
				<div class="form-field-inline">
					<input type="radio" id="radio1" class="form-field" name="type" checked value="radio1">
					<label for="radio1">Homme</label>
				</div>
				<div class="form-field-inline">
					<input type="radio" id="radio2" class="form-field" name="type" value="radio2">
					<label for="radio2">Femme</label>
				</div>
				<div class="form-field-inline">
					<input type="radio" id="radio3" class="form-field" name="type" value="radio3">
					<label for="radio3">Les deux</label>
				</div>
			</label>
		</div>
	</div>
	<div class="grid-2">
		<div class="form-element">
			<span class="form-label">Un message</span>
			<label class="form-field-container">
				<textarea class="form-field" rows="6"></textarea>
			</label>
			<span class="form-sublabel">Ne donnez pas trop d informations personnelles</span>
		</div>
	</div>
	<div>
		<div class="wpeo-button button-main">
			<span>Envoyer le formulaire</span>
		</div>
	</div>
</form>