Aula 43: Como criar formulário de contato

O bloco FORM do Spectra é uma maneira prática e eficiente de criar formulários de contato diretamente no editor de blocos do WordPress. Ele oferece uma maneira fácil de adicionar formulários personalizados ao seu site sem precisar de plugins adicionais como o WPForms ou o Contact Form 7.

Abaixo, vou explicar o passo a passo de como criar um formulário de contato utilizando o bloco FORM do Spectra.

Passo 1: Certifique-se de que o Spectra está instalado

Antes de começar, verifique se o Spectra está instalado e ativado no seu site WordPress. Se não estiver, siga estes passos:

1. Acesse o painel do WordPress.
2. Vá para Plugins > Adicionar Novo.
3. Pesquise por Spectra e clique em Instalar Agora.
4. Após a instalação, clique em Ativar.

Passo 2: Adicionar o Bloco FORM

Agora que o Spectra está instalado, você pode adicionar o bloco de Formulário à sua página ou post.

1. Crie ou edite uma página/post: Acesse a página ou post onde você deseja adicionar o formulário.
2. Abrir o Editor Gutenberg: Clique em “Editar” para abrir o editor de blocos.
3. Adicionar o Bloco FORM:
   • No editor Gutenberg, clique no ícone de + para adicionar um novo bloco.
   • Na barra de pesquisa, digite “FORM” ou navegue até a seção de blocos do Spectra e escolha o bloco FORM.

Passo 3: Personalizar o Formulário

Uma vez que o bloco FORM seja adicionado à página, você pode começar a personalizar o formulário com os campos que deseja.

Campos do Formulário

No Spectra, o bloco FORM vem com campos básicos que você pode adicionar e configurar:

1. Nome: Um campo de texto onde o usuário pode inserir seu nome.
2. Email: Um campo de email para o visitante inserir seu endereço de e-mail.
3. Mensagem: Um campo de área de texto onde a pessoa pode escrever a mensagem.

Para adicionar um campo, basta clicar sobre o bloco e selecionar o tipo de campo desejado (Nome, Email, Mensagem, etc.). Você pode adicionar, remover ou rearranjar os campos conforme necessário.

Ajustes e Personalizações

Depois de adicionar os campos básicos, você pode personalizar o formulário da seguinte maneira:

• Título do Formulário: Defina um título para o formulário (exemplo: “Entre em Contato Conosco”).
• Texto de Placeholder: Para cada campo, você pode configurar um texto de placeholder. Isso ajuda a orientar os visitantes sobre o que deve ser inserido em cada campo.
• Requerer Campos: Você pode definir se um campo é obrigatório ou opcional. Para campos obrigatórios, ative a opção de campo obrigatório.
• Botão de Envio: Personalize o texto do botão de envio. Por exemplo, “Enviar Mensagem” ou “Enviar Formulário”.

Passo 4: Configurar as Ações Após o Envio

Uma parte importante de qualquer formulário é configurar as ações que acontecem após o envio. No caso do bloco FORM do Spectra, você pode definir como o formulário irá se comportar quando um visitante clicar em “Enviar”.

1. Ações de Sucesso: Escolha o que acontecerá depois que o formulário for enviado com sucesso. As opções típicas incluem:

   • Exibir mensagem de sucesso: Por exemplo, “Obrigado por entrar em contato! Responderemos em breve”.
   • Redirecionar para uma página: Você pode configurar o formulário para redirecionar os usuários para uma página específica após o envio, como uma página de agradecimento.

2. Ações de Erro: Defina como os erros de envio (como campos obrigatórios não preenchidos) serão tratados. O bloco FORM do Spectra mostrará mensagens de erro para os campos não preenchidos corretamente.

Passo 5: Estilizar o Formulário

O Spectra oferece opções para estilizar os blocos e personalizar a aparência do formulário para que ele se encaixe bem no seu design. Você pode ajustar a largura, cores, fontes, e outros aspectos visuais:

1. Opções de Estilo: Clique sobre o bloco FORM e vá para as configurações de estilo na barra lateral. Aqui você pode ajustar:
   • Largura do formulário: Determine a largura do formulário para que ele se ajuste bem à sua página.
   • Margens e Padding: Ajuste o espaço ao redor do formulário para garantir que ele esteja bem posicionado na página.
   • Cores: Personalize as cores dos campos, do botão de envio e da borda do formulário.
   • Fonte: Selecione fontes personalizadas ou ajuste o tamanho da fonte do texto no formulário.

Passo 6: Configurar o E-mail de Destino

Após a personalização, é importante garantir que os dados do formulário sejam enviados para o endereço de e-mail correto.

1. O Spectra não oferece configuração de e-mail diretamente no bloco FORM, mas você pode integrar com um serviço de e-mail ou plugin de formulários de terceiros para gerenciar o envio do e-mail. Plugins como o WPForms ou Fluent Forms podem ser integrados para gerenciar a coleta e o envio de dados de formulário para seu e-mail.

2. Caso o Spectra tenha integração direta (dependendo da versão), configure o endereço de e-mail de destino para que você receba as mensagens enviadas pelo formulário.

Passo 7: Testar o Formulário

Antes de finalizar, é sempre importante testar o formulário para garantir que ele está funcionando corretamente.

1. Teste de Envio: Acesse a página onde o formulário foi inserido, preencha os campos e clique em “Enviar”.
2. Verifique o E-mail: Certifique-se de que os dados do formulário sejam enviados para o endereço de e-mail correto.

Passo 8: Publicar

Depois de testar e garantir que o formulário funciona como esperado, basta publicar a página ou post. Agora, seu formulário de contato estará disponível para os visitantes do site.

Conclusão

O bloco FORM do Spectra facilita a criação de formulários personalizados dentro do editor Gutenberg, sem a necessidade de plugins adicionais. Ao seguir os passos acima, você pode criar facilmente um formulário de contato funcional e estilizado no seu site WordPress. Lembre-se de testar sempre para garantir que os dados sejam coletados corretamente e que o formulário esteja funcionando conforme o esperado.