Demo – nastavení vzhledu (+ limit našeptávání)

Vzhled našeptávačů lze nastavit pomocí metod na objektu smartform.all.suggestBox nebo lze nastavit vzhled pouze pro určitou instanci za pomocí objektu SmartformInstance.all.suggestBox. U našeptávače lze také omezit počet našeptávaných řádků pomocí metody setLimit().

Formulář obarvený pomocí smartform.all:

Formulář má nastaven limit našeptávání na 5 položek.

Formulář obarvený přes instanci:

Formulář má nastaven limit našeptávání na 15 položek.

Zdrojový kód – JavaScript:

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
   var smartform = smartform || {};
   
   smartform.beforeInit = function () {
       smartform.setClientId('[clientId]');
   }
 
   smartform.afterInit = function() {
      //obarvíme všechny instance 
       smartform.all.suggestBox.setBackgroundColor("#e6fff3")
       smartform.all.suggestBox.setBorderColor("rgb(61, 190, 113)")
       smartform.all.suggestBox.setForegroundColor("rgb(61, 190, 113)")

       //obarvíme pouze druhou instanci - první zůstala obarvená předchozím kódem
       smartform.getInstance("smartform-instance-2").all.suggestBox.setBackgroundColor("#cceeff")
       smartform.getInstance("smartform-instance-2").all.suggestBox.setBorderColor("#66ccff")
       smartform.getInstance("smartform-instance-2").all.suggestBox.setForegroundColor("#004d28")

       //nastavíme pro políčka prvního formuláře limit počtu řádků zobrazených v našeptávači na 5
       smartform.getInstance("smartform-instance-1").addressControl.getBox("smartform-address-street-and-number").setLimit(5);
       smartform.getInstance("smartform-instance-1").addressControl.getBox("smartform-address-city").setLimit(5);
       smartform.getInstance("smartform-instance-1").addressControl.getBox("smartform-address-zip").setLimit(5);

       //nastavíme pro políčka druhého formuláře limit počtu řádků zobrazených v našeptávači na 15
       smartform.getInstance("smartform-instance-2").addressControl.getBox("smartform-address-street-and-number").setLimit(15);
       smartform.getInstance("smartform-instance-2").addressControl.getBox("smartform-address-city").setLimit(15);
       smartform.getInstance("smartform-instance-2").addressControl.getBox("smartform-address-zip").setLimit(15);

       smartform.getInstance('smartform-instance-1').addressControl.setShowValidationStateEnabled(true);
       smartform.getInstance('smartform-instance-2').addressControl.setShowValidationStateEnabled(true);
        smartform.getInstance('smartform-instance-3').addressControl.setValidationStateCssClasses(
      'custom-valid-icon',
      'custom-warning-icon');
    };
   }                                                                                                                                                                                      
</script>

Zdrojový kód – HTML pro první formulář:

<form>
   <input class="smartform-instance-1 smartform-address-street-and-number" id="smartform_ulice1" placeholder="Ulice a číslo" type="text" />
   <input class="smartform-instance-1 smartform-address-city" id="smartform_obec1" placeholder="Obec" type="text" />
   <input class="smartform-instance-1 smartform-address-zip" id="smartform_psc1" placeholder="PSČ" type="text" />
</form>

Zdrojový kód – HTML pro druhý formulář:

<form>
   <input class="smartform-instance-2 smartform-address-street-and-number" id="smartform_ulice2" placeholder="Ulice a číslo" type="text" />
   <input class="smartform-instance-2 smartform-address-city" id="smartform_obec2" placeholder="Obec" type="text" />
   <input class="smartform-instance-2 smartform-address-zip" id="smartform_psc2" placeholder="PSČ" type="text" />
</form>

Zdrojový kód – CSS:

/* Odebereme původní pozadí a připravíme prostor pro ikonu */
.custom-valid-icon,
.custom-warning-icon {
  background: none !important;
  padding-right: 2rem; /* Rezerva pro ikonku vpravo */
  position: relative;  /* Pro absolutní umístění pseudo-elementu */
}

/* Klíčové snímky pro otáčecí animaci */
@keyframes rotateIn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pseudo-element pro validní stav (zelená fajfka) */
.custom-valid-icon::after {
  content: '';
  position: absolute;
  top: 50%; right: 0.5rem;
  width: 1rem; height: 1rem;
  margin-top: -0.5rem;  
  /* Bublina s fajfkou ve středu */
  background: #e0f7e9 url('data:image/svg+xml;utf8,\
') no-repeat center center;
  background-size: 1rem;
  /* Otočení ikonky při zobrazení */
  animation: rotateIn 0.6s ease-in-out;
  transform-origin: center center;
}

/* Pseudo-element pro varování (oranžový vykřičník) */
.custom-warning-icon::after {
  content: '';
  position: absolute;
  top: 50%; right: 0.5rem;
  width: 1rem; height: 1rem;
  margin-top: -0.5rem;
  /* Bublina s vykřičníkem ve středu */
  background: #fff4e5 url('data:image/svg+xml;utf8,\
') no-repeat center center;
  background-size: 1rem;
  /* Otočení ikonky při zobrazení */
  animation: rotateIn 0.6s ease-in-out;
  transform-origin: center center;
}

/* Klíčové snímky pro spin animaci */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shake animace pro celý input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.6s ease-in-out;
}