Demo – různá rozvržení formuláře

Zde je předvedeno použití tří formulářů se Smartformem na jedné HTML stránce.

Jednoduchý formulář:

 

Formulář umožňující vybrat zemi:

 

Celá adresa:

 

 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]');
   }
   
   /** V druhem formulari nastavi na zacatku Cesko */   
   smartform.afterInit = function () {
       smartform.getInstance('smartform-instance-vyber-zemi').addressControl.setCountry('CZ')      
   }                                                          
    
   /** Ve formulari 'smartform-instace--vyber-zemi' nastavi naseptavanou zemi podle hodnoty v combu #country. */
   function changeCountry(){
       var country = $("#country").val();
       smartform.getInstance('smartform-instance-vyber-zemi').addressControl.setCountry( country );
   }
                                                                                                                                                                                        
</script>

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

<form>
   <div>
      <label for="smartform_ulice">Ulice a číslo</label>
      <input id="smartform_ulice" type="text" class="smartform-address-street-and-number" />
   </div>
   <div>
      <label for="smartform_obec">Obec</label>
      <input id="smartform_obec" type="text" class="smartform-address-city" />
   </div>
   <div>    
      <label for="smartform_psc">PSČ</label>
      <input id="smartform_psc" type="text" class="smartform-address-zip" />
   </div>
</form>

Zdrojový kód – HTML s výběrem zemi:

<form>
   <div><label for="smartform_ulice_vyber">Ulice a číslo</label> 
      <input class="smartform-instance-vyber-zemi smartform-address-street-and-number" id="smartform_ulice_vyber" type="text" />
   </div>
   <div><label for="smartform_obec_vyber">Obec</label> 
      <input class="smartform-instance-vyber-zemi smartform-address-city" id="smartform_obec_vyber" type="text" />
   </div>
   <div><label for="smartform_psc_vyber">PSČ</label>
      <input class="smartform-instance-vyber-zemi smartform-address-zip" id="smartform_psc_vyber" type="text" />
   </div>
   <div>
      <label for="country">Země</label>
      <select id="country" onchange="changeCountry()">
         <option selected="selected" value="CZ">Česká republika</option>
         <option value="SK">Slovenská republika</option>
      </select>
   </div>
   </div>
</form>

Zdrojový kód – HTML pro celou adresu:

<form>
   <div>
      <label for="adresa">Adresa</label>
      <input id="adresa" type="text" class="smartform-address-whole-address"/>
   </div>
</form>