Implementação do Webform

Atributos do Webform

Redirecionamento após envio dos dados

É possível adicionar uma url de redirecionamento após o sucesso no envio do dados que foram preenchidos no formulário, para isso basta adicionar um atributo data-redirect em seu código

Por exemplo:

<div id="WEBFORM_ID" data-redirect="http://www.google.com/"></div>

Personalização do Webform

Visando uma maior liberdade de personalização de seu formulário, disponibilizamos algumas classes em todos os elementos no formulário, onde é possível adicionar o seu CSS e deixar o formulário com a mesma aparência que seu site

Visão geral dos Elementos

Abaixo, as principais classes que seguem o padrão e as estruturas.

  .moskit-webform-script
    |- .moskit-webform-script__container                    [1]
    |----------------------------------------------------------
    | |- .moskit-webform-script__row                        [n]
    |  --------------------------------------------------------
    |   |- .moskit-webform-script__field                    [1]
    |    ------------------------------------------------------
    |     |- .moskit-webform-script__field__label           [1]
    |     |----------------------------------------------------
    |     |- .moskit-webform-script__field__block--${type}  [1?]
    |       | ........
    |
    |- .moskit-webform-script__button                       [1]
    ----------------------------------------------------------
  [1] - existirá um único elemento com esta classe,
  [n] - poderá existir 1 ou mais elementos com esta classe.
  [1?] - existirá um único elemento com esta classe, mas poderá receber outras classes adicionais.

Descrições das Classes

.moskit-webform-script

Esta classe é a raiz do Webform.

Baseado na largura e tamanho da fonte deste componente, os demais componentes dentro deste componente vão assumir as dimensões.

Por padrão:

Este componente herdará o tamanho da fonte do elemento pai.
Este componente terá um padding com o tamanho equivalente a tamanho da fonte.

.moskit-webform-script__container

Esta classe é o container, dentro da raíz, só existe um único elemento com esta classe.

E dentro do elemento com esta classe, existirá os elementos para representar cada linha do formulário, mas é possível mudar este comportamento.

Por padrão, o webform deverá exibir um único campo por linha, mas caso queira mudar este comportamento, poderá adicionar linhas de CSS para exibir 2 ou mais campos por linha.

Por exemplo:


  <style>
    .moskit-webform-script .moskit-webform-script__container {
      flex-wrap: wrap;
      flex-direction: row;
    }
    .moskit-webform-script__container .moskit-webform-script__row {
      width: 50%;
    }
  </style>

.moskit-webform-script__row

Esta classe, por padrão, representa cada linha do webform, no entanto, conforme descrito na classe anterior, este comportamento poderá ser alterado.

O elemento com esta classe, contém um único elemento como filho, que terá uma classe dinâmica de acordo com o tipo de dado selecionado no painel do Moskit CRM.

Cada um dos campos assume um ID, e através deste ID conseguirá manipular os elementos ou estilizar um campo específico através deste ID.: {ID do Form}-field-${ID do Campo}

Por exemplo:


* ID do formulário é uuid3124
* ID do segundo campo é 102391

-> seletor para poder utilizar no CSS: #uuid3124-field-102391

.moskit-webform-script__field

Esta classe representa o único bloco dentro de cada componente, dentro deste elemento, ainda poderá existir um elemento <label> , e um outro elemento que o usuário poderá interagir selecionando os valores.

Para cada tipo de dado selecionado no painel, este elemento poderá ter outras classes adicionadas, além das classes que são adicionadas de acordo com a interação do usuário.

De acordo com a interação do usuário, as seguintes classes poderão ser adicionadas:

.moskit-webform-script__field--is-dirty: Após o usuário interagir e inserir algum valor.
.moskit-webform-script__field--is-focused : Quando o usuário focar neste campo.

De acordo com os tipos de dados selecionados, os campos receberão estas classes:

.moskit-webform-script__field--text : Texto.
.moskit-webform-script__field--email : Email.
.moskit-webform-script__field--phone : Telefone.
.moskit-webform-script__field--currency : Moeda.
.moskit-webform-script__field--number : Número.
.moskit-webform-script__field--date : Data.
.moskit-webform-script__field--single_option : Escolha única
.moskit-webform-script__field--multiple_option : Múltipla escolha

Esta classe representa os labels dentro de cada campo.
Estes labels são animados de acordo com as classes do elemento pai:

.moskit-webform-script__field__block

Esta classe representa os blocos que deverão conter os elementos que o usuário poderá interagir.

Ainda dentro deste componente, poderá existir um elemento que o usuário conseguirá interagir através do teclado ou o mouse.

Além da classe normal, também deverá ter outra classe de acordo com o tipo de dado selecionado no Painel.


De acordo com os tipos de dados selecionados, os campos receberão estas classes:

| Classe                                              | Tipos dados  |
|-----------------------------------------------------|--------------|
|.moskit-webform-script__field__block--text           | Texto        |
|.moskit-webform-script__field__block--email          | Email        |
|.moskit-webform-script__field__block--phone          | Telefone     |
|.moskit-webform-script__field__block--currency       | Moeda        |
|.moskit-webform-script__field__block--number         | Número       |
|.moskit-webform-script__field__block--date           | Data         |
|.moskit-webform-script__field__block--single_option  | Escolha única| 
|.moskit-webform-script__field__block--multiple_option| Multi escolha|

.moskit-webform-script__field

Esta classe representa os componentes que o usuário poderá interagir, com a exceção dos tipos de dados:

Escolha única
Escolha Múltipla

Pois estes dois componentes está mostrando um elemento com o valor, mas o elemento em si, não está visível na tela.

Para campos com este comportamento, poderá estilizar a classe .moskit-webform-script__field--decorator, que será descrito abaixo.


Para cada um dos elementos que o usuário poderá interagir, será adicionado estas classes de acordo com os tipos de dados

| Classe                                        | Tipo de dados    | |-----------------------------------------------|------------------|
|.moskit-webform-script__field__text            | Texto            |
|.moskit-webform-script__field__text--email     | Email            |
|.moskit-webform-script__field__text--phone     | Telefone         |
|.moskit-webform-script__field__text--currency  | Moeda            |
|.moskit-webform-script__field__text--number    | Número           |
|.moskit-webform-script__field__text--date      | Data             |
|.moskit-webform-script__field__multiple-option | Escolha única    |
|.moskit-webform-script__field__single-option   | Múltipla escolha |

.moskit-webform-script__field--decorator

Esta classe repesenta os elementos que está apenas mostrando os valores para os usuários.

Nos tipos de dados de Escolha única e Múltipla escolha, não está sendo exibido os valores reais para estes campos.

Mas os valores reais estão armazenados dentro de um campo oculto.

O conteúdo dos elementos com a classe .moskit-webform-script__field--decorator, será preenchido com os rótulos dos valores preenchidos.

Por exemplo, se existir uma opção, e ela estiver selecionada,
<option value=9>Opção legal.</option>

Elemento com a classe .moskit-webform-script__field--decorator terá como conteúdo: Opção Legal , mas ainda assim, existirá um elemento com a classe .moskit-webform-script__field com o atributo valor=9 .