Conseils
Ces modèles sont en cours de développement.
Conteneur de formulaire avec colonne de navigation de progression
HTML
<div class="container overflow-hidden">
<div class="row">
<div class="col-sm-12 col-md-4 margin-top-block-xl">
<aside class="gnb-progress-steps-nav">
<h2>Comment postuler</h2>
<ul class="gnb-progress-steps-circle">
<li class="complete">
<div><a href="#">1. Lire et accepter les termes</a></div>
</li>
<li class="current">
<div>2. Coordonnées</div>
</li>
<li>
<div>3. Demande de subvention</div>
</li>
<li>
<div>4. Examiner et soumettre</div>
</li>
</ul>
</aside>
</div>
<div class="col margin-top-block-xl">
<article class="form-column margin-top-0 ">
<form class="gnb-form-container-gray">
<h2>Coordonnées</h2>
<p>Entrez vos coordonnées et sélectionnez votre langue préférée.</p>
<div class="row row-cols-1 margin-bottom-md">
<div class="col">
<label for="firstname">Prénom<span class="required">*</span><span
class="sr-only">obligatoire</span></label>
<input type="text" required name="firstname" id="firstname" />
</div>
<div class="col">
<label for="lastname">Nom de famille<span class="required">*</span><span
class="sr-only">obligatoire</span></label>
<input type="text" required name="lastname" id="lastname" />
</div>
<div class="col">
<label for="email">Adresse e-mail<span class="required">*</span><span
class="sr-only">obligatoire</span></label>
<input type="email" required name="email" id="email" />
</div>
<div class="col">
<label for="emailconfirmation">Confirmer l'adresse e-mail<span
class="required">*</span><span
class="sr-only">obligatoire</span></label>
<input type="email" required name="email" id="emailconfirmation" />
</div>
<div class="col">
<label for="phone">Numéro de téléphone</label>
<input type="text" style="max-width: 10em;" id="phone" />
</div>
</div>
<h3>Langue préférée</h3>
<fieldset class="gnb-radio-buttons-expanded">
<legend>Choisissez votre langue préférée pour la communication concernant votre
demande.<span class="required">*</span><span
class="sr-only">obligatoire</span></legend>
<div class="set">
<div class="row">
<div class="col-sm-6"><label for="english"><input id="english"
type="radio" name="languagepreference" required
value="English"><span
class="label-title">English</span></label>
</div>
<div class="col-sm-6"><label for="francais"><input id="francais"
type="radio" name="languagepreference" required
value="Français"><span
class="label-title">Français</span></label>
</div>
</div>
</div>
</fieldset>
<hr />
<button class="gnb-button">Suivant</button>
<button type="button" class="gnb-btn-secondary">Retour en arrière</button>
</form>
</article>
</div>
</div>
</div>