• CANALWP
  • CATEGORIAS
    • Guia do Iniciante
    • Tutoriais WordPress
    • Plugins WordPress
    • Códigos & Truques
    • Showcase WordPress
    • Tutorial WooCommerce
  • HOSPEDAGEM
    • Hospedagem WordPress
    • Hospedagem Gerenciada
  • SERVIÇOS WP
  • FERRAMENTAS
CanalWP / Tutoriais WordPress / Como Criar Formulário de Contato com Várias Etapas no WordPress

Tutoriais WordPress

Como Criar Formulário de Contato com Várias Etapas no WordPress

6 de Janeiro/18 Sendy Lago 6 Comentários

Como Criar Formulario de Contato com Varias Etapas no WordPress

Sabe quando precisamos adicionar um formulário em nosso site para recolher informações importantes do cliente e então enviar um e-mail? Pois é, uma das formas de fazer isso você já aprendeu aqui no CanalWP no post Como Criar um Formulário de Contato no WordPress.

Entretanto, você vai concordar comigo, que um formulário de contato padrão é muito “engessado”. Assim, ter um formulário de contato para orçamentos on-line, que trabalhe de forma lúdica e dinâmica é muito mais interessante. Pois nossos visitantes e clientes o preencherão de forma mais rápida e com satisfação.

Pensando na usabilidade e dinâmica fluida que um site deve ter, hoje você vai aprender a criar um formulário de contato com passo a passo no WordPress. E detalhe: vamos utilizar um plugin totalmente grátis!

Índice de Conteúdo

  • Formulário de Contato Várias Etapas no WordPress
    • O que são Várias Etapas?
    • Multi Step Form
    • Criando Formulário em Etapas
      • Criando Etapas do Formulário
    • Detalhes de Envio do Formulário
    • Configurações Gerais
    • Adicionando Formulário a uma Página
    • Conclusão

Formulário de Contato Várias Etapas no WordPress

O que são Várias Etapas?

Para que você entenda a solução que estou propondo aqui – e que daqui a pouco você aprenderá para aplicar em seu site, vou te explicar tudo.

Pense comigo, quando precisamos preencher um formulário on-line e ele possui diversos campos, logo ficamos cansados daquilo e muitas vezes desistimos, não completando o envio. Pois quanto mais campos um formulário possui, maior é a preguiça – e também falta de tempo, para preenchê-lo.

Então, uma forma muito inteligente é dividir o mesmo em etapas. Onde cada etapa terá input, checkbox e áreas de texto, tornando o processo mais fluido e interessante para quem está preenchendo o formulário.

Multi Step Form

Crie Formulario de Contato Com Passo a Passo no WordPress - Multi Step Form

O Multi Step Form é um plugin WordPress capaz de deixar os formulários do seu site muito mais interessantes. Essa ferramenta permite que você crie formulários de contato com rapidez e agilidade, utilizando de movimentos drag & drop (arrastar e soltar) e ainda integre os mesmos em qualquer página, post ou área do seu site com o uso de shortcodes.

Criando formulário verdadeiramente guiado para visitantes e clientes, o Multi Step Form trabalha de forma dinâmica, exibindo uma barra de progresso animada, permitindo a criação de etapas e diferentes seções para organizar os campos do formulário.

Baixar Demo | Hospedagem

Criando Formulário em Etapas

Agora que você já sabe um pouco sobre o plugin que utilizaremos, vamos para a criação do nosso formulário de contato em várias etapas no WordPress. Você vai ver que com o plugin Multi Step Form, essa tarefa será bastante intuitiva e simples. Então, vamos adiante!

Busque na barra de menus do seu Painel WordPress, o menu Multi Step Form e acesse Add New para criar um novo formulário com várias etapas (Multi Step Form > Add New).

Crie Formulario de Contato Com Passo a Passo no WordPress - Menu para adicionar novo formulario

Assim que a página para a criação do nosso formulário estiver aberta e carregada, você encontrará diversas opções de personalização e implementação.

Crie Formulario de Contato Com Passo a Passo no WordPress - Area de criacao do formulario com passo a passo

A esquerda nós encontramos elementos que podemos utilizar para construir formulários – como text fields, selects, radio buttons, textarea, date, email e também um elemento para parágrafos, o paragraph. Do lado direito encontramos a área de construção do formulário – onde podemos adicionar título, headline, descrição, adicionar seções e etapas.

Criando Etapas do Formulário

Nós vamos criar como exemplo para este tutorial, um formulário que estará dividido em 3 etapas. No entanto, comece definindo um Nome para identificar o nosso formulário.

Crie Formulario de Contato Com Passo a Passo no WordPress - Definindo nome para identificar o formulario

Depois, já na Etapa 1 – indicado pelo número acima de cada etapa do formulário, quero que você adicione um título referente a esta etapa especifica.

Crie Formulario de Contato Com Passo a Passo no WordPress - Configurando Passo ou Etapa 1

Prossiga arrastando e soltando 2 text fields e um elemento email dentro da section.

Crie Formulario de Contato Com Passo a Passo no WordPress - Adicionando Elementos a secao do Passo 1

Assim que você adicionar um elemento, é necessário que você adicione um título. Ex: Nome completo ou E-mail. Esses labels serão exibidos aos usuários, indicando quais informações cada campo deve receber. Marque o checbok required para tornar um ou mais campos obrigatórios, não permitindo passar para o passo seguinte sem o preenchimento de determinado campo.

Agora que já criamos e configuramos os elementos da Etapa 1, clique no botão + Add Step – localizado no final da página, para criar a Etapa 2.

Crie Formulario de Contato Com Passo a Passo no WordPress - Adicionando novo Passo ou Etapa

Aqui o processo é o mesmo que fizemos antes, definir título, arrastar e soltar elementos e definir os labels para cada campo.

Vou adicionar um único elemento para o Passo 2, adicionarei uma Textarea (área de texto). Esse tipo de elemento é indicado para receber textos. Então, vou utilizá-la para obter mais informações sobre o que o visitante do meu site precisa, por exemplo. Estarei pedindo que ele digite nesse campo, qual a sua dúvida.

Crie Formulario de Contato Com Passo a Passo no WordPress - Configuracoes Importantes de Recebimento dos Formularios

Ah! Caso você tenha alguma dificuldade em arrastar e soltar os elementos dentro do formulário, você pode clicar no botão + Add Element, que fica dentro de cada seção de uma etapa.

Crie Formulario de Contato Com Passo a Passo no WordPress - Adicionando Elemento Textarea

Após clicar no botão para adicionar um elemento, um popup será exibido. Adicione uma textarea para continuarmos na construção do nosso formulário, clicando no determinado elemento.

Crie Formulario de Contato Com Passo a Passo no WordPress - Textarea para duvidas

Depois de definir um label (rótulo) para a nossa textarea, vamos partir para a criação da Etapa 3.

Clique em + Add Step para adicionarmos a Etapa 3 – esta será a última etapa do nosso formulário.

Na Etapa 3 nós vamos pedir que o usuário avalie o nosso site. Então, adicione um elemento do tipo radio/checkbox ao formulário.

Crie Formulario de Contato Com Passo a Passo no WordPress - Adicionando Elemento Radio button ou Checkbox

Clique em + Add option para adicionar mais opções e a cada uma delas, digite um título.

Crie Formulario de Contato Com Passo a Passo no WordPress - Configurando Elemento Radio button ou Checkbox

Observe que se você clicar em Multiple Selection estará permitindo, que os visitantes marquem mais do que uma opção.

E para este exemplo, nós não queremos isso. Então deixe o Multiple Selection desmarcado!

Crie Formulario de Contato Com Passo a Passo no WordPress - Salvar

Com todas as etapas montadas e configuradas com diferentes elementos, clique no botão SALVAR.

Detalhes de Envio do Formulário

Após criarmos nosso formulário dividido em etapas, precisaremos configurar detalhes importantes sobre o envio do mesmo.

Ainda na área de criação do formulário, altere para a aba Form settings.

Crie Formulario de Contato Com Passo a Passo no WordPress - Configuracoes Importantes de Recebimento dos Formularios

No primeiro campo de informações, você deve fornecer uma URL de destino, ou seja, o endereço da página para onde o usuário será redirecionado após o envio do formulário. Essa configuração é opcional, então se você preferir manter o visitante na mesma página, exibindo apenas uma mensagem de sucesso, deixe o campo em branco.

Os demais campos são referentes as configurações do e-mail. Aqui você deve informar qual o endereço de e-mail (Send emails To) que receberá os formulários de contato, bem como o assunto (Subject) e cabeçalho (Email Header) para o mesmo.

Clique em SALVAR para gravar todas as configurações.

Observação: para cada formulário dividido em etapas que você criar, é necessário configurar as informações e campos que acabamos de ver.

Configurações Gerais

Para definir o formato dos e-mails enviados através do formulário, regras de estilo, exibição da barra de progresso e outras opções, é necessário acessarmos a página de Configurações Gerais do plugin Multi Step Form. Assim, acesse Configurações > Multi Step Form.

Assim que a página de configurações for exibida, você encontrará 2 abas diferentes. A primeira – e que já estará sendo mostrada a você, é a de Configurações Básicas (Basic Settings).

Crie Formulario de Contato Com Passo a Passo no WordPress - Configuracoes Basicas

Nesta área você pode escolher se deseja que os e-mails sejam enviados em formato HTML ou Plain Text.

Depois, em  Summary você deve escolher se deseja exibir ou não, um resumo completo sobre todas as informações e etapas preenchidas, no final de cada formulário.

Em CC você apenas deve marcar o checkbox, se quer enviar um cópia do e-mail para o usuário que o preencheu.

Finalize as Configurações Básicas clicando no botão Salvar alterações.

Clicando na segunda aba (Styling) contida nesta mesma página, nós encontramos opções para definição de regras de estilo para o nosso formulário.

Crie Formulario de Contato Com Passo a Passo no WordPress - Configuracoes de Estilo

Marcando a opção Progress Bar – você escolhe exibir uma barra de progresso, que vai de etapa em etapa, para seus usuários.

Em Boxed Layout você tem a possibilidade de escolher se o formulário deve apresentar um visual estilo boxed ou não.

As demais configurações estão disponíveis para que você escolha: Cor da Etapa/Passo ativo (Active Step Color), Cor da Etapa/Passo visitado (Visited Step Color), Cor da próxima Etapa/Passo (Next Step Color) e por último, a Cor dos Botões (Button Color).

Configurando todas as opções da forma desejada, clique em Salvar alterações.

Adicionando Formulário a uma Página

Já criamos o formulário dividido em etapas e também realizamos todas as configurações necessárias – gerais e específicas. O que falta agora é adicionar nosso formulário a uma página! Não é mesmo?!

Acesse a lista de formulários através do menu Multi Step Form. Você vai encontrar o formulário que criamos e também a shortcode que iremos utilizar para adicioná-lo a uma página, post ou em qualquer área do site ou arquivo de um tema.

 

Crie Formulario de Contato Com Passo a Passo no WordPress - Shortcode do Formulario

Copie a shortcode do nosso formulário e cole dentro de uma página ou post. Salve a página e depois visualize-a para ver o resultado do trabalho de criar formulário em passo a passo com o plugin Multi Step Form. O nosso ficou assim:

Crie Formulario de Contato Com Passo a Passo no WordPress - Exibindo Formulario Passo a Passo

Para traduzir textos de botões e demais informações exibidas no formulário, você pode conferir o plugin que recomendo e ensino como utilizar no post Como Traduzir Temas e Plugins WordPress Direto da Dashboard.

Conclusão

Tornar possível o preenchimento de formulários de contato, cotações e orçamentos de uma forma leve e dinâmica, faz com que nossos visitantes e clientes não fiquem entediados ou chateados com o processo. Pelo contrário, você verá que com o plugin Multi Step Form os formulários em passo a passo divididos em etapas irão fazer com que você receba cada vez mais, mensagens de contato.

Aliar visual e usabilidade é imprescindível para conquistar resultados e visitantes mais satisfeitos e felizes. Assim, recomendo o plugin Multi Step Form para a criação de formulários passo a passo para qualquer tipo de site ou loja.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.



Sendy Lago

Trabalha com desenvolvimento WEB há mais de 6 anos, é especialista em WordPress e WooCommerce. Nômade Digital na prática, está sempre em busca de novos desafios, como programar para Android e iOS. Em seu Macbook você encontra séries, cursos, jogos, documentários e filmes. Enfim, geminiana nata.

  • Facebook
  • Google+

Comentários

avatar
2000
Se o seu problema requer que verifiquemos o seu site ou uma página especifica, adicione a sua URL completa nesse campo. (Não é obrigatório)
avatar
2000

Novos Antigos
Asafe Gois
Visitante
Asafe Gois

Olá estou precisando criar um formulário em que o clientes selecione alguns produtos e automaticamente o formulário da o valor calculado, Queria saber se algum de vocês tem alguma ideia de como posso fazer isso.

Responder
31 de Janeiro/18 11:44
Emerson Machado
Visitante
Emerson Machado

O problema é que isso basicamente não serve pra muita coisa. Eu preciso de um formulário que faça perguntas conforme respostas anteriores do cliente. Por exemplo, ao ele escolher “Pessoa Física”, apareceria um campo de “CPF”. :(

Responder
18 de setembro/17 16:10
| Respostas (1)
Rafaela
Visitante
Rafaela

E como faz para ter as respostas? Só via e-mail mesmo? Não há possibilidade de baixar alguma lista?

Responder
13 de setembro/17 11:23
Mauricio
Visitante
Mauricio

Olá Sendy,

Muito Bacana esse formulário em etapas. Eu já havia visto no repositório e seu tutorial foi muito bom na hora de configurar o plugin.

O Multi Step Form não precisa de anti spam ou recaptcha?

Se sim, como habilitar?

Gratidão

Responder
14 de junho/17 10:10
Elcy Alves
Visitante
Elcy Alves

Adoro o trabalho de vocês! Continuem sempre assim! Estou recomendando o site de vocês a uma comunidade de amigos aqui para estudarem… Vocês são demais!!!

Responder
22 de Maio/17 13:22

Newsletter

Receba artigos sobre WordPress diretamente em seu email.

Guias WordPress

  • 1
    WordPress, por que é grátis? Quais os Custos e Segredos?
  • 2
    Como Mover seu Blog WordPress.com para o WordPress.org
  • 3
    Como Resolver o Erro Interno de Servidor no WordPress
  • 4
    Como Gerenciar Senhas no WordPress para Iniciantes
  • 5
    Aprenda Como Escolher a Melhor Hospedagem WordPress
  • 6
    Veja Como Criar um Blog WordPress em 15 Minutos
Mais Guias

Tutoriais WordPress

  • 1
    Como Instalar e Configurar o WordPress SEO Plugin by Yoast
  • 2
    Como Adicionar e Configurar Notificações Push no WordPress
  • 3
    Como Instalar e Configurar o WP Super Cache Plugin
  • 4
    Guia Completo de Como Usar MailChimp no WordPress
  • 5
    Como Instalar e Configurar o WooCommerce
  • 6
    Google Accelerated Mobile Pages no WordPress
Mais Tutoriais
anúncio
Como Criar Blog WordPress

Como Criar um Blog WordPress

Veja como criar seu blog WordPress com nosso tutorial passo a passo.

Criar Meu Blog

anúncio

Hospedagem WordPress Hostinger

Sobre o CanalWP

CanalWP é um recurso online com focus em tutoriais WordPress, guias, plugins, temas e muito mais.

Fundado por Gabriel Galvão, o objetivo do CanalWP é fornecer recursos de alta qualidade e atualizados sobre WordPress.

Categorias

  • Guias WordPress
  • Tutoriais WordPress
  • Tutoriais WooCommerce
  • Showcase WordPress
  • Plugins WordPress

Links Úteis

  • Ferramentas WordPress
  • Hospedagem WordPress
  • Hospedagem Gerenciada
  • Serviços WordPress
  • Termos
  • Politica
  • Contato

Copyright © 2018 · CanalWP - Todos os Direitos Reservados

↑
  • CANALWP
  • CATEGORIAS
    • Guia do Iniciante
    • Tutoriais WordPress
    • Plugins WordPress
    • Códigos & Truques
    • Showcase WordPress
    • Tutorial WooCommerce
  • HOSPEDAGEM
    • Hospedagem WordPress
    • Hospedagem Gerenciada
  • SERVIÇOS WP
  • FERRAMENTAS