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

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.

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).

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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!

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.

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).

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.

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.

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:

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.