Základní postupy – E-maily

Obsah

Začínáme se Smartformem

  1. Založte si účet:
    • Pokud ještě nemáte účet, zaregistrujte se na admin.smartform.cz.
    • Po registraci získáte své Client ID, které budete potřebovat při implementaci.
  2. Přidejte doménu a aktivujte služby:
    • V administraci si přidejte doménu webu, na kterém chcete Smartform používat.
    • Aktivujte si zkušební režim – získáte všechny služby zdarma na 14 dní.
    • Máte-li testovací nebo vývojovou doménu, přidejte si ji a zažádejte o aktivaci režimu Development. Ten je zdarma a neomezený pro interní testování.
  3. A teď už se vrhneme na úpravu HTML stránky s formulářem. Do hlavičky (head) je potřeba přidat pár řádků s Javascriptem:
    • odkaz na Javascript kód Smartformu 
       <script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async>
 </script>
    • a inicializační skript – zde jako parametr funkce smartform.setClientId doplňte clientId, které máte přiděleno v administrační aplikaci 
        <script type="text/javascript">
  var smartform = smartform || {};
  
  smartform.beforeInit = function () {
        smartform.setClientId('[zde doplňte klientské ID]');
  }
  </script>
  4. Potom už stačí jenom správně označit vstupní formulářové pole zadávání e-mailu. Vstupní <input> element označíte tak, že do atributu class přidáte identifikátor smartform-email: 
    <input class="smartform-email" type="text" />

 V praxi můžete vidět formulář pro validaci e-mailové adresy v ukázce.

Dokumentace API

Od června 2022 je k dispozici nová verze API, která umožňuje použít Smartform pro web i pro validování e-mailů.

Více e-mailových adres na jedné stránce

Pokud potřebujete zadat víc než jeden e-mail na jedné stránce, je pořeba vstupní políčka jednotlivých e-mailů odlišit. K tomu slouží další identifikátor, který se přidá do atributu class elementů <input>. Tento identifikátor musí začínat řetězcem "smartform-instance" a jeho uvedením se políčko začlení do tzv. instance Smartformu, která je z API dostupná právě přes svůj identifikátor.

Pokud je na stránce jen jeden formulář, není vůbec potřeba identifikátor zadávat. Použije se totiž implicitní identifikátor instance (což je prázdný řetězec).

Následuje příklad formuláře se dvěma vstupními e-maily:

  <form>
     <input type="text" class="smartform-email smartform-instance-mail-registracni">

     <input type="text" class="smartform-email smartform-instance-mail-fakturacni">
  </form>

Získání informací o průběhu validace e-mailové adresy

Při zadávání e-mailové adresy Smartform průběžně zadaný e-mail validuje (kontroluje zdali skutečně existuje). Zobrazení  výsledku validace je možné zapnout pomocí metod setShowMessagesEnabled a setShowValidationStateEnabled.

smartform.afterInit = function () {
    // Zapnutí zobrazování validačních hlášek
    smartform.getInstance().emailControl.setShowMessagesEnabled( true );
    // Zapnutí zobrazování validačních ikonek
    smartform.getInstance().emailControl.setShowValidationStateEnabled( true );
}

Pokud však potřebujete plnou kontrolu nad tím, co se při validaci děje, můžete si registrovat vlastní listener pomocí metody addValidationCallback a zpracovávat výsledek validace ručně.

smartform.afterInit = function () {
    smartform.getInstance().emailControl.addValidationCallback( emailValidationCallback );
}
    
function emailValidationCallback( validationResult ) {
    console.log( validationResult.result.resultType );
}