Wifeo Creative Code

<<< back to homepage for others creatives tricks

USER-FRIENDLY INFIELD TOP ALIGNED FORM

As developed by uxmovement.com, form scanning is important for your conversion optimization. Speed is key for you don’t want people to get tired and lost in your form, which leads to abandonment loss of sign-ups. Infield top aligned forms can be part of the solution !

Nom

Prénom

Adresse

Adresse complémentaire

Ville

Code postal

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="bewoVo" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/bewoVo'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/63-beautiful-ux-form.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.container_all{
  height:570px}

.ws_conteneur_champs_invisible{
    padding:10px;
    border-bottom:1px solid #e7e7e7;
	background-color:#ffffff;
}

.ws_conteneur_champs_invisible > div{
    color:#999;
    font-size:12px;
    margin-bottom:3px;
    display:none;
  text-align:left;
  font-size:16px;
}

.ws_conteneur_champs_invisible > div.active{
    color:#4C9ED9;
}


.ws_conteneur_champs_invisible > input{
    color:#666;
    border:0px solid #fff;
    width:100%;
  height:35px;
}

JAVASCRIPT CODE :

$( document ).ready(function() {
  $(".ws_conteneur_champs_invisible input").on("keyup click", function(){
var valeur = $(this).val();
	var parent = $(this).parent();
console.log('rtu');
	$(".ws_conteneur_champs_invisible div").removeClass('active');

	if(valeur!='')
	{
		parent.find('div').show(300).addClass('active');
	}
	else
	{
		parent.find('div').hide(300);
	}
});
  });

HTML CODE :

<div class="container_all">
<div class="ws_conteneur_general_champs_information">
<div class="ws_conteneur_champs_invisible">
<div>Nom</div>
<input type="text" name="nom_pariculier" placeholder="Nom" />
</div>
<div class="ws_conteneur_champs_invisible">
<div>Prénom</div>
<input type="text" name="prenom_pariculier" placeholder="Prénom" />
</div>
<div class="ws_conteneur_champs_invisible">
<div>Adresse</div>
<input type="text" name="adresse" placeholder="Adresse" />
</div>
<div class="ws_conteneur_champs_invisible">
<div>Adresse complémentaire</div>
<input type="text" name="adresse2" placeholder="Adresse complémentaire" />
</div>
<div class="ws_conteneur_champs_invisible">
<div>Ville</div>
<input type="text" name="adresse2" placeholder="Ville" />
</div>
<div class="ws_conteneur_champs_invisible">
<div>Code postal</div>
<input type="text" name="adresse2" placeholder="Code postal" />
</div>
</div>
</div>