O Editor de formulários é uma ferramenta fácil de usar que permite criar vários tipos de formulários da web para interagir com os visitantes do site ou coletar informações do usuário. Com sua interface intuitiva, semelhante ao Editor de texto e imagem, mas com opções de personalização adicionais, você pode criar e configurar formulários como formulários de feedback, formulários de assinatura, pesquisas e muito mais.
Como adicionar um formulário ao seu site
1. Navegue até a guia Construir no menu à esquerda e selecione a categoria Formulários.
2. Arraste e solte o elemento de formulário no local desejado da página. O espaço reservado azul indicará o local disponível mais próximo.
Componentes do formulário
1. Elementos: Configure o conteúdo, incluindo campos de formulário, caixas de seleção, botões de opção e o botão de chamada para ação.
2. Configurações: Defina o que acontece ao enviar o formulário, como enviar dados para um e-mail ou banco de dados.
Elementos do formulário
1. Campo de texto
O Campo de texto permite que os usuários insiram entradas de texto curtas e de linha única em seu formulário.
Tipos de campo
A configuração Tipo determina o tipo de dados que os usuários podem inserir:
- Texto – exibe a entrada exatamente como digitada.
- Senha – oculta os caracteres de entrada exibindo-os como *** (por exemplo, senhas).
- Oculto – armazena informações relacionadas ao sistema (por exemplo, detalhes do referenciador ou do navegador) ou dados pré-preenchidos que os usuários não devem ver.
- Arquivo* – permite que os visitantes carreguem imagens, áudio, vídeo ou outros arquivos. Os arquivos enviados geram um e-mail com um link de download clicável.
Opções de personalização
- Nome – um identificador exclusivo para fazer referência ao campo no editor de formulários e em e-mails ou entradas de blog gerados pelo formulário.
- Largura – ajuste a largura do campo ao inserir um valor ou arrastar as alças de redimensionamento.
- Comprimento máximo – define o número máximo de caracteres que o campo pode aceitar.
- Validar como – define o tipo de conteúdo necessário (por exemplo, um campo de e-mail deve conter um endereço de e-mail formatado corretamente). Se a entrada for inválida, os usuários verão um aviso para corrigi-la.
- Dica – exibe o texto auxiliar quando os usuários clicam dentro do campo, fornecendo orientações ou exemplos.
- Valor padrão – preenche automaticamente o campo com um valor predefinido que os usuários podem modificar.
Uploads de arquivos*
- Para armazenar arquivos carregados, o formulário deve estar vinculado a um banco de dados.
- Os arquivos armazenados no banco de dados permanecerão acessíveis e contarão para o limite de armazenamento da conta.
- Os links de arquivo enviados por e-mail não usam armazenamento, mas expiram após 30 dias
2. Área de texto
O campo de formulário Área de texto é semelhante ao Campo de texto, mas permite uma entrada de texto mais longa e de várias linhas.
Opções de personalização
Além das opções idênticas ao Campo de texto - Nome, Rótulo, Largura, Dica, Validar como e Valor padrão, existem as seguintes opções para a Área de texto:
- Altura – ajusta a altura da área de texto alterando o número no campo de altura ou arrastando os controles de redimensionamento da área de texto.
- Quebra - define como o texto é exibido quando enviado em e-mails ou exibido em fóruns ou blogs.
- Padrão – usa as configurações de quebra de texto padrão do navegador ou cliente de e-mail.
- Desativar – desativa a quebra automática de texto, para que o texto não seja dividido em novas linhas quando digitado.
- Físico – exibe o texto exatamente como foi quebrado na Área de texto.
- Virtual – permite que o cliente de e-mail decida como o texto será quebrado.
3. Campo de seleção
O campo de seleção permite que os usuários escolham a partir de uma lista predefinida de opções. Ele pode ser exibido como um menu suspenso ou uma lista, dependendo da configuração selecionada.
Opções de personalização
- Tipo – define como as opções são exibidas:
- Menu – exibe uma lista suspensa onde os usuários podem selecionar uma opção.
- Lista – mostra todas as opções disponíveis em uma lista vertical.
- Opções – representa as opções selecionáveis no campo.
- Nome da opção – o texto exibido no menu suspenso ou na lista.
- Valor da opção – os dados reais enviados em e-mails quando a opção é selecionada.
- Ordem e controle – use as setas direcionais para reorganizar as opções, excluir as indesejadas ou definir uma seleção padrão que aparece quando o formulário é carregado.
4. Caixas de seleção
As caixas de seleção permitem que os usuários selecionem várias opções de uma lista ou ativem ou desativem uma única opção. Elas são úteis para apresentar seleções de múltipla escolha nas quais mais de uma opção pode ser escolhida.
Opções de personalização
- Nome – o identificador exclusivo da caixa de seleção, usado no Editor de modelos de formulário, e-mails e entradas de blog. Pense nisso como se fosse a pergunta que os usuários estão respondendo ao marcar ou desmarcar as caixas de seleção.
- Valor – representa a resposta selecionada. Por exemplo, se o valor da caixa de seleção estiver definido como "Sim", marcar a caixa significa que o usuário respondeu afirmativamente.
- Selecionado por padrão – se ativado, a caixa de seleção será marcada automaticamente quando o formulário for carregado.
- Obrigatório – exige que os usuários marquem a caixa antes de enviar o formulário. Isso é útil para caixas de seleção de consentimento, como exigir que os usuários aceitem os Termos e Condições antes do envio.
5. Botões de opção
Os botões de opção são usados quando apenas uma opção pode ser selecionada em uma lista predefinida. Ao contrário das caixas de seleção, selecionar um botão de opção desmarca automaticamente qualquer outra opção no mesmo grupo.
Opções de personalização
- Nome do grupo – todos os botões de opção que representam opções para a mesma pergunta devem pertencer ao mesmo grupo. Apenas um botão por grupo pode ser selecionado por vez.
- Valor – representa a opção de resposta. Por exemplo, se a pergunta for "Você gosta do meu site?", o nome do grupo pode ser “CurteMeuSite", com as opções de valor Sim, Não e Precisa melhorar. Se um usuário selecionar Sim, a resposta enviada aparecerá como: CurteMeuSite: Sim.
- Estado padrão – permite pré-selecionar um botão de opção quando o formulário é carregado.
- Obrigatório – requer que o usuário selecione uma opção antes de enviar o formulário.
6. Formulário de feedback
O Editor de formulários inclui um assistente de Formulário de feedback integrado, que pode ser facilmente adicionado ao selecionar o ícone F.
Este formulário vem pré-configurado com todos os campos necessários para enviar feedback, incluindo um botão de Chamada para ação. Os campos são definidos com opções padrão, mas você pode personalizá-los conforme necessário para melhor atender às suas necessidades.
7. Mensagens de êxito/erro
Depois que o formulário é enviado, o sistema exibe uma mensagem de êxito ou erro. Você pode controlar o posicionamento dessas mensagens especificando a localização no editor.
Use o ícone Informações para selecionar onde deseja que as mensagens apareçam. Nas Propriedades do formulário, quando as Opções avançadas estão ativadas, você também pode personalizar a Mensagem de êxito. Se o campo for deixado em branco, a mensagem de êxito padrão será exibida. No entanto, se preferir, você pode inserir uma mensagem personalizada em Propriedades do formulário, que será mostrada aos visitantes após o envio bem-sucedido do formulário.
8. Botão de chamada para ação
O botão Chamada para ação (CTA) é um elemento crucial do formulário, pois permite que os usuários enviem suas contribuições e concluam as ações pretendidas do formulário. Sem ele, não é possível enviar o formulário.
Para inserir um botão CTA, localize seu ícone na seção Elementos alinhados da barra de ferramentas do Editor de formulários e clique nele. Depois de adicionado, clique no botão para configurá-lo como um botão de envio. No menu suspenso Link, selecione {Enviar formulário} para habilitar o envio do formulário.
Se precisar de um botão de redefinição, poderá criar um seguindo as mesmas etapas e selecionando {Redefinir}. Além disso, o painel direito oferece um campo editável no qual você pode personalizar o texto da legenda do botão para corresponder ao seu formulário.
Propriedades e personalização do botão de chamada para ação
- Legenda e sublegenda do botão: Defina o texto principal e o subtexto opcional exibidos no botão.
- Tamanho: Escolha entre tamanhos de botões pequenos, médios ou grandes.
- Largura mínima: Defina uma largura mínima do botão para consistência no layout.
- Sobreposição do mouse à legenda e sublegenda: Especifique o texto alternativo que aparece quando os usuários passam o mouse sobre o botão.
- Transição do texto: Se uma legenda estiver definida ao passar o mouse, selecione um efeito de transição para uma alteração visual suave.
- Efeito de destaque: Adicione um efeito de animação que é ativado 3 segundos após o carregamento da página e se repete a cada 30 segundos.
- Cor: Selecione entre três cores de botão predefinidas.
- Alinhamento: Alinhe o botão em relação ao conteúdo (esquerda, centro ou direita).
- Preenchimento: Ajuste o preenchimento do botão em pixels para obter o espaçamento ideal.
- Ícone do botão: Escolha um ícone da Biblioteca de imagens padrão ou carregue uma imagem personalizada.
- Ícone de sobreposição do mouse: Opcionalmente, adicione um ícone diferente que aparecerá ao passar o mouse.
- Localização do ícone: Posicione o ícone antes ou depois da legenda do botão.
1. Próxima página
Especifique a página que deve ser aberta após o envio bem-sucedido do formulário. Pode ser uma página de agradecimento dedicada ou qualquer outra página relevante em seu site. Por padrão, o formulário é configurado para manter os usuários na mesma página após o envio bem-sucedido. Para alterar isso, via Tipo de link, escolha a página desejada.
2. Enviar para e-mail
Ative Enviar para e-mail para receber envios de formulários por e-mail dos visitantes do seu site. Isso expandirá opções adicionais:
| - E-mail destinatário – digite o endereço de e-mail para onde os envios de formulários devem ser entregues, por exemplo, pedidos@contatemeusite.com. | |
| - E-mail remetente – para garantir a capacidade de entrega dos envios de formulários, desativamos a opção de especificar o endereço de e-mail do remetente. | |
| - Assunto do e-mail – defina a linha de assunto do e-mail (por exemplo, "Nova solicitação de informações"). Você também pode usar curingas $xxxxx$ para personalizar o assunto com base na entrada do usuário. |
3. Editor de modelos e formatos de e-mail
Escolha o formato do e-mail:
- Simples – envia e-mails somente de texto, removendo qualquer formatação.
- HTML – envia e-mails formatados, desde que seu cliente de e-mail suporte o formato HTML.
Para layouts de e-mail personalizados, selecione Usar modelo, que abre o Editor de modelos:
- O Editor de modelos funciona como um editor simplificado de texto e imagem.
- Use o menu suspenso Valor para inserir espaços reservados correspondentes aos campos do formulário.
- Uma vez salvo, cada envio de formulário irá gerar um e-mail com base na estrutura do seu modelo.
4. Enviar e-mail de confirmação
Esse recurso envia uma resposta automática aos visitantes, confirmando o envio.
- E-mail destinatário – digite o endereço de e-mail para onde os envios de formulários devem ser entregues, por exemplo, pedidos@contatemeusite.com.
- E-mail remetente – para garantir a capacidade de entrega dos envios de formulários, desativamos a opção de especificar o endereço de e-mail do remetente.
- Assunto do e-mail – defina a linha de assunto do e-mail (por exemplo, "Nova solicitação de informações").
- Conteúdo da mensagem – ative em Usar modelo > Editar para abrir o Editor de modelo de texto, onde você pode personalizar a mensagem de confirmação. Use Etiquetas de mesclagem para inserir dados de campo de formulário (por exemplo, $Email$).
5. Enviar para banco de dados
Habilite Enviar para banco de dados para armazenar dados de formulário enviados em um banco de dados hospedado no site. O formulário cria automaticamente um banco de dados dedicado com colunas obrigatórias que correspondem aos nomes dos campos e tipos de dados do formulário. Você também pode usar um banco de dados importado, mas certifique-se de que ele tenha nomes e tipos de coluna correspondentes.
Configurações adicionais:
- Confirmação obrigatória – envia um e-mail com um link de confirmação no qual os usuários devem clicar para validar seu envio.
- Aprovação obrigatória – notifica um moderador por e-mail, exigindo que ele aprove ou rejeite o envio antes de armazená-lo. Isso ajuda a evitar spam ou envios acidentais.
Para obter detalhes adicionais, consulte o tutorial do aplicativo Editor de banco de dados.