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 = document.getElementById("country").value
        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-instance-cela-adresa smartform-address-whole-address"/>
    </div>
</form>