diff --git a/tipi_payment_plugin/templates/tipi_payment_plugin/tipi.html b/tipi_payment_plugin/templates/tipi_payment_plugin/tipi.html
index 458ee55..487bf32 100644
--- a/tipi_payment_plugin/templates/tipi_payment_plugin/tipi.html
+++ b/tipi_payment_plugin/templates/tipi_payment_plugin/tipi.html
@@ -6,6 +6,24 @@
 var popup;
 var timer;
 
+function reinit() {
+    document.getElementById('refdet_error').style.display='none';
+    document.getElementById('montant_error').style.display='none';
+    document.getElementById('mel_error').style.display='none';
+}
+
+function checkLen(element,y)
+{
+    if (y.length==element.maxLength)
+    {
+        var next=element.tabIndex;
+        if (next<document.forms["tipi"].length)
+        {
+            document.forms["tipi"].elements[next].focus();
+        }
+    }
+}
+
 function checkpopup() {
     if(popup.closed) {
         document.getElementById('wip').style.display='none';
@@ -14,16 +32,19 @@ function checkpopup() {
     }
 }
 
-function tipi() {
+function call_tipi() {
     var params = {'refdet': function(id) {
         var idpiece = document.getElementById('idpiece').value.trim();
         var idligne = document.getElementById('idligne').value.trim();
+        var idpiece_padding = '';
         var exer = params.exer('exer');
         if (!idpiece || isNaN(idpiece)) {
             document.getElementById('refdet_error').style.display='inline';
             return false;
         }
-        idpiece = '0000' + idpiece;
+        for (var i=0;i<8-idpiece.length;i++)
+            idpiece_padding += '0';
+        idpiece = idpiece_padding + idpiece;
 
         if (!idligne || isNaN(idligne)) {
             document.getElementById('refdet_error').style.display='inline';
@@ -68,6 +89,7 @@ function tipi() {
     }};
     var tipi_url = '{{ instance.url }}?saisie={{ instance.saisie }}&numcli=' + document.getElementById('numcli').value;
     var url_params = '&';
+    reinit();
 
     for (var field in params) {
         var valid = params[field](field);
@@ -91,30 +113,34 @@ function tipi() {
 {% endaddtoblock %}
 {% addtoblock "css" %}
 <style>
-#tipi {
+#tipi_block {
     position: relative;
 }
-#tipi li {
+#tipi_block ul {
+    padding-left: 1em;
+}
+#tipi_block li {
     list-style-type: none;
-    margin-bottom: .25em;
+    margin-bottom: .3em;
+    padding: .2em 0;
 }
-#tipi li label {
+#tipi_block li label {
     float: left;
-    width: 12em;
-    font-weight: bold;
+    width: 11.5em;
 }
-#tipi li label:after {
-    content: ':'
+#tipi_block li label:after {
+    content: ':';
+    margin-left: .5em;
 }
-#tipi li input[type=text] {
+#tipi_block  li input[type=text], #tipi_block li input[type=email] {
     border: 1px solid #bbb;
 }
-#tipi .error {
+#tipi_block .error {
     color: #f00;
     font-size:.8em;
     display: none;
 }
-#tipi #wip {
+#tipi_block #wip {
     position: absolute;
     background: #fff;
     opacity: .8;
@@ -127,31 +153,31 @@ function tipi() {
 }
 </style>
 {% endaddtoblock %}
-<div id="tipi">
+<div id="tipi_block">
   <div id="wip">
     <h3>{% trans "Paiement en cours..." %}</h3>
   </div>
-  <form action='javascript:tipi()' name='tipi'>
+  <form name='tipi'>
     <ul>
       <li>
         <label>{% trans "Identifiant collectivité" %}</label>
         <select id="numcli">
-          <option value="005955">CAM</option>
-          <option value="005956">CAM assainissement</option>
-          <option value="005957">CAM pompes funèbres</option>
+          <option value="005955">005955</option>
+          <option value="005956">005956</option>
+          <option value="005957">005957</option>
         </select>
       </li>
       <li>
         <label>{% trans "Réference titre" %}</label>
-        <input type='text' id='exer' maxlength=4 size=4 />
-        <input type='text' id='idpiece' maxlength=4 size=4 />
-        <input type='text' id='idligne' maxlength=5 size=5 />
+        <input type='text' id='exer' maxlength=4 size=4 tabindex="2" onkeyup="checkLen(this, this.value)" /> -
+        <input type='text' id='idpiece' maxlength=8 size=7 tabindex="3" onkeyup="checkLen(this, this.value)" /> -
+        <input type='text' id='idligne' maxlength=5 size=4 tabindex="4" onkeyup="checkLen(this, this.value)" />
         <span class="error" id="refdet_error">{% trans "numéro invalide" %}</span>
       </li>
       <li>
         <label>{% trans "Montant" %}</label>
-        <input type='text' id='montant_euros' size="4" maxlength="4" placeholder="0000" /> ,
-        <input type='text' id='montant_cents' size="2" maxlength="2" placeholder="00" />
+        <input type='text' id='montant_euros' size="4" maxlength="4" placeholder="0000" tabindex="5" onkeyup="checkLen(this, this.value)" /> ,
+        <input type='text' id='montant_cents' size="2" maxlength="2" placeholder="00" tabindex="6" onkeyup="checkLen(this, this.value)" /> €
         <span class="error" id="montant_error">{% trans "montant invalide" %}</span>
       </li>
       <li>
@@ -159,7 +185,7 @@ function tipi() {
         <input type='email' id='mel' {% if request.user.email %}value="{{ request.user.email }}" {% else %}placeholder="{% trans "nom@domaine.com" %}"{% endif %} />
         <span class="error" id="mel_error">{% trans "courriel invalide" %}</span></li>
       <li>
-        <input type='submit' value='{% trans "Payer" %}' />
+        <input type='button' value='{% trans "Payer" %}' onclick='call_tipi()'/>
       </li>
     </ul>
   </form>