Como adicionar formulários de contato usando o plug-in - P1: Use o formulário de contato 7

O formulário de contato é um dos elementos mais importantes se você deseja ter um site profissional. Nem é difícil criar e configurar um formulário de contato se você usar plug-ins dedicados. Para ajudá-lo a criar formulários de contato com plug-ins de maneira fácil e rápida, compilamos e escrevemos instruções sobre como usar os plug-ins de formulário de contato mais populares.

Na primeira parte da série “Formulário de Contato”, vamos descobrir:

• O que é o formulário de contato?
• Benefícios do formulário de contato
• Como usar o plugin Contact Form 7 para criar um formulário?

O que é o formulário de contato e seus benefícios?

O que é o formulário de contato?

Formulário de contato é um termo familiar aos profissionais de marketing. Usando o formulário de contato, os usuários podem enviar e-mails e contatá-lo diretamente no site, sem saber seu endereço de e-mail.

Um formulário de contato geralmente tem muitos campos para os usuários preencherem as informações necessárias, como e-mail, número de telefone, nome, conteúdo do e-mail, ... Além disso, geralmente é colocado em uma página de contato ou na área onde você precisa obter as informações de contato dos clientes . Aqui está um exemplo:

Benefícios do formulário de contato

Como os usuários podem usar o formulário de contato para enviar informações ao proprietário do site (para deixar seus dados de contato, para enviar solicitações de suporte ou outras solicitações, ...) diretamente naquele site, torna o contato muito mais conveniente e rápido.

Além disso, o uso de um formulário de contato pode manter o seu e-mail privado, bem como reduzir o spam e as ameaças à segurança. Portanto, você não terá que lidar com a caixa de correio cheia de spam e lixo todos os dias.

Além disso, os formulários de contato ajudam a coletar as informações dos usuários com mais facilidade, porque eles precisam preencher as informações solicitadas no formulário. Essa é uma das estratégias para conseguir mais leads.

Em geral, para construir um site profissional e obter mais benefícios para o seu negócio, você deve usar os formulários de contato.

Como criar um formulário de contato

Você pode codificar para criar campos e formulários como quiser. No entanto, se você não for um programador, isso não é possível. Ou você tem que pagar uma quantia em dinheiro contratando um codificador para fazer isso.

Conseqüentemente, a solução mais útil para criar formulários de contato para usuários não técnicos, ou mesmo desenvolvedores (para economizar tempo e esforço), é usar um plugin. Agora, existem muitos plug-ins de formulário de contato que são simples, fáceis, rápidos e gratuitos. Então, não há motivo para não usá-los para criar um formulário de contato, certo?

Em todos os artigos desta série, mostrarei como criar um formulário de registro universitário da seguinte maneira:

Criar um formulário usando o formulário de contato 7

Neste primeiro artigo da série “Criar formulário de contato usando plug-ins”, utilizo o formulário de contato 7 - um dos plug-ins de formulário de contato gratuitos mais populares disponíveis atualmente.

Em primeiro lugar, baixe e instale este plug-in do repositório de plug-ins no wordpress.org ou vá para Dashboard > Plugin > Adicionar novo para instalá-lo e ativá-lo.

Formulário de Contato 7

Autor (es): Takayuki Miyoshi

Versão Atual: 5.5.3

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

contact-form-7.5.5.3.zip

82% Classificações 5.000.000+ Instalações WP 5.7+ Requer

Aqui estão as instruções específicas para criar o formulário de registro da universidade acima com este plugin.

Interface

Vá para Painel > Contato > Adicionar novo para criar um novo formulário de contato. Esta é a interface com a qual você trabalhará:

(1): Digite o nome do formulário de contato
(2): Guias para criar e configurar um formulário de contato, incluindo:

• Guia Formulário : crie campos para o formulário de contato
• Guia Correio : configure os e-mails que você recebe do formulário de contato
• Guia Mensagem : inclui notificações que os usuários recebem quando há um erro de imputação de dados, o formulário não pode ser enviado, o formulário foi enviado com sucesso, ...
• Guia Configurações adicionais: adicionar outros elementos ao formulário de contato.

Criar campos para o formulário de contato

Como mencionei, um formulário de contato contém campos que permitem aos usuários inserir informações ou interagir com elas. Esta é a guia Formulário usada para criar esses campos:

(1) consiste em campos para adicionar ao formulário como nome, email, número, botão enviar, ... Para adicionar qualquer campo, basta clicar no nome do campo correspondente.

(2) é a área para exibir a estrutura do formulário no formato HTML. Ao criar um novo formulário de contato, você terá a estrutura padrão de um formulário básico com campos simples, como e-mail, nome, assunto e botão de envio. Você pode usar este formulário imediatamente ou criar um novo formulário com base nele.

Instrução Geral para Campos

Após escolher o campo desejado, aparecerá um popup onde você insere as informações necessárias no campo. Cada campo requer informações diferentes, mas, em geral, todos eles têm as seguintes seções:

Nome : atributo de nome
Valor padrão : o valor padrão do campo
Atributo Id : ID do campo
Atributo de classe : a classe do campo

Nota : o atributo ID e o atributo Class são opcionais e você pode inserir suas informações personalizadas lá. Se você deseja que as etapas a seguir para estilizar o formulário de contato sejam mais fáceis, você deve preencher estas 2 seções.

Após preencher essas informações, você verá a Tag do campo que você criou na parte inferior desta caixa. Clique em Inserir Tag para inserir este campo no HTML do formulário.

Normalmente, a tag de cada campo em um formulário de contato criado com o Formulário de Contato 7 terá a seguinte estrutura:

 [field * name_attribute id: field_id class: field_class "o valor padrão do campo"]

Explicações:

• field * é o tipo de campo que você escolher. Esta é a parte mais importante e obrigatória de um campo.
• * significa que este campo é obrigatório. Se você não quiser forçar os usuários a entrarem, remova o * .

Para entender mais sobre a estrutura de uma tag de campo no Formulário de Contato 7, consulte esta documentação. Compreender o significado e a estrutura HTML de um formulário de contato tornará mais fácil para você editar, criar e adicionar novos campos usando código. Especialmente com codificadores, eles podem escrever código HTML para criar o formulário de acordo com a sintaxe acima. No entanto, com não codificador, pode ser difícil, por isso recomendo seguir as etapas abaixo.

Com os formulários de contato desta série, preciso escolher os seguintes campos:

Todos os campos possuem as informações comuns que mencionei acima. Portanto, eu apenas oriente as partes específicas de cada campo.

Abaixo estão instruções detalhadas para cada campo.

Crie um campo para inserir o nome

Selecione o campo de texto e insira as informações básicas para o campo na caixa:

Na secção Tipo de campo pode escolher exigir para que o preenchimento deste campo seja obrigatório (opcional).

Nota : Na seção Valor padrão , escolha Usar este texto como o espaço reservado do campo para exibir este conteúdo no campo antes que os usuários insiram os dados. Você deve usar este modo para explicar aos usuários o que eles precisam preencher no campo.

A seção Akismet está relacionada ao plugin Akismet - um plugin anti-spam. Se você não tem esse plugin, não se preocupe com esta seção.

Crie um campo para inserir o número de telefone

Selecione o campo numérico e preencha as informações básicas para o campo.

Na seção Tipo de campo , escolha um tipo para este campo. Existem dois tipos de campos: Spinbox e Slider .

O Slider exibirá uma escala para escolher o número da seguinte forma:

Este estilo é adequado para pontuar ou escolher números com base em uma escala específica.

Enquanto isso, Spinbox permite que você insira qualquer número, a sequência de números no campo, como número de telefone, número do cartão, número do cartão de identificação, ... Então, neste exemplo, escolhi Spinbox.

A seção Intervalo permite que você escolha um limite para o número. Neste exemplo, não preciso desta seção, portanto não preenchi nada.

Criar um campo para selecionar majores e locais de estudo

Com este campo, selecione o menu suspenso .

Agora, preencha as opções de especialidades e locais na seção Opções , lembre-se de que cada opção é uma linha.

Se você deseja permitir que os usuários selecionem várias opções de uma vez, clique em Permitir várias seleções .

Criar um campo para escolha do objetivo do registro

Selecione o campo da caixa de seleção .

A seção Opções é semelhante ao que no campo menu drop-down acima. Além disso, existem mais opções para as caixas de seleção da seguinte forma

• Coloque um rótulo primeiro, uma caixa de seleção por último
• Envolva cada item com o elemento do rótulo
• Torne as caixas de seleção exclusivas (você só pode escolher 1 opção).

Crie o botão de envio

Por fim, selecione o campo de envio e apenas preencha as informações conforme o seguinte requisito (observe que Marcador é a palavra que aparecerá neste botão, por exemplo, “Enviar”, “Cadastre-se”, “Confirmar”).

Notavelmente, ao criar um novo formulário, este plugin já criou automaticamente um campo enviado. Portanto, você pode usar este campo sem fazer um novo.

Adicionar rótulos para campos

Agora você terminou de criar campos para o formulário de contato. No entanto, seus campos não tiveram um nome para exibir no formulário de contato da seguinte forma:

Portanto, você precisa adicionar rótulos aos campos inserindo a seguinte estrutura de código na parte HTML do formulário:

 <label> Rótulo do campo
[Tag do campo] </label>

Em seguida, escreva o rótulo do campo na seção Rótulo do campo . Em seguida, preencha todas as informações acima e clique em Salvar .

Depois de criar os campos, meu formulário de contato tem a seguinte estrutura de código, observe que organizei os campos para exibi-los na posição desejada no front end:

 <label> Seu nome (obrigatório)
[texto * seu-nome "digite seu nome"] </label> 

<label> Seu número de telefone
[espaço reservado para número de telefone "insira seu número de telefone"] </label> <label> Seu e-mail (obrigatório)
[enviar * seu-e-mail "digite seu e-mail"] </label>

<label> Maior
[selecione * principal "Ciência da computação" "Linguística" "Agricultura" "Engenharia" "comércio eletrônico"] </label>
<label> Local para estudar 
[selecione * Local de estudo "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </label>

</label> Registre-se no
[checkbox * register label_first "Estudo" "Faça um tour" "Consultar"] </label>

[enviar "Enviar"]

Desta vez, seu formulário de contato ainda não aparece no site. Você precisa seguir mais algumas etapas para exibi-lo no front end.

Configurações do formulário de contato

Configurar e-mail

A guia Correio permite que você personalize o conteúdo do e-mail que receberá quando os formulários de contato forem enviados pelos usuários. Para configurar esta seção, você precisa inserir etiquetas de correio dos campos no formulário de contato que acabou de criar. Aqui está um exemplo:

Explicações:

• Para : Digite o e-mail do responsável pela verificação do formulário de contato.
• De e Assunto : Você deve definir um nome aqui para determinar quem envia este formulário de contato.
• Corpo da mensagem : adicione mail-tags aqui para garantir que quando você receber e-mails do formulário de contato, ele exibirá todas as informações que você solicitou dos usuários.

Outros ajustes

Aba de mensagens

Insira mensagens que são usadas nas situações como você pode ver na descrição da guia. Por exemplo, depois que os usuários enviarem o formulário com êxito ou falharem em enviá-lo, você deverá adicionar uma mensagem para informá-los sobre isso. Ou quando os usuários esquecem um campo obrigatório, você também deve adicionar uma mensagem para que os usuários possam voltar e preencher esse campo. Embora sejam pequenos detalhes, você deve prestar atenção para aprimorar a experiência do usuário.

Guia de configurações adicionais

Esta guia ajuda você a adicionar snippets de código para instalar o seguinte:

• Modo somente para assinantes
• Modo de demonstração
• Pulando e-mail
• Aceitação como validação
• Configurações do Flamingo
• Suprimindo o armazenamento de mensagens
• Código JavaScript

Existem algumas partes bastante úteis que você deve usar, como:

• Modo somente assinantes : este modo permite que apenas usuários logados em seu site enviem o formulário de contato. Isso elimina as mensagens de spam e é apenas para quem realmente deseja entrar em contato com você.
• Aceitação como validação : adicione um recurso para exibir notificações para a caixa de seleção Aceitação quando os usuários não marcam esta caixa, mas movem para outro campo. Porque, por padrão, se os usuários não marcarem a caixa de seleção Aceitação, a mensagem de erro só será exibida após o envio do formulário. Esta caixa de seleção Aceitação é freqüentemente usada para criar campos como “Concordo com os termos do site”, mas no caso de você criar outros tipos de conteúdo, pode ser necessário adicionar Aceitação como validação .

Para saber mais sobre os outros recursos da guia Configurações adicionais , você pode ler mais aqui.

Exibir o formulário de contato no site

A etapa final é exibir o formulário de contato que você acabou de criar no site.

Ainda na interface para criar um novo formulário, copie o shortcode e cole na página ou postagem desejada.

Aqui estão meus resultados finais:

No entanto, meu formulário de contato não parece muito bom, então preciso modificá-lo um pouco.

Se quiser mudar o estilo do formulário de contato como o modelo que dei no início deste artigo, você precisará editar o HTML do formulário da seguinte maneira para torná-lo mais fácil de estilizar:

 <div class = "form__field form__full-width">
<label> Seu nome (obrigatório)
[texto * espaço reservado para seu-nome "insira seu nome"]
</label>
</div>
<div class = "form__field">
<label> Seu número de telefone
[espaço reservado para número de telefone "insira seu número de telefone"]
</label>
</div>
<div class = "form__field">
<label> Seu e-mail (obrigatório)
[email * espaço reservado para seu e-mail "insira seu e-mail"]
</label>
</div>
<div class = "form__field">
<label> Maior
[selecione * principal "Ciência da computação" "Linguística" "Agricultura" "Engenharia" "comércio eletrônico"]
</label>
</div>
<div class = "form__field">
<label> Local para estudar
[selecione * Local para estudar "Nova York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Filadélfia"]
</label>
</div>
<div class = "form__field form__full-width">
<label> Registre-se no
[checkbox * register use_label_element "Study" "Faça um tour" "Consulte"]
</label>
</div>
<div class = "form__field form__full-width">
[enviar "Enviar"] </div>

Em seguida, vá para Personalizador de tema> CSS adicional e cole o seguinte código:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Por fim, clique em Publicar para salvar.

Últimas palavras

Ao usar o Formulário de Contato 7 pela primeira vez, talvez você não esteja familiarizado com HTML se não for um programador. Porém, depois de ler este tutorial, acho que tudo ficou mais fácil, certo?

Se você quiser tentar criar um formulário de contato com algumas outras ferramentas, aguarde meu próximo artigo desta série. Qual plugin você deseja sugerir? Deixe um comentário neste artigo!