<div class="form-background">
<form class="form-horizontal form--grey">
<fieldset>
<ul class="models-choice models-choice--separated">
<li class="models-choice__item">
<input type="radio" id="modele-transformable" name="choixdumodele" class="custom-radio__input models-choice__input">
<label for="modele-transformable" class="control-label custom-radio__label models-choice__label models-choice__label--transformable">
<span class="models-choice__text">transformables</span>
</label>
</li>
<li class="models-choice__item">
<input type="radio" id="modele-van" name="choixdumodele" class="custom-radio__input models-choice__input">
<label for="modele-van" class="control-label custom-radio__label models-choice__label models-choice__label--van">
<span class="models-choice__text">van</span>
</label>
</li>
<li class="models-choice__item">
<input type="radio" id="modele-profile" name="choixdumodele" class="custom-radio__input models-choice__input">
<label for="modele-profile" class="control-label custom-radio__label models-choice__label models-choice__label--profile">
<span class="models-choice__text">profilé</span>
</label>
</li>
<li class="models-choice__item">
<input type="radio" id="modele-capucine" name="choixdumodele" class="custom-radio__input models-choice__input">
<label for="modele-capucine" class="control-label custom-radio__label models-choice__label models-choice__label--capucine">
<span class="models-choice__text">capucine</span>
</label>
</li>
<li class="models-choice__item">
<input type="radio" id="modele-integral" name="choixdumodele" class="custom-radio__input models-choice__input">
<label for="modele-integral" class="control-label custom-radio__label models-choice__label models-choice__label--integral">
<span class="models-choice__text">intégral</span>
</label>
</li>
</ul>
<!-- Input "text" -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-element-container form-element-container--error">
<label for="input-1" class="control-label form-element__label">Text :</label>
<input type="text" id="input-1" class="form-control form-input" data-writable="true">
</div>
<p class="form-error">Message d'erreur</p>
</div>
</div>
<!-- Input "email" -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-element-container form-element-container--error">
<label for="input-2" class="control-label form-element__label">Email :</label>
<input type="email" id="input-2" class="form-control form-input" data-writable="true">
</div>
<p class="form-error">Erreur de syntaxe dans votre e-mail</p>
</div>
</div>
<!-- Input "tel" -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-element-container form-element-container--error">
<label for="input-3" class="control-label form-element__label">Tel :</label>
<input type="tel" id="input-3" class="form-control form-input" data-writable="true" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$">
</div>
<p class="form-error">Message d'erreur</p>
</div>
</div>
<!-- Select -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-element-container">
<label for="select-1" class="control-label form-element__label">Couchages</label>
<select id="select-1" class="custom-select" style="width:100%">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
</select>
</div>
</div>
</div>
<!-- Radio -->
<div class="form-group">
<div class="col-sm-12">
<fieldset class="radio-container form-element-container form-element-container--error">
<p class="radio-container__legend">Civilité</p>
<div class="custom-radio">
<input class="custom-radio__input" type="radio" id="radio-1" name="custom-radio" value="option1">
<label class="control-label custom-radio__label" for="radio-1">Madame</label>
</div>
<div class="custom-radio">
<input class="custom-radio__input custom-radio__input--green" type="radio" id="radio-2" name="custom-radio" value="option2">
<label class="control-label custom-radio__label" for="radio-2">Monsieur</label>
</div>
</fieldset>
<p class="form-error">Message d'erreur</p>
</div>
</div>
<!-- Range -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-range" data-togglefield="yes">
<div class="form-element-container form-element-container--range" data-togglestate="input">
<label for="range-1" class="control-label form-element__label">Prix :</label>
<input type="text" class="form-control form-input form-input--fake" value="" disabled>
<input type="hidden" id="range-1" name="range-1" data-rangevalue="max" value="">
</div>
<div class="form-range-container" data-togglestate="formelem">
<p class="control-label">Prix :</p>
<span class="form-range-container__icon" data-icon="hide-container"></span>
<div class="form-range__slider" data-slidermin="0" data-slidermax="100000">
<div class="ui-slider-handle"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<div class="col-sm-12">
<div class="form-element-container form-element-container--error">
<label for="textarea-1" class="control-label form-element__label form-element__label--textarea">Textarea :</label>
<textarea id="textarea-1" class="form-control form-textarea" data-writable="true"></textarea>
</div>
<p class="form-error">Message d'erreur</p>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-12">
<hr class="form-line">
<p class="form-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a arcu eget orci dignissim gravida.
Nam diam mi, faucibus ac tellus et, <a href="" class="form-text__link">dapibus aliquet</a> mauris. Morbi ante nulla, venenatis quis sem ac,
aliquet facilisis nibh.
</p>
<div class="btn-container text-center">
<input type="submit" class="btn btn-primary" value="Valider">
</div>
</div>
</div>
</form>
</div>