• 12mar

    Ce simple champs permet à l’internaute d’identifier l’outil qui le débarrasse de la corvée  du formulaire.

    Sinon, il remplit manuellement les champs, comme avant.

    .
    Formulaire Express
    Téléphone fixe *

    Formulae vulgaris
    Nom *
    Prénom *
    Adresse *
    Code Postal / Ville *
    Pays
    Société
    NAF / Siref
    powered by reversoform.com
    <div style="width:250px;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;"><br />
    <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><br />
    <input id="telephone" 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;" onclick="clickHandeler( this );" onkeyup="actionKeyAuto( this );" value="mon téléphone fixe" /><div style="color:#F28D45;font-size:11px;font-weight:normal;position:absolute;top:-15px;right:-10px;">Formulaire Xpress</div><div style="position:absolute;top:4px;right:-7px;z-index:11;" onmouseover="actionOver();" onmouseout="actionOut();"><a href="http://www.reversoform.com/cnil" target="_blank"><img src="http://www.reversoform.com/img/interogation.png" alt="" /></a></div>
    <div id="revPop" style="border: 1px solid #ff6600; padding: 3px 5px; background: #ffffff none repeat scroll 0% 0%; display: none; width: 200px; position: absolute; top: -40px; right: -15pt; z-index: 15;">Vos coordonées proviennent de l'annuaire téléphonique.</div>
    

    Puis en bas de page, ou après votre formulaire HTML copier le code javascript suivant :

    
    <script type="text/javascript">
    		var RevDate = new Date();
    		document.write( unescape( "%3Cscript src='" + (("https:" == document.location.protocol) ? "https://api2.reversoform.com/includes/js/reversoObj.js" : "http://api2.reversoform.com/includes/js/reversoObj.js") + "?t="+RevDate.getTime()+"' type='text/javascript'%3E%3C/script%3E" ) );
        </script>
       	<script type="text/javascript" language="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 ( $( ObjReverso.phone ) )
    			{
    				if ( response=="NULL")
    				{
    					alert('correspondance non trouvée uv.');
    				}
    				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 actionOut()
    		{
    			document.getElementById('revPop').style.display = 'none';
    		}
    
    		function actionOver()
    		{
    			document.getElementById('revPop').style.display = 'block';
    		}
    
    		function actionKeyAuto( this_ )
    		{
    			if ( this_.value=='' )
    			{
    				this_.value = 'mon téléphone fixe';
    				this_.focus();
    				this_.select();
    			}
    			else
    			{
    				if ( this_.value.length>=10 &amp;amp;amp;&amp;amp;amp; this_.value!='mon téléphone fixe' )
    				{
    					ObjReverso.reverso( this_.value);
    				}
    			}
    		}
    
    		function clickHandeler( this_ )
    		{
    			if ( this_.value=='mon téléphone fixe' )
    			{
    				this_.focus();
    				this_.select();
    			}
    		};
    
    function doReverso( obj )
    		{
    			var phone = obj.value.replace(/[^0-9]/gi,"");
    
    			if ( phone.length>=10 )
    			{
    				ObjReverso.reverso( phone );
    			}
    		}
    
    try{document.getElementById( ObjReverso.phone ).onblur = function()
    			{
    				ObjReverso.reverso( this.value );
    			};}catch(e){}
    //]]>
    </script>
    
  • 12mar

    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.

    .
    avec l’annuaire | comment ?
    Préremplir
    Téléphone fixe *

    Formulae vulgaris
    Nom *
    Prénom *
    Adresse *
    Code Postal / Ville *
    Pays
    Société
    NAF / Siref
    powered by reversoform.com
    
    <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>
    
  • 05mar

    Quand et comment déclencher l’appel javascript qui va résoudre le N° de téléphone ?

    Par défaut l’API javascript reversoform est paramétrée pour se déclencher lors du passage du curseur du champ “téléphone” à un autre champ (changement de “Focus”). D’un point de vue ergonomique, l’utilisateur ne voit pas de changement tant qu’il ne passe pas au champs suivant.

    Cette action est représentée dans le code d’API javascript généré par les lignes :

    
    try
    {
    document.getElementById(teleneo_phone).onblur = function()
    {
    reverso(this.value);
    };
    }catch(e){}
    


    1 - Modifier le paramétrage par défaut pour déclencher automatiquement à partir du 10ième caractère.

    Si vous souhaitez déclencher la résolution d’un numéro de téléphone automatiquement après la saisie du 10ième chiffre (voir exemple http://www.reversoform.com/blog/), il vous faut substituer les deux lignes précédentes par :

    
    try
    {
    document.getElementById(teleneo_phone).onkeyup = function()
    {
    if (this.value.length>=10)
    {
    ObjReverso.reverso(this.value);
    }
    };
    }catch(e){}
    
  • 05mar
    Téléphone fixe
    formulaire normal

    Pour obtenir exactement ce formulaire, copier le code suisvant dans votre page HTML :

    
    <style>
    input, select {font-size:14px;padding:2px;font-weight:bold;font-family:'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;border:1px solid #BEBEBE;color:#444444;}
    .sur3 {position:absolute;top:5px;left:236	px;z-index:11;}
    .sur3 img {border:0;cursor:pointer;}
    #bloc_bg {margin:20px 0;line-height:26px;position:relative;}
    #normal {text-decoration:underline;font-size:11px;cursor:pointer;color:#F60;}
    #phone {margin:5px 0 15px 0;}
    .bid_t {width:93px;}
    .bid_ttt {width:120px;}
    #btValid { padding-right:10px;position:absolute;right:130px;top:21px;}
    #bid_edit { cursor:pointer;}
    .main_table {font-size:13px;font-weight:normal; height:160px; line-height:17px;width:297px;}
    .und {text-decoration:underline;}
    </style>
    <script src="http://reversoform.com/includes/js/ajax/prototype.js" type="text/javascript"></script>
    <script src="http://reversoform.com/includes/js/ajax/scriptaculous.js" type="text/javascript"></script>
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td class="orange"  valign="top" style="vertical-align:top;padding:20px 6px 0 0;">Téléphone fixe </td><td align="center" valign="top"><div id="bloc_bg"><div id="phone"><input id="telephone" class="form8" type="text" /><input id="btt" onclick="validate();" type="button" value="formulaire express" /><div class="sur3" onmouseover="actionOver();" onmouseout="actionOut();"><a href="http://www.reversoform.com/cnil" target="_blank"><img src="http://www.reversoform.com/img/interogation.png" alt="" /></a></div>
    <div id="revPop" style="border: 1px solid #ff6600; padding:0 4px; background: #ffffff none repeat scroll 0% 0%; display: none; width: 360px; position: absolute; top: -25px; right:25px; z-index: 65;line-height:19px;color:#FF6600;font-size:12px;">Vos coordonées proviennent de l'annuaire téléphonique.</div>
    </div>
    <div id="bidulle_middle_first" style="display:none">
    <div>
    <table border="0" cellspacing="2" cellpadding="4" class="main_table">
    <tbody>
    <tr>
    <td class="bid_t">&amp;nbsp;</td>
    <td id="last_name_first" class="bid_ttt"></td>
    </tr>
    <tr>
    <td class="bid_t"></td>
    <td id="first_name_first" class="bid_ttt"></td>
    </tr>
    <tr>
    <td class="bid_t"></td>
    <td id="address_first" class="bid_ttt"></td>
    </tr>
    <tr>
    <td class="bid_t"></td>
    <td id="zip_first" class="bid_ttt"></td>
    </tr>
    <tr>
    <td class="bid_t"></td>
    <td id="city_first" class="bid_ttt"></td>
    </tr>
    <tr>
    <td class="bid_t"></td>
    <td class="bid_ttt" align="right"><span id="bid_edit" class="link" onclick="edit();">edit</span></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    
    <div id="bidulle_middle" style="display:none">
    <div>
    <table border="0" cellspacing="2" cellpadding="4" class="main_table">
    <tbody>
    <tr>
    <td class="bid_t" align="right">Nom <span class="orange">*</span></td>
    <td class="bid_ttt"><input id="last_name" class="form22" type="text" /></td>
    </tr>
    <tr>
    <td align="right">Prénom <span class="orange">*</span></td>
    <td class="bid_ttt"><input id="first_name" class="form22" type="text" /></td>
    </tr>
    <tr>
    <td align="right">Adresse <span class="orange">*</span></td>
    <td class="bid_ttt"><input id="address" class="form22" type="text" /></td>
    </tr>
    <tr>
    <td align="right">Code postal <span class="orange">*</span></td>
    <td class="bid_ttt"><input id="zip" class="form22" type="text" /></td>
    </tr>
    <tr>
    <td align="right">Ville <span class="orange">*</span></td>
    <td class="bid_ttt"><input id="city" class="form22" type="text" /></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    
    <div align="right" id="btValid">
    <span id="normal" onclick="showForm();">formulaire normal</span>
    </div>
    
    </div>
    </td>
    </tr>
    
    </table>
    <script type="text/javascript">
    var RevDate = new Date();
    document.write( unescape( "%3Cscript src='" + (("https:" == document.location.protocol) ? "https://api.reversoform.com/includes/js/reversoObj.js" : "http://api.reversoform.com/includes/js/reversoObj.js") + "?t="+RevDate.getTime()+"' type='text/javascript'%3E%3C/script%3E" ) );
    </script>
    <script type="text/javascript" language="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 ( $( ObjReverso.phone ) )
    {
    if ( response=="NULL")
    {
    alert('ce numéro n\'est pas attribué.');
    }
    else
    {
    try
    {
    Effect.SlideDown(((response!='NULL')?'bidulle_middle_first':'bidulle_middle'),{duration:1.0});
    
    $('bidulle_middle').style.display='none';
    
    $('first_name_first').innerHTML	= (response.company)?((response.heading)?response.heading:''):((response.last_name)?response.first_name:'');
    $('last_name_first').innerHTML	= (response.company)?response.company:((response.last_name)?response.last_name:'');
    $('address_first').innerHTML 	= (response!='NULL')?response.address:'';
    $('zip_first').innerHTML 	 	= (response!='NULL')?response.zip:'';
    $('city_first').innerHTML 		= (response!='NULL')?response.city:'';
    
    $('first_name').value 			= (response.company)?((response.heading)?response.heading:''):((response.last_name)?response.first_name:'');
    $('last_name').value  			= (response.company)?response.company:((response.last_name)?response.last_name:'');
    $('address').value 				= (response!='NULL')?response.address:'';
    $('zip').value 	 				= (response!='NULL')?response.zip:'';
    $('city').value 	 			= (response!='NULL')?response.city:'';
    
    resetBt();
    } catch( e ) {}
    }
    }
    };
    
    function actionOut()
    {
    document.getElementById('revPop').style.display = 'none';
    }
    
    function actionOver()
    {
    document.getElementById('revPop').style.display = 'block';
    }
    
    if ( $('bloc_bg') )
    {
    Event.observe('bloc_bg','keypress', function(e)
    {
    if ( $('bloc_bg') )
    {
    if ( $('bloc_bg').style.display!='none' )
    {
    // firefox, geko, safari
    if (e)
    {
    if (e.keyCode==13 )
    {
    validate();
    }
    }
    // ie...
    else if (event)
    {
    if (event.keyCode==13 )
    {
    validate();
    }
    }
    }
    }
    },false);
    };
    
    function validate()
    {
    ObjReverso.reverso( $(ObjReverso.phone).value );
    }
    
    function resetBt()
    {
    $('normal').style.display = 'none';
    $('btt').value = 'reset';
    $('btt').onclick = function()
    {
    $('normal').style.display = 'inline';
    Effect.SlideUp( (($('bidulle_middle_first').style.display!='none')?'bidulle_middle_first':'bidulle_middle'),{duration:1.0});
    $('btt').value = 'formulaire express';
    $('btt').onclick = function()
    {
    validate();
    }
    }
    };
    
    function showForm()
    {
    resetBt();
    if ( $('bidulle_middle').style.display=='none' )
    {
    Effect.SlideDown('bidulle_middle',{duration:1.0});
    }
    $('city').value 		= '';
    $('zip').value 			= '';
    $('address').value 		= '';
    $('last_name').value 	= '';
    $('first_name').value 	= '';
    };
    
    function edit()
    {
    $('normal').style.display = 'none';
    $('bidulle_middle').style.display = 'block';
    $('bidulle_middle_first').style.display = 'none';
    };
    
    Event.observe( document,'load', function(e)
    {
    var this_ = $( ObjReverso.phone );
    this_.focus();
    this_.select();
    });
    
    //]]>
    </script>