Como adicionar formulários de contato usando o plug-in - P2: use WPForms

No artigo anterior da série “Formulário de contato”, aprendemos o que é um formulário de contato e como usar o plugin Contact Form 7. Como prometido, escrevi outro tutorial com WPForms e vou mostrar a você neste artigo.

WPForms é um plugin freemium de arrastar e soltar para formulário de contato com uma visualização em tempo real. Na minha experiência, é fácil e conveniente trabalhar com este plugin.

Você se lembra deste exemplo de formulário de registro universitário que criamos na parte 1 desta série? Agora, vamos criar o mesmo com WPForms.

Etapa 1: instalar e ativar o plug-in WPForms

Este plugin tem uma versão gratuita no wordpress.org, então você só precisa instalar e ativar o plugin direto no painel de administração .

Contact Form by WPForms - Drag & Drop Form Builder para WordPress

Autor (es): WPForms

Versão Atual: 1.7.1.2

Última atualização: 18 de novembro de 2021

wpforms-lite.1.7.1.2.zip

98% Classificações 5.000.000+ Instalações WP 4.9+ Requer

Etapa 2: Crie um novo formulário de contato e escolha um modelo

Em seu painel de administração , vá para WPForms > Adicionar novo .

Esta é a interface com a qual você deve trabalhar:

Na barra lateral esquerda, você pode ver 5 seções:

1. Configuração : Dê um nome ao formulário de contato e escolha seu modelo.
2. Campos : adicione e personalize campos para o formulário de contato.
3. Configurações : defina as notificações, confirmações e configurações gerais.
4. Marketing : Link com ferramentas de marketing por e-mail, como Constant Contact, Campaign Monitor, Mailchimp, ...
5. Pagamentos : adicione o pagamento do PayPal Standard, Stripe e Authorize.Net.

Observação : não faço nenhuma campanha de marketing por e-mail e meu formulário não exige informações de pagamento. Portanto, não preciso das seções de Marketing e Pagamentos .

Na seção Configuração , insira o nome do formulário e selecione o modelo desejado.

Existem quatro modelos padrão:

• Formulário de Contato Simples
• Formulário de inscrição no boletim informativo
• Sugestão Para
• Formulário em branco

Excluindo o formulário em branco , outros modelos têm seus próprios campos predefinidos que você pode utilizar para criar formulários de contato com mais rapidez. Além disso, você pode instalar complementos WPForms (disponíveis apenas em versões pagas) para obter mais modelos.

Neste artigo, escolhi o modelo Formulário em Branco para construir um formulário de contato passo a passo desde o início. Isso o ajudará a entender tudo de forma mais fácil e profunda.

Etapa 3: adicionar campos ao formulário de contato

Adicionar Campos

Depois de escolher o modelo de Formulário em Branco na etapa 2, você será movido para a seção Campos .

Para adicionar campos ao seu formulário de contato, arraste os campos desejados da guia Adicionar campos e solte-os no formulário de contato.

Em seguida, para personalizar um campo, clique nele e edite seus parâmetros na guia Opções de campos .

Além disso, você pode excluir ou duplicar um campo passando o mouse sobre ele e clicando nos botões desejados.

Neste artigo, preciso adicionar os seguintes campos:

Depois de adicionar todos esses campos, você precisa personalizar cada campo nas próximas etapas.

Personalize as opções gerais para cada campo

Em geral, existem dois tipos de opção para personalizar cada campo:

Opções básicas : todos os campos contêm essas opções e você deve absolutamente trabalhar com elas para tornar seu formulário de contato claro e compreensível.

• Rótulo : digite o nome do campo que você deseja exibir.
• Descrição : este é o texto exibido abaixo do campo para informar aos usuários o que fazer.
• Obrigatório : é opcional! Marque para que o preenchimento deste campo seja obrigatório.

Nas próximas etapas, quando menciono “informações básicas”, significa que você precisa lidar com essas opções básicas.

Opções avançadas : existem alguns recursos avançados para cada campo. É opcional para você lidar com eles, mas existem algumas coisas importantes que você deve observar:

• Texto de espaço reservado : exibe um texto dentro dos campos antes que os usuários insiram os dados. Esse texto pode ser usado como um guia ou exemplo para ajudar os usuários a entender facilmente o que precisam preencher. Por exemplo, você pode definir o texto do espaço reservado do campo de e-mail como “Digite seu e-mail”.
• Valor padrão : se houver muitas pessoas com a mesma resposta, você pode definir uma resposta padrão para economizar tempo e esforço dos usuários. Por exemplo, você cria um formulário de contato para pessoas que moram em Nova York, para que possa inserir o valor padrão “Nova York” no campo “Local”.
• Classes CSS : insira classes CSS nesta caixa para estilizar o campo. Na próxima etapa, incluirei o código nesta seção para definir o estilo do formulário de contato.

Nota :

• No Formulário de Contato 7, você pode usar o valor padrão como o texto do espaço reservado. Mas é mais conveniente em WPForms porque você tem a seção de texto de espaço reservado separada. Além disso, o WPForms possui a seção Descrição que mostra o texto abaixo do campo. Eu uso essa forma porque faz com que meu formulário de contato tenha uma aparência melhor.

• Você pode clicar no botão de ponto de interrogação ao lado das opções / campos para ler as instruções de WPForms para eles.

Além disso, existem algumas opções diferentes dependendo de cada campo. Vamos descobrir o que são!

Personalize o campo “Seu nome”

Selecione o campo Texto de linha simples e apenas preencha as informações básicas:

Neste campo, existem mais 2 opções na seção Opções avançadas :

• Limite de comprimento : Marque para escolher um limite para o máximo de caracteres que podem ser inseridos no campo.
• Máscara de entrada : insira máscaras de entrada para exigir formatos específicos para o campo. Leia mais detalhes aqui.

Personalize o campo “Seu número de telefone”

Este campo não tem nada de especial. Basta selecionar o campo Números e preencher as informações básicas:

Personalize o campo “Seu e-mail”

Selecione o campo Email e preencha as informações básicas para o campo:

Este campo tem mais uma opção básica: Habilitar confirmação de e-mail . Você pode marcá-lo para pedir aos usuários que forneçam seus endereços de e-mail duas vezes. Isso garante que o e-mail esteja correto.

Personalize os campos “Localização para estudar” e “Principais”

Primeiro, escolha o campo Suspenso . Na seção Opções, insira as opções do campo. Você pode clicar em (+) (-) para adicionar / remover opções.

Além disso, você também pode clicar no botão Adicionar em massa para adicionar várias opções de uma vez. Na caixa Adicionar opções , preencha as opções na ordem desejada (cada opção é uma linha) e clique em Adicionar novas opções .

Além disso, neste campo, existem 2 opções avançadas com as quais você deve se preocupar:

• Estilo : você pode estilizar seu menu suspenso com duas opções: clássico e moderno. O estilo moderno permite que você pesquise por palavras-chave. Portanto, funciona bem em menus com muitas opções (mais de 10 opções).
• Escolhas dinâmicas : permitem que os usuários selecionem opções de tipos de postes ou taxonomias. Por exemplo, se você escolher Fonte de tipo de postagem dinâmica como postagens , cada opção no menu suspenso será uma postagem em seu site.

Personalize o campo “Registrar-se em”

Selecione os campos Caixas de seleção e insira opções como os campos suspensos .

Neste campo, existem 2 opções avançadas com as quais você deve se preocupar:

• Use opções de imagem : você pode usá-lo para ilustrar suas escolhas e tornar seu formulário de contato mais atraente e visualizado.
• Escolhas Aleatórias : Isso pode evitar que as pessoas escolham uma escolha apenas porque é a primeira.

Etapa 4: configurar o formulário de contato

Depois de criar um formulário de contato, precisamos configurá-lo. Na versão gratuita do WPForms, você pode configurar três seções abaixo:

Definir as configurações gerais

O plugin WPForms tem instruções específicas para cada opção nesta parte. Você deve clicar no botão do ponto de interrogação, lê-lo com atenção e prestar atenção a estes campos:

• Texto do botão Enviar : No Formulário de contato 7, você deve criar o campo Enviar . Mas em WPForms, o botão de envio está embutido. Você pode alterar o texto deste botão nesta seção para o que quiser, como Registrar para, Enviar e-mail, ...
• Habilite a proteção anti-spam : às vezes, os spammers podem incomodá-lo por meio de toneladas de “forma de lixo”. Nesse caso, você deve ativar esse recurso de anti-spam.

Configure as notificações

Se você deseja receber uma notificação por e-mail sempre que um usuário enviar um formulário de contato, vá para Configurações > Notificações .

Você pode adicionar “marcas inteligentes” ou texto aos campos nesta seção para gerenciar o e-mail que você recebe quando um usuário envia um formulário de contato com mais facilidade.

Nota : as marcas inteligentes podem adicionar informações às notificações do formulário de contato automaticamente.

Este é um exemplo das minhas configurações:

Configure as confirmações

Na seção Confirmação , você pode configurar as mensagens que os usuários recebem após enviarem os formulários de contato.

Ao terminar todas as configurações, basta clicar em Salvar .

Etapa 5: Exibir o formulário nas páginas / postagens

Para exibir seus formulários em páginas / postagens, existem 2 maneiras.

A primeira maneira é clicar em Incorporar para exibir seu formulário em uma página:

Depois disso, incorpore o formulário de contato em uma nova página ou em uma página existente em seu site.

A segunda maneira é inserir o shortcode do formulário de contato para páginas / posts. Recomendo que você escolha a segunda forma, pois ela pode exibir o formulário de contato tanto nas postagens quanto nas páginas . Para fazer isso, no Painel de administração , vá para WPForms > Todos os formulários , encontre seu formulário de contato e copie seu código de acesso.

Em seguida, cole este shortcode nas postagens / páginas desejadas.

E aqui está o resultado:

Ainda não se parece com o exemplo do formulário de contato, então preciso estilizá-lo um pouco.

Etapa 6: definir o estilo do formulário

No painel de administração , vá para WPForms > Todos os formulários , encontre seu formulário de contato e clique em Editar .

Agora, clique em cada campo, vá para Opções avançadas > Classes CSS e adicione os seguintes valores:

• Seu nome e registro para : ip-100
• Seu número de telefone , e- mail , local para estudar , principal : ip-50

Em seguida, vá para Customizer > Addition CSS , adicione este código:

 .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
		justify-content: space-between
}

.ip-50 {
    largura: 48%! importante;
}

.ip-100 {
		largura: 100%! importante;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	largura máxima: 100%;
}

.ip-100 ul {
	display: flex;
	justify-content: espaço entre;
}

div.wpforms-container-full {
    margem inferior: 24px;
    fundo: #eeeeee;
    preenchimento: 20px;
}

Por fim, clique em Publicar .

E aqui está o resultado final:

O formulário de contato parece melhor agora, não é? Bem, acabamos de terminar as últimas etapas para ter uma forma completamente semelhante à minha amostra.

Últimas palavras

Na minha experiência, usar a interface de arrastar e soltar como em WPForms é mais fácil e rápido do que usar o Formulário de Contato 7. Além disso, possui o botão de envio predefinido e 2 seções mais úteis como Texto de Espaço Reservado e Descrição . A visualização ao vivo também é muito conveniente. Isso me ajuda a detectar erros mais facilmente ao criar e personalizar o formulário.

Para saber como usar mais plug-ins de formulário de contato, siga nosso próximo artigo desta série! Se você tiver alguma dúvida sobre WPForms ou sugerir algum plugin de formulário de contato, fique à vontade para deixá-lo na seção de comentários.