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
.