Seção de contato

O formulário de contato serve como uma ferramenta crucial para facilitar a comunicação entre indivíduos ou empresas. Ele fornece uma maneira conveniente e organizada para os usuários entrarem em contato e expressarem suas dúvidas. Você também pode usar aplicativos, consultas de contato e pesquisas de opinião.

Você pode criar facilmente uma página de contato em seu site usando a seção Contato.

Neste artigo:

1. Adicionando seção de contato a uma página
2. Conteúdo do Formulário de Contato
3. Gerenciar layout
4. Gerenciando campos de formulário e tipo de formulário
5. Tipos de Campos
6. Formulário embutido e formulário pop-up
7. Configurações de estilo de botão
8. Formulário de contato de estilo
9. Configurações do formulário de contato
10. Redirecionar formulário para outra página
11. Exportar dados de formulário
12. Dados do formulário enviado
13. Notificações por e-mail
14. Exemplo ao Vivo

---

Adicionando seção de contato a uma página

• Na sua página, Clique no ícone + azul para adicionar uma nova seção à sua página.

• Você vai agora ver o Categorias de seção no lado esquerdo.
• Escolha o Formulários (1) categoria e clique em Contato guia (2) onde você pode escolher layouts diferentes que acontecerá no marco da Contato (3) seção.

• Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.

---

Conteúdo do Formulário de Contato

Esta é uma parte importante do formulário, pois você carrega ou altera a imagem, dá título e descrição aqui para que os usuários tenham uma ideia sobre o objetivo do formulário em si. Ao criar cuidadosamente um título descritivo e conciso e uma descrição atraente e informativa, você pode melhorar a comunicação e estabelecer conexões fortes com os visitantes do seu site.

• Você pode Escolher arquivo or Apagar (1) a imagem que será exibida no formulário.
• Edite o Título (2) do formulário.
• Edite o Descrição (3) do formulário.

• Definir o Título da Seção (4) que será exibido no topo do formulário.

---

Gerenciar layout

• Ao adicionar o formulário na página, um layout deve ser selecionado. Você pode Alterar o layout depois de adicionar o formulário também.

---

Gerenciando campos de formulário e tipo de formulário

Debaixo Gerenciar campos de formulário, você pode especificar os campos que deseja que seus visitantes preencham.

• Clique no + Adicionar Campo (1) botão para adicionar mais campos ao seu formulário.
• Editar, duplicar ou excluir (2) um campo já adicionado.
• Arraste e solte (3) o campo para alterar a sequência no formulário.

Ao clicar no botão + Adicionar campo, abrirá um pop-up onde você poderá escolher os elementos que deseja exibir no formulário.

---

Tipos de Campos

Existem vários tipos de campos que você pode usar no formulário de contato do seu site para coletar mais dados úteis dos usuários de maneira categorizada e profissional. Esses campos podem ser facilmente adicionados, duplicados ou excluídos.

Aqui está uma breve descrição dos campos do formulário.

• Nome: Capture o nome do seu cliente usando isso.
• Pequeno texto: Use esta caixa para capturar breves dados de texto dos visitantes do site.
• Texto Longo: Use esta caixa para capturar dados de texto longo dos visitantes do site.
• E-mail: Capture o e-mail do seu cliente.
• Sessão: Use para capturar números (dígitos).
• Suspenso: você pode adicionar opções para escolher em uma lista suspensa.
• Seleção Única: adicione isso onde os usuários podem selecionar apenas uma opção da lista.
• Seleção múltipla: adicione isso onde os usuários podem selecionar várias opções da lista.
• Data: adicione um seletor de data para que seus clientes possam escolher uma data para qualquer evento.
• Line: Adicione linhas ao seu formulário. Isso pode ser usado para diferenciar os campos.
• Endereço: Use isso para capturar o endereço dos usuários.
• Website: você pode usar isso para capturar o site do usuário.
• Telemóvel: Capture o número de telefone usando este campo.
• Tempo: Isso dará aos usuários a opção de selecionar um horário.
• separador: Isso pode ser usado para categorizar os campos do formulário com a opção de adicionar Título e Subtítulo.
• Consentimento: Obtenha o consentimento dos usuários usando isso no formulário.
• Escala Estelar: permite que os usuários atribuam classificação por estrelas usando isso. Ele pode exibir 3 ou 5 estrelas.
• escala numérica: Permita que os usuários deem uma classificação numérica usando isto. Você pode escolher exibir de 0 a 10 e personalizar a legenda esquerda e direita.
• Escala do Smiley: permite que os usuários atribuam classificações de smileys usando esta opção.

---

Formulário embutido e formulário pop-up

Você pode escolher mostrar o formulário na página ou como um pop-up vinculado a um botão de chamada para ação.

Formulário embutido

Selecionando Formulário embutido colocarei o formulário de contato diretamente na página onde for adicionado. O formulário ficará imediatamente visível para os visitantes, sem a necessidade de nenhuma ação adicional. Isso é ideal para situações em que você deseja manter o formulário em destaque e incentivar o engajamento direto, como em uma página de contato ou consulta.

Formulário pop-up

Escolher Formulário pop-up exibirá apenas um botão na páginaQuando um visitante clica no botão, o formulário de contato é aberto em uma janela pop-up. Isso mantém o design da página mais limpo e funciona bem quando você deseja oferecer o formulário sem ocupar muito espaço. É comumente usado para consultas rápidas, captura de leads ou quando você deseja minimizar distrações na página.

---

Configurações do estilo do botão

1. Etiqueta do botão – Especifique o texto visível no seu botão. É isso que os usuários verão e clicarão.
2. Tamanho do botão – Escolha o tamanho do botão (ex.: Pequeno, Médio, Grande). Isso ajusta o preenchimento e o tamanho da fonte para se adequar ao seu design.
3. Estilo de Botão – Escolha o estilo do botão como padrão (definido no Botões e Links guia da seção Design), Sólido, Contorno ou um Link de Texto.
   • Padrão: Segue as configurações de tema do seu site.
   • Sólido: Um botão em negrito e preenchido.
   • Esboço: Fundo transparente com borda.
   • Link de texto: Estilo simples e limpo, somente texto (sem caixa de botões).
4. Cor do botao – Personalize o esquema de cores do botão:
   • Padrão: Herda as configurações do tema.
   • Invertido: Inverte as cores do texto/fundo do botão.
   • Personalizadas: Permite que você escolha cores específicas de texto e fundo.
5. Texto do botão - Se estiver usando Cor de botão personalizada, você pode definir o cor do texto (rótulo) daqui.
6. Fundo do botão – Também disponível em Personalizado, define a cor de fundo do botão. Combine isso com a cor do texto para máxima legibilidade e estilo.
7. Alinhamento de Botão - Escolha o Alinhamento do botão no formato de opção Esquerda, Centro ou Direita.
8. Largura do botão – Escolha a largura que o botão deve aparecer:
   • Padrão: Largura padrão com base no conteúdo do botão
   • Grande / Extra Grande: Botões mais largos para mais ênfase
   • Largura completa: O botão se estende por toda a largura do contêiner

---

Formulário de contato de estilo

Estilizar um formulário de contato é um aspecto importante da criação de uma experiência visualmente atraente e amigável.

Você terá várias opções de estilo para a seção: 

• Campos de formulário
• Ataques XDR
• Texto
• Espaçamento
• NEW Manchete
• Imagens
• Borda da imagem
• Botão pop-up
• Botão de formulário
• Botões de título
• Ícones sociais de manchete

---

Campos de formulário

Pixpa permite tua para totalmente personalizar da aparência of o seu formulário campos. Estes estilo opções Aplique para todos os entrada Campos in o seu Contato Contato e dar tua maior ao controle Acima de como o seu formulário looks e sente on o seu .

1. Shape: Escolha o formato dos seus campos de entrada — como retângulo, arredondado, pílula ou texto — para combinar com a estética do seu site.
2. Preencher: Ative esta alternância para aplicar uma cor de preenchimento de fundo aos campos do formulário.
3. Cor base: Defina a cor de fundo dos campos quando a opção de preenchimento estiver habilitada.
4. Esboço: Ative ou desative a borda (contorno) para cada campo.
5. Cor do contorno: Escolha a cor da borda do campo quando o contorno estiver habilitado.
6. Cor do texto do campo: Defina a cor do texto digitado pelos usuários dentro dos campos do formulário.
7. Altura: Ajuste a altura dos seus campos escolhendo entre: Pequeno, Médio, Grande ou Extra Grande.
8. Rótulos: Escolha se os rótulos dos campos do formulário aparecem dentro ou fora do campo.
9. Cor da Etiqueta: Defina a cor dos rótulos quando colocados fora do campo.
10. Cor interna da etiqueta: Defina a cor dos rótulos colocados dentro do campo (útil para rótulos no estilo de espaço reservado).
11. Espaçamento entre campos: Use o controle deslizante para definir o espaçamento vertical (em pixels) entre cada campo do formulário.

---

Ataques XDR

• Gerenciar o alinhamento do conteúdo do formulário horizontalmente de Alinhamento horizontal (1).
• Gerenciar o alinhamento do conteúdo do formulário verticalmente de Alinhamento vertical (2).

---

Texto

• Clique no Alterar Estilo do Texto (1) botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte. 
• Especifique o Título (2) estilo de fonte do formulário.
• Especifique o Descrição (3) estilo de fonte do formulário.

---

Espaçamento

• Especifique o Largura da imagem (1) da imagem na forma em Porcentagem.
• Especifique o Espaço Entre Imagem e Texto (3) em Porcentagem.
• Especifique o Espaço Abaixo do Título (4) em Porcentagem.

---

NEW Manchete

1. Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
2. Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
3. Colocou o espessura do divisor (em pixels).
4. Especifique o Cor Divisória do seletor de cores.
5. Escolher Estilo Divisor da lista suspensa.
6. Colocou o Largura do título para definir a largura que o título da seção deve ter, começando com um mínimo de 50%.
7. Especifique o Espaço abaixo do título dentro da seção (em px).

---

Imagens

1. Corte de imagem: Escolha o Icolheita de mago para os itens da lista. Você pode definir as imagens como Quadrado, Círculo, Horizontal, Retrato e Original.
2. Raio de canto: Escolha ter um raio de canto comum ou raio de canto diferente para cada lado dos itens da lista e defina um número (em px) para o Craio próximo das imagens dos itens da lista. Saiba mais.
3. Animação de foco: Escolha Animar a imagem da seção ao passar o mouse, ativando a alternância. Verifique esse recurso em uma página ao vivo.
4. Estilo de Animação: Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.
5. Máscara de forma: Habilite esta alternância para aplicar uma máscara de forma às imagens na seção Image List. Uma vez habilitado, a forma selecionada cortará visualmente a imagem naquele formato.
6. Selecione a forma: Escolha entre várias formas predefinidas para aplicar às suas imagens. Isso permite que você estilize criativamente seu conteúdo exibindo imagens em formas únicas, como arredondado, diamante, gota, etc.

• Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.

---

Borda da imagem

1. Ativar/desativar borda ao redor da imagem alternando o botão.
2. Escolha ter um fronteira comum em todos os lados da imagem ou você pode especificar o fronteiras separadamente para cada lado.
3. Especifique o largura da fronteira. Se estiver definido como 0, a borda não aparecerá. Você também tem a opção de definir a largura da borda individualmente para cada lado da imagem.
4. Selecione os Cor da margem do seletor de cores.
5. Selecione um preferido Estilo da Borda da lista suspensa.
6. Determinar o largura da borda para celular dispositivos, alinhando-o com a largura escolhida para desktop.

---

Botão pop-up

Essas opções de estilo são para o botão pop-up, onde o formulário de contato será aberto quando o botão for clicado.

1. Tamanho do botão - Selecione o tamanho do botão entre opções como pequeno, médio ou grande.
2. Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (em porcentagem).
3. Estilo do botão - Escolha o estilo do botão, como padrão ou personalizado.
4. Cor do botao - Selecione o estilo de cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
5. Texto do botão – Personalize a cor do texto do botão.
6. Fundo do botão – Selecione a cor de fundo do botão.

---

Botão de formulário

Essas configurações permitem a personalização do botão de envio do formulário para corresponder ao design e layout da página.

1. Tamanho do botão - Selecione o tamanho do botão (Pequeno, Médio ou Grande).
2. Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (especificado em porcentagem).
3. Estilo do botão - Escolha o estilo geral do botão, como Padrão ou Personalizado.
4. Cor do botao - Defina o estilo da cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
5. Texto do botão – Personalize a cor do texto exibido no botão.
6. Fundo do botão – Selecione uma cor de fundo para o botão.
7. Alinhamento de botões – Escolha o alinhamento do botão (Esquerda, Centro ou Direita).
8. Largura do botão – Ajuste a largura do botão. As opções incluem Padrão, Grande, Extra Grande ou Largura Total.

---

Botões de título

Essas configurações controlam a aparência e o espaçamento dos botões colocados com o título da seção.

1. Tamanho do botão - Selecione o tamanho geral dos botões (Pequeno, Médio ou Grande).
2. Espaço entre botões – Ajuste o espaçamento entre vários botões (medido em vw).
3. Espaço acima dos botões – Defina o espaçamento vertical acima dos botões (medido em porcentagem).
4. Largura do botão – Escolha a largura dos botões. As opções incluem Padrão, Grande, Extra Grande e Largura Total.
5. Tamanho do link de texto – Especifique o tamanho da fonte dos links de texto associados aos botões (medido em px).
6. Tamanho do botão de imagem – Ajuste o tamanho dos botões baseados em imagem (medidos em px).

---

Ícones sociais de manchete

Exiba e personalize ícones de compartilhamento social no formulário.

1. Tamanho do ícone – Ajuste o tamanho dos ícones sociais (medido em px).
2. Tipo de ícone – Escolha o estilo dos ícones, como as opções Clássico, Sólido ou Contorno.
3. Cor do ícone – Selecione a cor dos ícones. As opções incluem Texto do Link, Personalizado ou Cor da Marca (cor original da plataforma social).
4. Cor de fundo do ícone – Defina uma cor de fundo personalizada para os ícones para melhorar a visibilidade e o estilo.

---

Configurações do formulário de contato

• Especifique um nome interno para o formulário para ajudar a identificá-lo no Pixpa Studio. Este nome não é visível para os visitantes do site.

Ação pós-envio

• Você pode definir Ação pós-envio (1) exibindo um Mensagem de sucesso (2) ou Redirecionando o usuário para um URL especificado.
• Você também pode adicionar qualquer script no Post Submit HTML de sucesso (3) caixa.

---

Redirecionar formulário para outra página

Redirecionar os usuários para uma página específica após o envio de um formulário pode aprimorar a experiência geral do usuário e servir a vários propósitos, como evitar envios duplicados, análises e rastreamento, reter usuários no site por um longo período de tempo, etc.

O redirecionamento pode ser facilmente criado usando o Ação pós-envio opção na guia Configuração.

• Você pode criar um redirecionamento dentro do seu site a partir de Conteúdo do site (1) opção. Pode ser uma página, galeria, blog, galeria de e-commerce, pasta, etc. Você deve inserir o nome do elemento no campo conforme mostrado na captura de tela abaixo e receberá sugestões relacionadas a ele.
• Uso Link Externo (2) opção para criar redirecionamento fora do seu site. Você terá que inserir a URL no campo para onde deseja que os usuários sejam redirecionados após o envio do formulário.

Saiba mais sobre como usar o Linkbuilder.

---

Dados do formulário de exportação

• Exportar dados do formulário (4) como um arquivo CSV. Saiba Mais.
• Economize (5) as mudanças.

---

Dados do formulário enviado

Os dados de formulário enviados em um formulário de contato incluem as informações que um usuário insere nos campos do formulário ao enviá-lo.

• Todos os dados do formulário são armazenados e acessíveis a partir do Envios formais página do estúdio. Saiba Mais.
• Todos os dados enviados através do formulário de contato também serão encaminhados para o ID de e-mail especificado nas configurações do formulário de contato. Seu endereço de e-mail da conta é tomado como padrão.
  Verifique também: Alterar endereço de e-mail da conta.

---

Notificações por e-mail

A partir daqui, você pode personalizar o assunto do e-mail para as notificações que você recebe como proprietário de um site após o envio bem-sucedido de um formulário. Além disso, você pode personalizar o e-mail de sucesso enviado aos usuários ou clientes após eles enviarem o formulário. Esse recurso pode ser aproveitado para branding, marketing e execução de campanhas de forma eficaz.

1. E-mail para o proprietário do site: Habilite ou desabilite notificações por e-mail para envios de formulários. Quando habilitado, as notificações serão enviadas para os endereços de e-mail especificados.
2. Assunto: Personalize a linha de assunto do e-mail. Use o {SITE} variável para incluir dinamicamente o nome do site no assunto. Isso é útil quando você tem vários sites.
3.  Email: Especifique até 5 endereços de e-mail para receber notificações quando o formulário for enviado.

• Especifique o Assunto do e-mail de envio do formulário de contato. Você também pode incluir {SITE} variável para incluir o nome do site.

E-mail para o cliente

• Você pode ativar E-mail para o cliente (1) para enviar um e-mail sobre o sucesso do envio do formulário.
• Especifique o Assunto (2) do correio.
• Especifique o conteúdo dentro do e-mail de Mensagem de sucesso (3).

---

Exemplo ao Vivo

Aqui está um formulário de contato pop-up ao vivo: 

Veja um site de demonstração ao vivo. 

Aqui está um formulário de contato em linha ao vivo: 

Veja um site de demonstração ao vivo. 

---

Artigos relacionados:

• Seção Formas de Pagamento
• Adicionar página de contato
• Seção de boletim informativo