form revisité de https://about.telus.com/

dabblet.css

/* form revisité de https://about.telus.com/ */
body {background:white url(https://about.telus.com/plugins/careerconnection/resources/images/phone_body.png) no-repeat;}
form { width:258px;;text-align:center;
background:white;margin:107px 25px;padding:3px;
box-shadow:0 0 15px  ;}
form > label:nth-child(1n) {width:48.5%;margin:0;}
form  > label:nth-child(n+4) ,label, a {width:98%;display:inline-block;text-align:left;}
form > input , form >label > input  {display:block;width:97%;;margin:auto;}
form a , :visited {border:1px solid;color:#333;text-decoration:none;}
a[href="#none"] {position:absolute;left:0;top:1.25em;z-index:-1;}
fieldset {border:none;padding:0;margin:0;text-align:left;background:white;position:relative;}
fieldset div {height:0;overflow:hidden;background:linear-gradient(180deg, white,white,#ddd,#ccc,#bbb,#aaa);transition:1s;width:98%;}
:target + div {border:1px solid gray;border-top:none;background:lineard-gradient(90deg, white, gray, gray, gray);height:10em;overflow:auto;transition:1s height 0s, 0s overflow 1s;}
a[href="#none"]:before {content:'\2717';background:#F16935;}
a:target {z-index:1;}
a:before {content:'\2713';float:right;border-radius:1em;
background:#6DCC0C;color:white;width:1.35em;text-align:center;font-size:0.8em;margin:0.1em 0.15em 0}

dabblet.html

<form name="messageForm" action="" method="post" validate="true">
<input type="hidden" name="lang" value="fr"/>

	   <label for="prenom">Prénom *<input type="text" name="prenom" value="" id="prenom" required/></label> 
	   <label for="nom">Nom  * <input type="text" name="nom" value="" id="nom" required/></label>
	   <label for="mail">Adresse de courriel *</label> <input type="text" name="mail" value="" id="mail" required/>
	   <label for="phone">Numéro de téléphone *</label> <input type="text" name="phone" value="" id="phone" required/>	   

<fieldset ><legend>Emplacements de travail préférés *</legend>
<a href="#loc">Choisir les emplacements</a>
<a href="#none" id="loc"></a>
<div>
	<label for="loc1" ><input id="loc1" name="loc1" type="checkbox" value="200000200" />Barrie</label>
    <label for="loc2" ><input id="loc2" name="loc2" type="checkbox" value="50308">Calgary</label>
    <label for="loc3" ><input id="loc3" name="loc3" type="checkbox" value="50313">Edmonton</label>
    <label for="loc4" ><input id="loc4" name="loc4" type="checkbox" value="50315">Fort McMurray</label>
    <label for="loc5" ><input id="loc5" name="loc5" type="checkbox" value="50399">Hamilton</label>
    <label for="loc6" ><input id="loc6" name="loc6" type="checkbox" value="etc">Etc ...</label>
    <label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label><label for=""><input type="checkbox" id="" name="" value="">...</label>
</div>
 </fieldset>
<fieldset ><legend>Types de travail préférés *</legend>
<a href="#pref">Choisir les types d'emplois</a>
<a href="#none" id="pref" tabindex="0"></a>
<div>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="100">Administration</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox"  value="2260130090">Communications</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="150">Service client</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="300">Finances</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="160130090">Solutions en santé</label>
</div>
 </fieldset>
 					                
<p>Etc ..</p>

<input type="submit">

</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}