Il vous suffit de placer ce champs au dessus de votre formulaire existant. L’internaute décide ou non d’y faire appel.

Dans le premier cas, il bénéficie du remplissage express et il peut identifier l’outil qui lui procure cet avantage.

Sinon, il remplit manuellement les champs, comme avant.

<div style="width:250px;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;">
<div style="color:#ffffff;background:url(http://reversoform.com/art/baguette2.gif) no-repeat 10px 0;position:absolute;left:-2px;top:-27px;height:70px;width:90px;z-index:1;">.</div>
<input style="width:250px;background:#FFFFFF;border:1px solid #F28D45;font-size:14px;color:#777777;position:absolute;top:inherit;left:inherit;z-index:10;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;height:17px;padding:2px 5px 3px;font-weight:normal;" value="mon téléphone fixe" onkeyup="actionKey( this );" onclick="clickHandeler( this );" id="telephone"/>
<div style="color:#F28D45;font-size:11px;font-weight:normal;position:absolute;top:27px;right:-10px;text-decoration:underline;cursor:pointer;">avec l"annuaire | <a target="_blank" href="http://reversoform.com/cnil" style="text-decoration: underline; font-weight: normal; font-size: 12px;" class="orange">comment ?</a></div>
<div align="center" onclick="handleReverso();" style="background:transparent url(http://reversoform.com/img/bt/btform.png) no-repeat scroll 0 0;color:#FFFFFF;cursor:pointer;font-size:12px;font-weight:bold;height:24px;line-height:24px;position:absolute;right:-12px;top:0;width:111px;z-index:11;">Préremplir</div>
</div>

Puis en fin de page, ou quelquepart après le formulaire HTM, placer le code javascript suivant :

<script language="javascript" type="text/javascript">
// <![CDATA[
var ObjReverso = new ClassReverso();
ObjReverso.serial		= '4403981856926'; 	// remplacer "4403981856926" par votre N° de série généré sur le site http://www.reversoform.com/api
ObjReverso.phone		= 'telephone';
ObjReverso.company		= 'company';
ObjReverso.firstname	= 'first_name';
ObjReverso.lastname		= 'last_name';
ObjReverso.address		= 'address';
ObjReverso.zip			= 'zip';
ObjReverso.city			= 'city';
ObjReverso.naf			= 'naf';
ObjReverso.siret		= 'siret';

ObjReverso.fireCallback = function( response )
{
if ( response=="NULL")
{
alert('ce numéro n\'est pas attribué.');
}
else
{
/*
alert( 	'prénom: \t\t'+ 	response.first_name +'\n'+
'nom: \t\t'+  		response.last_name 	+'\n'+
'adresse: \t\t'+	response.address 	+'\n'+
'ville: \t\t'+ 		response.city 		+'\n'+
'code postal: \t'+	response.zip 		+'\n'+
'\n'+
'société: \t\t'+	response.company	+'\n'+
'code NAF: \t'+		response.naf		+'\n'+
'siret: \t\t'+		response.siret
);
*/
}
}

function handleReverso()
{
if ( document.getElementById( ObjReverso.phone ).value!='mon téléphone fixe' )
{
ObjReverso.reverso( document.getElementById( ObjReverso.phone ).value);
}
}

function actionOut()
{
document.getElementById('revPop').style.display = 'none';
}

function actionOver()
{
document.getElementById('revPop').style.display = 'block';
}

function actionKey( this_, e )
{
if ( this_.value=='' )
{
this_.value = 'mon téléphone fixe';
this_.focus();
this_.select();
}
if ( e )
			{
				if ( e.keyCode==13 )
				{
					validate();
				}
			}
			else if ( event )
			{
				if ( event.keyCode==13 )
				{
					validate();
				}
			}
}

function clickHandeler( this_ )
{
if ( this_.value=='mon téléphone fixe' )
{
this_.focus();
this_.select();
}
}
// ]]>
</script>