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);
   }                                                                                                                                                                                      
</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>