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:
-
- Adicionando seção de contato a uma página
- Gerenciar formulário de contato
- Conteúdo do Formulário de Contato
- Gerenciando campos de formulário
- Tipos de Campos
- Formulário embutido e formulário pop-up
- Gerenciar layout
- Formulário de contato de estilo
- Configurações do formulário de contato
- Redirecionar formulário para outra página
- Exportar dados de formulário
- Notificações por e-mail
- Dados do formulário enviado
- 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.
Gerenciar formulário de contato
- Clique em Editar conteúdo (1) botão.
- Você terá a opção de gerenciar Conteúdo (2) traçado (3) Sessão de Fotos (4) Configurações (5), e Notificações por e-mail (6).
- Acertar Economize (7) para aplicar as alterações ao formulário.
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.
Gerenciar campos de formulário
Em Gerenciar campos de formulário, você pode especificar os campos que deseja que os visitantes preencham neste formulário.
- Clique em Adicionar Novo Campo (1) botão para adicionar mais campos ao seu formulário.
- Editar ou excluir (2) um campo já adicionado.
- Arrastar e soltar (3) os campos para alterar sua sequência no formulário.
- Colocou o Rótulo do botão de chamada à ação (4) para o formulário.
O campo e-mail é obrigatório no formulário e não pode ser deletado.
Ao clicar no + Adicionar Campo botão um pop-up será aberto de onde você pode escolher seus campos de formulário.
- Capture o nome do seu cliente.
- Capture qualquer pequena informação através do Pequeno texto campo.
- Capture qualquer informação/mensagem elaborada através do Texto Longo campo.
- Capture o E-mail do seu cliente.
- Capture qualquer informação numérica do seu cliente.
- Adicione serviços para escolher em um suspensa maneira.
- Seleção única: Adicione uma seleção de rádio para seus serviços.
- Seleção Múltipla: Adicione um campo de caixa de seleção para várias seleções.
- Adicionar uma selecionador de data para que seus clientes possam escolher uma data para qualquer evento.
- Adicionar uma linha entre os campos do formulário.
- Capture o endereço do seu cliente.
- Capture o site do produto do seu cliente.
- Capture o telefone número do seu cliente.
- Adicionar uma tempo campo para que seus clientes possam especificar a hora do evento.
- Adicionar uma separator entre os campos do formulário.
- O campo de consentimento opção pode ser usada para obter permissões para newsletters, aceitando privacidade e termos de uso.
- Faça avaliações de clientes usando o estrela escada, escala numérica e escala sorridente.
- Ao adicionar determinados campos, você tem a opção de escolher a largura entre Full, Half e One Third
- Você também pode optar por exibir os campos lado a lado, escolhendo a opção Metade ou Um terço
Estilo de Formulário
- Exibir formulário como janela pop-up – Ative esta opção para abrir o formulário em uma janela pop-up ao clicar no botão de chamada para ação.
- Rótulo do botão de chamada para ação – Defina o Rótulo do botão de chamada à ação para o formulário.
- Pop-up de título – Especifique o formulário Título, caso existam.
- Carregar ou Excluir (1) a imagem do formulário.
- Adicionar uma Título (2), e Descrição (3) para o formulário. Antes de adicionar a descrição, verifique esse artigo.
NEW Manchete
- NEW Manchete – Especifique o Título da Seção (1) para a seção Formulário de Pagamento.
- Botões e ícones – Saiba mais sobre Botões e Ícones (2).
Gerenciando o layout
- Clique em Editar conteúdo (1) botão.
- Escolha o traçado (2) aba.
- Selecione os traçado para sua seção (3) e Economize (4) as mudanças.
Alterar o layout aplicará o estilo padrão do formulário.
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 .
- 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.
- Preencher: Ative esta alternância para aplicar uma cor de preenchimento de fundo aos campos do formulário.
- Cor base: Defina a cor de fundo dos campos quando a opção de preenchimento estiver habilitada.
- Esboço: Ative ou desative a borda (contorno) para cada campo.
- Cor do contorno: Escolha a cor da borda do campo quando o contorno estiver habilitado.
- Cor do texto do campo: Defina a cor do texto digitado pelos usuários dentro dos campos do formulário.
- Altura: Ajuste a altura dos seus campos escolhendo entre: Pequeno, Médio, Grande ou Extra Grande.
- Rótulos: Escolha se os rótulos dos campos do formulário aparecem dentro ou fora do campo.
- Cor da Etiqueta: Defina a cor dos rótulos quando colocados fora do campo.
- Cor interna da etiqueta: Defina a cor dos rótulos colocados dentro do campo (útil para rótulos no estilo de espaço reservado).
- 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
- Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
- Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
- Colocou o espessura do divisor (em pixels).
- Especifique o Cor Divisória do seletor de cores.
- Escolher Estilo Divisor da lista suspensa.
- 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%.
- Especifique o Espaço abaixo do título dentro da seção (em px).
Imagens
- 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.
- 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.
- 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.
- Estilo de Animação: Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.
- 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.
- 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.
Com o raio de canto campo, você pode criar diferentes formas de imagens de itens de lista. Caso você especifique 500 px aqui, as imagens serão exibidas em forma de círculo.
- Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.
Borda da imagem
- Ativar/desativar borda ao redor da imagem alternando o botão.
- Escolha ter um fronteira comum em todos os lados da imagem ou você pode especificar o fronteiras separadamente para cada lado.
- 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.
- Selecione os Cor da margem do seletor de cores.
- Selecione um preferido Estilo da Borda da lista suspensa.
- 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.
- Tamanho do botão - Selecione o tamanho do botão entre opções como pequeno, médio ou grande.
- Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (em porcentagem).
- Estilo do botão - Escolha o estilo do botão, como padrão ou personalizado.
- Cor do botao - Selecione o estilo de cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
- Texto do botão – Personalize a cor do texto do botão.
- 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.
- Tamanho do botão - Selecione o tamanho do botão (Pequeno, Médio ou Grande).
- Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (especificado em porcentagem).
- Estilo do botão - Escolha o estilo geral do botão, como Padrão ou Personalizado.
- Cor do botao - Defina o estilo da cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
- Texto do botão – Personalize a cor do texto exibido no botão.
- Fundo do botão – Selecione uma cor de fundo para o botão.
- Alinhamento de botões – Escolha o alinhamento do botão (Esquerda, Centro ou Direita).
- 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.
- Tamanho do botão - Selecione o tamanho geral dos botões (Pequeno, Médio ou Grande).
- Espaço entre botões – Ajuste o espaçamento entre vários botões (medido em vw).
- Espaço acima dos botões – Defina o espaçamento vertical acima dos botões (medido em porcentagem).
- Largura do botão – Escolha a largura dos botões. As opções incluem Padrão, Grande, Extra Grande e Largura Total.
- Tamanho do link de texto – Especifique o tamanho da fonte dos links de texto associados aos botões (medido em px).
- 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.
- Tamanho do ícone – Ajuste o tamanho dos ícones sociais (medido em px).
- Tipo de ícone – Escolha o estilo dos ícones, como as opções Clássico, Sólido ou Contorno.
- 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).
- 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
- Clique no Editar conteúdo (1) botão.
- Personalize as configurações do formulário a partir de Configurações (2) aba e Economize (3) suas mudanças.
Nome do formulario
- Digite um nome para Identifique o formulário de contato. No Pixpa Studio. Este nome não é visível para os visitantes do site.
Ação pós-envio
Como ação pós-envio, você pode optar por Exibir mensagem de sucesso (1) ou Redirecionar para URL (2).
No caso de Exibir mensagem de sucesso (1)
- Especifique o Mensagem de sucesso (2) que é exibida após o usuário enviar o formulário.
- Você também pode adicionar qualquer script no sucesso pós-pagamento HTML (3) caixa.
- No caso de Rredirecionar para URL, você pode especificar qualquer página interna/externa clicando no ícone de configurações (⚙️). Saiba mais.
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.
Sincronizar e exportar dados de formulário
- Enviar dados do formulário para Make.com. Saiba Mais.
- Enviar dados do formulário para Zapier.com. Saiba Mais.
- Exportar dados do formulário como um arquivo CSV. Saiba Mais.
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.
- 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.
- 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.
- Email: Especifique até 3 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).
- O e-mail para o cliente é um recurso premium disponível apenas em Profissional e Avançado planos. Saiba Mais.
- Personalize o conteúdo do e-mail com cuidado para garantir uma experiência de comunicação consistente e profissional com seus clientes.
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.
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.
Para reduzir spammers no formulário, a segurança captcha do Google é ativada automaticamente em seu formulário.