Como criar um formulário de contato no Brizy

Criando formulários no Brizy: como montar o formulário perfeito para a sua página

Estamos indo bem: se você está acompanhando as aulas, então já tem sua página inicial e provavelmente uma ou mais páginas extras. Uma dessas páginas, aliás, deve ser a página de contato do seu negócio.

Uma característica comum das páginas de contato são os formulários. Afinal, para conversar com você ou mesmo fazer pedidos, o cliente deve inserir informações como nome, e-mail, telefone, etc.

Nesta aula, vamos descobrir como inserir um formulário utilizando o Brizy e explorar as diferentes opções que essa ferramenta nos oferece. Vamos lá?

Como inserir formulários no Brizy

Formulários são elementos, assim como botões, textos e imagens. Por isso, para inserir um formulário, basta clicar no símbolo “+” no canto superior esquerdo da tela e escolher Form.

Você pode colocá-lo diretamente na página ou dentro de uma coluna. No primeiro caso, o formulário terá a largura da página; já no segundo, ele terá a mesma largura da coluna.

Por padrão, um formulário já vem com 3 campos, com os dizeres: e-mail, Select e Paragraph. Mas não é isso que você quer no seu formulário, certo? Por isso mesmo vamos aprender a editar esses campos logo a seguir.

Editando um formulário no Breezy

Adiconando novos campos

Para adicionar um novo campo ao seu formulário, clique em algum dos campos existentes para que a barra de ferramentas apareça. Em seguida, clique em Duplicate (duplicar), que criará uma cópia do campo existente.

Tipos de campo

Provavelmente você vai querer que o novo campo seja de um tipo diferente. Para mudá-lo, clique sobre o campo recém-criado e escolha a opção Field. Uma pequena janela se abrirá, e no menu Type você pode escolher o tipo do campo.

Cada campo permite que apenas um tipo de informação seja inserida, conforme a lista a seguir:

Text: texto curto;

Number: número;

Email: endereço de e-mail;

Paragraph: texto mais longo;

Date: data;

Url: endereço da web;

Time: horário;

File: arquivo (upload);

Tel: número de telefone;

Password: senha.

Há ainda as opções Select e Checkbox. A primeira permite criar um menu de escolha única, enquanto a segunda cria uma checklist onde o usuário pode escolher mais de uma opção.

A escolha do tipo de campo é importantíssima, uma vez que o usuário será avisado caso digite algo que não convém (por exemplo, caso digite um e-mail no campo para informar o telefone). Caso você queira que o campo seja obrigatório, ative a opção Required na aba Field.

Obviamente, você não precisa utilizar todos os tipos de campo: escolha apenas aqueles que fazem sentido para o seu projeto.

Editando o conteúdo dos campos

Independentemente do tipo de campo escolhido, você pode editar o texto de fundo do campo simplesmente clicando sobre ele e escrevendo o que quiser.

Se você quiser, pode também colocar um título no campo. Ele ficará acima da área a ser preenchida e o usuário não poderá modificá-lo. Para isso:

Clique no campo para que apareça a barra de ferramentas;

Escolha a opção Field;

Vá até a aba Advanced;

Ative a opção Label.

Voltando ao formulário, você pode alterar o título assim como faz com o texto do interior do campo.

Para onde vão os formulários preenchidos?

Se estiver utilizando o Brizy Cloud gratuito, as respostas aos formulários serão enviadas para a sua conta do Brizy. Para visualizá-las, faça o seguinte:

Acesse sua dashboard;

Procure o projeto correspondente;

Clique nas reticências (…) no canto superior direito;

Clique em Leads.

Uma janela se abrirá, mostrando todos os formulários respondidos.

Agora é sua vez!

Agora que você já conhece quase tudo sobre os formulários do Brizy, suas funções e como editá-los, que tal criar um para o seu site? Teste diferentes configurações e explore o quanto puder de todas as opções disponíveis.

Para ver todas essas dicas na prática e descobrir algumas coisinhas a mais, assista ao vídeo no topo da página. E se tiver dúvidas, pode perguntar pra gente!

Para mais conteúdo sobre como trabalhar com formulários no Brizy e as diversas outras funções desse construtor de site incrível, continue acompanhando as nossas aulas. Até a próxima!