Adicione um Formulário de Contato do Wix App Market

O Wix App Market oferece recursos muito úteis e interessantes, dentre eles, a opção de adicionar um formulário de contato através do aplicativo “123ContactForm“.

Já que o formulário do construtor Wix é muito limitado, não possibilitando nem que o usuário edite os campos do formulário que aliás estão em inglês, fiz um passo-a-passo onde você aprenderá como adicionar um formulário utilizando a versão Grátis do 123ContactForm!

Clique aqui para ver um exemplo de formulário 123ContactForm.

Veja outro aqui (navegue até o formulário Orçamento).

Mãos à obra!

Acesse sua conta no Wix, selecione o site que deseja editar e clique em “Gerenciar e Editar“, depois clique novamente em “Editar“.

Agora você precisa selecionar a página na qual deseja inserir o formulário, geralmente são as páginas do tipo “Fale Conosco, Contato etc…”.

Em seguida, clique na botão “App Market“, selecione “Formulários” e clique no aplicativo “123FormBulder“:

123

Na janela que abrir, clique no botão, “Adicionar ao Site“:

123

O formulário será adicionado a página que você escolheu.

formulário

Agora vamos configurá-lo para torná-lo mais profissional e com melhor aparência.

Clique sobre o formulário e selecione a opção “Configurações do App”.

Na janela que abrir, clique no link “Create one” para criar um conta no aplicativo:

formulário

Na próxima janela será necessário informar seus dados de cadastro:

Cadastro

Ou você pode se inscrever usando seu perfil do Google, facebook e outros (recomendo esta opção por ser mais prática).

Redes

Ao fazer o Login, você verá um tela como esta:

Contato

Observe o seu nome de Login em negrito (no caso, criarsitewix).

Agora clique em “My Forms“, surgirá um pequeno painel administrativo, onde será possível configurar todo o formulário.

Clique no botão “New Form“:

Form

Em seguida, escolha a primeira opção “Contact Form“:

Contact

Insira um nome para o formulário:

Formulário

Na próxima janela, será possível editar os campos do formulário.

Vamos começar pelo cabeçalho. Clique sobre ele e em seguida clique no link “Edit Headline“:

Form

Faça as alterações que achar necessário e clique em “Save“:

Formulário

Da mesma forma para editar um campo, clique sobre ele e realize as configurações:

Form

As opções são:

Campos

Field Type – tipo de campo (texto, numérico, email etc).

Label – Nome do campo.

Field Size – Largura do campo.

Field Validation – Tipo de validação que o campo será submetido quando for preenchido, ou seja, se for um campo “email” por exemplo, ele só aceitará quando for inserido um email válido.

Options:

Required – campo obrigatório.

Password Field – campo senha (válido apenas para premium).

Compact Field – o nome do campo fica dentro espaço de preenchimento.

Hidden – oculta o campo.

Instructions – Uma mensagem, aviso ou texto no campo.

Estas opções são válidas para a maioria dos outros tipos de campos, faça as alterações que achar necessário e automaticamente o formulário será salvo e atualizado na página.

Você também pode inserir gratuitamente novos campos através da opção “Add Field“:

Novos campos

Clique sobre o tipo de campo desejado e ele será adicionado no formulário, para mudar um campo de posição, clique sobre ele e arraste-o até o local que desejar.

Configurações Avançadas

Após editar os campos do formulário, clique no menu “Form Settings“.

OBS: Por ser uma conta grátis, não é possível adicionar mais emails ou excluir o email existente, só é possível SUBSTITUIR o email que vai por padrão na conta do aplicativo.

Em “Notification Emails“, clique sobre o campo onde está o email cadastrado para receber as mensagens (submissions):

contatos

Na janela seguinte, altere o email que está no campo “Send notification to” para o email que deseja receber as mensagens enviadas pelos usuários.

contatos

Por fim, clique em “Edit notification” para concluir este processo.

Feito isto, navegue até a opção “Confirmation Settings” e selecione “Show Text“, em seguida adicione um texto que será exibido ao usuário assim que a mensagem for enviada (ver imagem abaixo):

Mensagem

Feito isto, desmarque a opção “Send a confirmation message to the sender (autoresponder)“:

Enviar

Esta opção envia um email de confirmação em inglês, para configurá-lo é necessário ter uma conta premium.

Mais abaixo você encontrará as opções de customizar email (Customize Emails):

CustomizeEm Sender Name, insira o assunto que irá no email que será enviado a você quando um cliente/usuário entrar em contato.

Select field – Email ( seu email virá como remetente, sendo mais fácil identificá-lo).

Outro campo que é importante modificar é o Message Subject, insira aqui um nome que identifique que a mensagem vem do site, que é um novo contato de cliente.

Ao lado deste campo, escolha outra identificação personalizada. Ex: Assunto da Mensagem + email do contato; Assunto da Mensagem + Nome do contato etc…

contato

Feita todas as alterações, clique em “Save” e feche esta janela.

Para que possa entender o resultado desta configuração do “Customize Email“, veja o que aparece quando um contato é enviado ao email cadastrado, utilizando as configurações acima:

Email

Como estilar o formulário

Para aplicar cores e fontes personalizados, escolha um estilo pré-configurado e clique na opção “customize“:

contato

Na janela que abrir, renomeie o estilo e em seguida, escolhas suas configurações personalizadas:

Contatos no Wix

Quando terminar, clique em “Save & Return” para gravar e ver o resultado.

Clique aqui para ver um exemplo de formulário 123ContactForm ( navegue até o formulário ORÇAMENTO).

É isso!

12 comentários em “Adicione um Formulário de Contato do Wix App Market”

  1. Bom dia.
    Preciso fazer um formulário de orçamento onde antes do cliente ENVIAR, ele tem que imprimir uma cópia do orçamento que ele está pedindo. Tem como fazer isso?

    Responder
  2. Boa tarde.
    Obrigado pelos ensinamentos para personalizar o 123 form buider. Fiz a personalização do formulario para agendamento de visitas. O problema é que ao final do preenchimento e envio, aparece a quela mensagem padrão de agradecimento, contudo não há maneira de o cliente enviar outros agendamentos, por que a mensagem fica aparecendo e não volta para o formulário. Tem como resolver isso?
    Além disso, o cliente recebe uma mensagem do vcita que eu gostaria que ele não recebesse. Eu também recebo, não entendo o por que já que vai para uma página (a do vcita) que não tem sentido nenhum o cliente acessar…. queria que não houvesse integração nenhuma com o vcita.

    Responder
    • Olá Maria Fernanda,
      Para personalizar o campo de agradecimento, vá no painel do 123 Form Builer e depois clique em “Personalizar formulário”. Uma nova janela se abrirá, depois vá na guia ‘Configurações>>Notificações’ e role a página até o final. Lá tem as opções de ‘página de agradecimento’. Configure o redirecionamento que desejar.
      Sobre o Vcita, não sei dizer o que é, pois o 123 Form não tem ligação com o Vcita.
      Abraço.

      Responder
    • Olá amigo,
      Sim, é possível inserir um link de impressão. Basta ir em “Personalizar Formulário>>Configurações>>Avançado” e em ‘Outro’, marcar ‘Adicionar botão imprimir’.
      Abç.

      Responder
  3. Boa Noite!
    Consigo usar este app para fazer um banco de dados dos nossos clientes? onde eu possa ter armazenado informações como data de aniversário, endereço, dados gerais do cliente.
    Caso positivo é possível eu fazer alguma edição se necessário.
    Desde já agradeço a atenção.
    Marcelo

    Responder
    • Olá Marcelo,
      Quanto a fazer a edição de dados não tenho certeza. Mas as demais informações o formulário captura sim, basta configurar.
      Abraço.

      Responder
  4. EXCELENTE O TUTORIAL! AGORA, O QUESTIONO, É POSSÍVEL LINKAR A UMA BASE DE DADOS? QUAL O PROCEDIMENTO PARA QUE ESTAS RESPOSTAS SEJAM DIRECIONADAS PARA TAL BASE? ABÇS!

    Responder
    • Olá José,
      Os contatos ficam armazenados na conta do usuário no site da 123contactform. Basta fazer o login e acessar a base de dados. Os contatos ficam na guia “Users” do seu painel de controle.

      Abraço!

      Responder
  5. Olá, tudo bem?
    Esse formulário me serve caso eu queira fazer um formulário para impressão de boleto? Mesmo que eu pague o premium e tenha um link com um banco, que é o caso. Caso não tenha como, você tem como me orientar para eu utilizar esse recurso ( formulário de impressão de boleto) em um site wix?

    Responder
    • Oi Danielle, como vai?
      Bom, esse aplicativo possui diversos tipos de formulários, tem templates e-commerce, marketing, vendas, atendimento ao cliente etc. Não encontrei um formulário para impressão de boleto, esse tipo de aplicação é complexo mesmo e precisa ser criado.

      Bom, tem empresas que geram boletos, como esta: Cobregratis.
      Acho que o pagseguro também tem um serviço de boletos, mas não sei como funciona.
      Bem, espero que tenha ajudado.
      Fique a vontade para novos comentários!

      Grande abraço!

      Responder

Deixe um comentário