Olá queridos leitores do blog. Continuando com o tema dos formulários de feedback do WordPress. E como já falei sobre eles, hoje proponho falar sobre o plugin WP Contact Form 7. A seguir, mostrarei a configuração passo a passo do plugin e também descreverei brevemente os add-ons para este plugin.

Navegação da página:

Descrição do formulário de contato do WordPress 7

2) Ative o plugin Contact Form 7 na área de administração do WordPress.

3) Vá para a nova aba criada, conforme mostrado na imagem:

4) Clique na guia "Adicionar novo" e especifique o idioma padrão do formulário ou selecione o necessário

5) Especifique o nome do formulário de contato e clique em salvar.

6) Agora temos um código de acesso que pode ser copiado e colado na postagem ou na barra lateral para exibir o formulário - contact-form-7 id = "1252" title = "(! LANG: Formulário número 1" (надо взять в !} colchetes como na imagem).

7) Nosso formulário é assim:

Claro que não é muito bonito, mas ninguém se preocupa em criar seus próprios estilos ou fazer sua própria forma e inserir pastilhas lá.

Como exibir o Formulário de Contato 7 em qualquer lugar do modelo

No item 6 configuração passo a passo Eu mostrei como você pode pegar o shortcode CF7 e então descrevi que este código pode ser exibido em um widget, post ou página. Além disso, quero dizer que você pode exibir o formulário de contato 7 em qualquer lugar do modelo. Para fazer isso, insira o seguinte código simples:

Isso é tudo, se você fez tudo corretamente, receberá a saída do Formulário de Contato 7 em um local arbitrário no modelo do WordPress.

Configurando campos de entrada do Formulário de Contato 7

Graças a ele, você também terá caixas como:

Configurando a resposta para o formulário de contato 7

Na nova versão do plugin CF7 4.4 e superior, o desenvolvedor recomenda entrar no campo de (aqui está no skin abaixo)

o endereço correto que corresponde ao seu domínio. Pode ser visto na pele, e essa recomendação cria um problema:

Como responder a um usuário de um mailer?

Se você apenas clicar em responder, responderemos ao nosso próprio e-mail; na verdade, responderemos a nós mesmos. Isso é muito inconveniente, pois precisamos copiar o endereço do usuário à mão, colá-lo na mala direta e só depois responder.

Existe uma solução para este problema e, como sempre, simples. Você precisa no campo Cabeçalhos Adicionais adicionar código:

Responder a:

É claro que your-email-sh precisa ser substituído pelo seu próprio shortcode de e-mail. Veja o skin abaixo:

Agora, ao receber uma carta de feedback do WordPress, você pode clicar para responder na mala direta e sua resposta será enviada para o e-mail correto.

Se após essas etapas você se deparar com um problema - você deve ler a postagem clicando no link. São descritos os principais problemas e causas de problemas no plugin Contact Form 7.

Isso é tudo. Espero que você entenda como o plugin e seus layouts são configurados.

(Última atualização: 19.05.2019)

Saudações, caro leitor! Hoje vou mostrar como criar um formulário de feedback para um autor de site / blog no WordPress usando o popular plugin Contact Form 7 (mais de 5 milhões de instalações). Incluído na postagem : configuração correta Formulário de Contato 7, proteção contra spam, como alterar e configurar aparência formulários. E também apontou os principais motivos - porque o formulário de contato não funciona e não envia cartas .

Formulário de Contatoé um meio importante de manter contato com seus leitores e vice-versa. Rabisque uma carta pessoal, faça uma oferta ao autor (que ele não pode recusar), faça uma pergunta, envie algo e muito mais. Tudo isso vai assumir e não vai revelar informações valiosas para estranhos, nosso formulário de contato WordPress Contact Form 7. Aqui, algo assim. Eu escrevi assim, também gostei.

Oh, a carta chegou! Formulário de contato 7 bem executado

Não vou aborrecê-lo, caro leitor, com qualquer rabisco - vamos ao que interessa. Instalando e configurando corretamente o módulo para WordPress - formulário de contato 7.

Plugin do Formulário de Contato 7 do WordPress

Plugin para WP Contact Form 7

O Contact Form 7 pode gerenciar vários formulários de contato, onde você pode personalizar de forma flexível o conteúdo dos formulários e da correspondência com uma marcação bastante simples. Os formulários possuem suporte integrado para envios Ajax, CAPTCHAs, filtro de spam Akismet e muito mais.

Realizamos todas as manipulações no painel de administração do WordPress. Para instalar um plugin, na seção "Plugins", clique em "Adicionar novo". Insira o Formulário de Contato 7 na janela "Pesquisar". Naturalmente, ele será exibido primeiro. Clique no botão "Instalar:

Como instalar o plugin

Formulário de contato nº 1 por padrão

Na imagem você pode ver que por padrão a versão padrão do formulário de contato e um código de acesso pronto para inserção em uma nova página, post ou em painel lateral(via widget de texto). Aparência padrão do formulário de contato 7, definida em uma página separada do site:

Aparência: Formulário de contato padrão no site WordPress

Se você deseja apenas visualizar, verificar ou alterar, ou seja, adicionar outros campos a ela, clique no item "Alterar". A tela está acima.

A página "Editar formulário de contato" é aberta. O plugin está em russo e, portanto, será muito fácil descobrir o que é o quê. Guia Modelo de formulário. Você pode alterar o modelo de formulário para atender às suas necessidades.

Por exemplo, para adicionar uma tag de upload de arquivo a um modelo de formulário, você precisa: Marcar com o mouse o local para inserir a tag (de preferência após a mensagem) e clicar na guia "arquivo" apropriada. Com este recurso, você pode permitir que os usuários façam upload de seus arquivos por meio do seu formulário e, em seguida, um e-mail será enviado a você com os anexos do arquivo:

Editar formulário de contato. Guia de arquivo

Uma janela será aberta - Gerador de tags de formulário: arquivo:

Para anexar um arquivo enviado ao e-mail, você precisa inserir uma tag ()

O Contact Form 7 aplica restrições de tipo e tamanho de arquivo padrão. Quando você não define suas opções, as extensões de arquivo padrão são: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav e wmv. E o tamanho de arquivo permitido é de 1 MB (1.048.576 bytes). Pressionamos o botão "Inserir tag":

Tag de arquivo inserida no modelo de formulário

Onde você marcou com o cursor do mouse e uma tag adicional aparecerá. Se colado no lugar errado, basta copiá-lo e colocá-lo no lugar certo. Adicione as tags necessárias ao seu formulário da mesma maneira. Certifique-se de clicar no botão azul "Salvar" após adicionar outras tags. E é assim que ficará o botão para anexar um arquivo a um e-mail, após o campo de mensagem:

Botão Selecione um arquivo no formulário de contato

Se você fizer tudo corretamente, não terá problemas com campos adicionais.

Verifique também as guias Email, Notificações de envio de formulário e Configurações avançadas. Na minha opinião, não há necessidade de alterar nada. Se apenas em Configurações avançadas você puder especificar o parâmetro - apenas para assinantes - subscribers_only: true. Para obter mais informações, haverá um link para a página de configurações de parâmetros avançados.

E agora, amigos, precisamos colocar o formulário de contato preparado em uma nova página ou barra lateral separada do recurso da web. Isso é feito facilmente.

Colocamos o formulário de contato em uma página separada do site / blog

Após todas as configurações e salvar o formulário, copie o código de acesso na página Formulários de contato ou Editar formulário de contato. Depois disso, crie uma nova página - a seção Páginas - Adicionar nova. Digite o nome da página, por exemplo "Contatos". Mude o editor de mensagens para o modo "Texto" e insira o código de acesso no campo da mensagem:

Nova página com formulário de contato

Se você tem nova páginaé adicionado automaticamente ao menu, então definimos o "Pedido" 1, 2 ou 3 (qual está no menu, a página de contato será exibida). Clique no botão "Publicar". Tudo. Preparar. Você também pode adicionar uma página ao menu manualmente. Agora você tem um formulário para contato com o autor do blog / site instalado.

Usando o mesmo método, um formulário de contato é adicionado à barra lateral, rodapé ou texto do artigo. Copie o shortcode e cole em suas postagens ou conteúdo de widget de texto. Esteja ciente de que a qualquer momento você pode editar o formulário ou criar um novo com diferentes tags / campos.

Recebendo spam por meio do Formulário de Contato 7?

Existe proteção. Os spammers afetam tudo, seus formulários de contato não são exceção. Antes de receber spam, proteja seus formulários de contato com os poderosos recursos anti-spam do Contact Form 7.

O Contact Form 7 oferece suporte à filtragem de spam com Akismet. O reCAPTCHA inteligente bloqueia spambots irritantes. Usando a lista negra de comentários, você também pode bloquear mensagens contendo certos palavras-chave ou enviado de endereços IP específicos.

Clique em "Integração". O reCAPTCHA do Google protege você contra spam e outros abusos automáticos. Com o módulo de integração reCAPTCHA do formulário de contato 7, você pode bloquear o envio do formulário por bots de spam.

Integração do Google reCAPTCHA v3: proteção contra spam

Integração do plugin com outros serviços de recaptcha

Trample Setup Integration e siga o link para obter as chaves da API ReCaptcha:

reCAPTCHA é Serviço Google

Para começar a usar o reCAPTCHA, primeiro você precisa registrar seu site WordPress. reCAPTCHA é um serviço do Google, então, para usá-lo, você precisa conta do Google... Faça login no Google usando conta e siga o link https://www.google.com/recaptcha/admin... Você verá um formulário de registro simples, como:

Registre um site WordPress. Goodle reCAPTCHA

Por favor insira um título. Selecione reCAPTCHA v3 (o reCAPTCHA v3 não requer um widget CAPTCHA (não sou um robô usado no reCAPTCHA v2)) e insira o domínio do site no campo Domínios. Após registrar um site, você receberá uma chave do site e uma chave secreta. Digite-os (imagem acima) e salve as configurações. Isso é tudo. Seu formulário de contato agora usa a conta reCAPTCHA para verificar se a mensagem foi enviada por um humano ou por um spambot.

Se você decidir instalar o Contact Form 7, recomendo que instale o add-on Contact Form 7 Style além dele. Isso permitirá que você edite a aparência do seu formulário. Você pode não apenas escolher um dos modelos prontos, mas também criar seu próprio design exclusivo. Quer mudar seu visual? Então, a sequência é especialmente para vocês, conhecedores de beleza.

Aparência do formulário de contato - Estilo do formulário de contato 7

Estilos de formulários de contato 7

Contact Form 7 Style Plugin é um addon Contact Form 7 que precisa ser instalado em seu site WordPress. Suporta estilos personalizados que podem ser facilmente gerenciados por meio do painel de administração. Existem também modelos predefinidos que podem ser ativados nas configurações do formulário de contato 7. Nas configurações do plugin principal aparecerá Nova aba- Modelo de estilo do formulário de contato 7. Personalização de aparência:

Modelos prontos para o formulário

Exemplo, mudei o externo padrão para algo assim:

Aparência do formulário de contato

Não se esqueça de que você pode definir seus próprios parâmetros de estilo personalizado:

O plugin suporta estilos personalizados que podem ser gerenciados através do painel de administração

Para concluir:

O envio de e-mails a partir do Formulário de Contato 7 funciona perfeitamente para a maioria das pessoas. Mas não é para todos. Mesmo que o plugin envie com sucesso milhões de e-mails todos os dias, existem muitos problemas que podem atrasar ou parar emails, tanto no envio quanto no recebimento de um e-mail típico.

Por que o Formulário de Contato 7 não está funcionando (não está enviando e-mails)?

1. Seus problemas de hospedagem. É importante observar que o envio e o recebimento de e-mails dependem muito do servidor que hospeda seu site WordPress;
2. Certifique-se de usar o endereço de e-mail de retorno correto;
3. Seu e-mail pode ser considerado spam;
4. Plug-ins ou conflito de tema com o Formulário de Contato 7;
5. Conflitos de Javascript.

Se você não conseguir enviar e-mails a partir deste plugin, é provável que não consiga enviar e-mails do WordPress em geral. Nesse caso, senhores, você pode obter as perguntas mais frequentes sobre o plugin na página https://contactform7.com/faq/.

Ou no fórum de suportehttps://wordpress.org/support/plugin/contact-form-7/. inglês não importa, com a tradução do seu navegador favorito tudo ficará claro.

Isso é tudo para mim. Parece que não esqueci de nada. Tudo de bom. Boa sorte, amigos.

P.S. Acontece que editar postagens antigas (as informações para os leitores devem estar sempre atualizadas) leva o mesmo tempo que escrever novas instruções... Horror!

(função (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: "RA -292864-4 ", renderTo:" yandex_rtb_R-A-292864-4 ", async: true));)); t = d.getElementsByTagName (" script "); s = d.createElement (" script "); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore (s, t);)) (este , this.document, "yandexContextAsyncCallbacks");

Um formulário de contato é um atributo essencial da maioria dos sites. É por isso que existem tantos plug-ins no diretório do WordPress para formulários de contato... Um dos mais populares é o Formulário de Contato 7. O plugin permite que você crie formulários de qualquer tipo; muito flexível e fácil de personalizar; vem se desenvolvendo há muitos anos e contém muitos desenvolvimentos.

Criar e exibir formulários de contato

Criação de formulários na área administrativa

Depois de instalar o plugin, aparecerá o item de menu "Formulário de Contato 7", através do qual você poderá criar e deletar formulários.

O formulário na imagem é criado automaticamente quando o plugin é ativado.

Vamos usar o formulário padrão criando uma página Contate-me e colando o código de acesso do formulário nela.

Parte frontal do site

Agora vamos salvar o artigo e ver a aparência do nosso formulário (usando o tema Twenty Sixteen):

A imagem mostra o formulário após a carta enviada (isso é indicado pela notificação no final do formulário).

Personalização de formulários (criação de formulários complexos)

O exemplo acima mostra como inserir um ready-made e muito forma simples Contatos. Agora vamos dar uma olhada em como criar um formulário mais complexo. Para fazer isso, volte ao painel de administração, ao gerenciador de formulários e vá para a edição do formulário padrão.

No campo superior - o nome do formulário (é visível apenas no painel de administração), indicamos um nome que seja compreensível para nós, por exemplo: "Feedback sobre o site", "Formulário de candidatura", "Formulário de feedback ", etc.

Abaixo do título está um código curto. Nós o usamos em registros para exibir o formulário.

E abaixo existem quatro guias:

1. Modelo de formulário
2. Carta
3. Configurações adicionais

Vamos considerar cada guia separadamente.

Modelo de formulário

Nesta guia, você pode personalizar os campos e a aparência do formulário. A área de trabalho é Editor de HTML WP. Apenas em vez dos botões usuais, vemos botões para inserir campos de formulário diferentes.

Layout do formulário

Para o layout, você pode usar tags html e códigos de acesso de plug-in. Os códigos curtos adicionam campos de formulário e as tags html permitem que você crie uma estrutura HTML arbitrária. Por exemplo, nosso formulário padrão se parece com isto:

Seu nome (obrigatório) Seu e-mail (obrigatório) Tema Mensagem

E quando exibido em uma postagem, ele se transformará neste HTML:

Sintaxe de shortcode

Vamos clicar no botão "Texto". Uma janela é aberta onde podemos especificar atributos para o campo de texto. Especifique e clique em "Inserir Tag".

A tag será posteriormente convertida em um campo de texto com código html:

Shortcodes podem ser convenientemente criados por meio do shortcode builder.

Mas o construtor não permite que você altere o shortcode (você só pode criar o shortcode lá). Existem duas maneiras de alterar o shortcode:

1. exclua e crie um novo usando o construtor.
2. aprenda a sintaxe e corrija o código de acesso do campo manualmente.

Com o construtor, você mesmo descobrirá.

E aqui vamos analisar a sintaxe do shortcode.

Por exemplo, considere a tag caixa de texto com opções adicionais:

Texto (obrigatório) Tipo de campo: texto, selecionar, senha, número, etc. (v nesse caso campo de texto). Determina em qual elemento do formulário nossa tag será transformada, o que significa que tipo de dados ela receberá. * Um asterisco torna o campo obrigatório (o formulário não será enviado e será exibida uma notificação de que o campo deve ser preenchido). Nome do cliente (obrigatório) O nome do campo é usado como o atributo de nome na entrada e também é usado ao formar um modelo para uma carta enviada. id: my-id O atributo id na entrada com o valor my-id. Utilizado para decoração. class: my-class O atributo class na entrada com o valor my-class. Utilizado para decoração. placeholder "(! LANG: Digite o nome" Использовать текст "Введите имя" как placeholder. !}

Observe a ordem dos atributos da tag: primeiro vem o tipo de campo, depois seu nome e só então as opções adicionais.

Tipos de campo

• Campos de texto: texto, e-mail, tel, url, textarea
• Campos numéricos: número, intervalo
• Campos de data: data
• Caixas de seleção, rádio, listas: caixa de seleção, rádio, selecione
• Campo de upload de arquivo: arquivo
• CAPTCHA: captchac e captchar
• Enquetes: questionário
• Campo de aceitação: aceitação
• Botão Enviar: enviar
• Tipo de campo arbitrário

Modelo de carta

Na segunda contribuição, você pode refinar o modelo (layout) e as propriedades da carta enviada. Nos campos desta guia, você pode usar tags especiais de campos de formulário - isso torna possível transferir os dados especificados no formulário na carta.

As marcas são compostas por nomes de campos de um modelo de formulário. Por exemplo, criamos uma caixa de texto chamada :. Agora você pode usar a tag em seu modelo de e-mail. Na carta, ao invés desta tag, será substituído o valor do campo digitado pelo usuário (nome completo).

Cabeçalhos de e-mail:

A quem - o email para onde a carta será enviada. Você pode especificar quantas caixas desejar, separadas por vírgulas.

De quem - nome e endereço de e-mail, de quem veio a carta. Normalmente, o e-mail do servidor é indicado aqui (por exemplo [email protegido]).

Você pode especificar qualquer e-mail, mas se o domínio de e-mail for diferente do domínio do site, o formulário não será testado e "jurará" neste parâmetro, embora as cartas ainda sejam enviadas.

Assunto - O assunto da carta. Ficará claro de qual formulário os dados foram enviados. Por exemplo, a linha de assunto é "Erro no site", "Pedido de retorno" e assim por diante. Escolha um título que torne mais fácil trabalhar com as cartas que você recebe.

• Cabeçalhos adicionais - por padrão, é definido como Responder para :. O cabeçalho Responder para nos diz que este e-mail pode ser respondido clicando no botão Responder em programa de correio e a marca do formulário é o nome do campo do modelo. O e-mail especificado pelo usuário será inserido em vez desta tag. Você obtém algo como Responder para: [email protegido].

Corpo da carta

Este é o próximo uma parte importante desta guia. O texto da carta em si é indicado aqui. No texto, usamos as mesmas tags de formulário (nomes de campo do modelo de formulário).

Vamos analisar a letra padrão:

A partir de:<>Assunto: Mensagem: - Enviado do site Estamos estudando o plugin Contact Form 7 (http://test-wp.ru)

Tínhamos 4 campos que o usuário preencheu. Após o envio da carta, as tags se transformarão em valores e receberemos a seguinte carta:

De: Dmitry Assunto: Pergunta sobre o Formulário de Contato 7 Mensagem: Olá! Tenho uma pergunta sobre o plugin do Formulário de Contato 7. Como posso configurá-lo? - Enviado do site Estamos estudando o plugin do Formulário de Contato 7 (http://test-wp.ru)

Campos opcionais no corpo do e-mail

Se o usuário não preencher o campo, mas ele for usado no corpo da carta, o corpo da carta ficará incompleto. Por exemplo, o corpo diz Homem da cidade, mas o usuário não preencheu o campo, o que significa que na carta receberemos um Homem da cidade ... Tal linha na carta é supérflua. Para remover esta linha da mensagem, marque a caixa "Excluir saída de linhas com tags de mensagem vazias". Observe que isso só funcionará quando o texto do campo e o código de acesso estiverem na mesma linha.

Opção "Usar formato de email HTML". Permite usar tags HTML no corpo da mensagem. Neste caso, você pode usar uma lista limitada Tags HTML porque nem todos clientes de correio ou os serviços podem lidar com marcação HTML complexa corretamente. Você pode usar: tabelas, listas com marcadores, ousadia, parágrafos e assim por diante. Procure mais detalhes na rede.

O Formulário de Contato 7 permite que você envie uma carta para dois endereços, e as configurações para cada carta são diferentes. Isso pode ser útil quando você precisa enviar uma carta ao administrador do site com informações completas e uma duplicata para o gerente, que contém apenas os dados do pedido.

Notificações de envio de formulário

Nesta guia, você pode editar as mensagens que o formulário exibe em uma determinada situação: no caso de envio bem ou malsucedido de uma carta, ou em caso de erros.

As tags de modelo de email não funcionam nesses campos.

Configurações adicionais

Esta guia é destinada a usuários avançados e permite estender os recursos do formulário usando o código JS. Por exemplo, postar eventos para análises.

Vou falar sobre o uso dessa funcionalidade em um artigo separado.

O plug-in Contact Form 7 ajudará a organizar comentários sobre o seu site.

Você pode baixar o plugin Contact Form 7 no site oficial do WordPress

Você pode baixar o plugin Really Simple CAPTCHA no site oficial do WordPress

Examinamos como instalar e conectar este plugin na lição "", agora vamos lidar com Funções adicionais plugin Contact Form 7. O formulário funciona corretamente em monitores, tablets, telefones e laptops. A propósito, se o seu laptop estiver quebrado, há um serviço onde os laptops HP são reparados.

Depois de fazer o download e ativar o plug-in, vá para as configurações do plug-in em nova seção painel de controle "Contatos".

Passe o mouse sobre o nome do formulário e selecione "Editar"

Uma janela para alterar os parâmetros do formulário será aberta.

Uma vez que o site pode utilizar não um, mas vários formulários (um formulário para enviar uma mensagem, um formulário para solicitar uma chamada, um formulário com dados pessoais), para que não haja confusão sobre qual formulário é responsável por quê, é necessário mude o nome do formulário. Para fazer isso, clique no nome do formulário 1.

O bloco 2 exibe o que será exibido na página do formulário. Primeiro vem o texto, o nome do campo, depois do código deste campo. Você pode alterar o texto para o que quiser.

Para adicionar novos campos ao formulário, clique na lista suspensa # 3 - "Gerar tag" e selecione o elemento desejado na lista suspensa.

• Campo de texto
• O email
• Número de telefone
• Número (caixa giratória)
• Número (controle deslizante)
• Campo de texto
• Menu suspenso
• Caixas de seleção
• Botões do rádio
• Aceitação
• Pergunta
• CAPTCHA
• Upload de arquivo
• Botão de envio

Por padrão, dicas de ferramentas e campos de formulário estão localizados da seguinte maneira: na parte superior da dica de ferramenta, na parte inferior do elemento. Se você quiser colocar a descrição e o elemento em uma linha, remova a tag após o texto

... Todo o bloco com descrição e elementos deve estar em uma linha e dentro da tag

Campo de texto

Na lista suspensa, selecione o elemento "Campo de texto"

Se alguma função que você adicionar for necessária - marque a caixa 1 e não se esqueça de escrever sobre ela na descrição.

Você pode adicionar no campo de entrada Informações adicionais para facilitar o preenchimento do formulário. Caixa de seleção 2 "Usar como espaço reservado?" e escreva uma dica ao lado dele no campo. Quando este campo for preenchido no formulário, o texto da dica de ferramenta desaparecerá. Em seguida, siga as instruções do plug-in. Como resultado, você obtém o seguinte campo no formulário concluído:

Certifique-se de colar o código no modelo de e-mail, caso contrário, os dados deste campo não serão enviados para o e-mail! Isso se aplica não apenas aos campos de texto, mas também a quaisquer outros elementos.

O email

Usado para passar para o formulário de endereço caixa de correio remetente

Url

Permite adicionar o endereço do site ao formulário.

Número de telefone

Somente números podem ser inseridos neste campo.

Número (caixa giratória)

Um campo no qual você pode definir a quantidade de algo, como um item. O número é definido pelas setas para cima / para baixo.

encontro

Insere um calendário selecionável por data no formulário. Por exemplo, é usado para reservas de hotéis. Data de chegada, data de partida.

Campo de texto

Sim, não se surpreenda 🙂 Outro campo de texto. Desta vez, este campo tem tamanhos grandes e permite que você escreva muito texto nele. Por exemplo, avaliações, comentários.

Menu suspenso

Quando existem muitas opções para algo e você precisa selecionar um item de uma grande lista, por exemplo, uma lista de cidades, ruas, mercadorias.

A lista deve ser colocada no campo Seleção, cada item em uma nova linha.

Caixas de seleção

Uma caixa de seleção, ou no jargão do desenvolvedor, uma caixa de seleção, é um elemento que cria uma caixa de seleção. Este campo tem dois estados - marcado ou não. A escolha múltipla é possível. Organizado apenas em uma linha, se você marcar a caixa "Tornar as caixas de seleção mutuamente exclusivas?" então, apenas um parâmetro pode ser selecionado.

Botões do rádio

Os interruptores (jarg. Botões de rádio) são usados ​​quando é necessário selecionar uma única opção entre várias oferecidas. Ao marcar a caixa de seleção "Colocar um rótulo primeiro e, em seguida, uma caixa de seleção?" a localização do rótulo e o campo de seleção mudam, por padrão, primeiro a seleção e, em seguida, o rótulo.

Aceitação

Confirmação de algo. Vamos supor a concordância de aceitação das condições descritas acima.

Pergunta

Esta é a primeira linha de defesa contra o spam, a mais básica. No cenário, escreva uma pergunta, pode ser em números, pode ser em letras, ou fulano de tal, e indique a resposta correta. Se a resposta ao preencher o formulário estiver correta, o formulário será enviado. Verde indica qual parte desta fórmula será exibida no site na frente do campo de entrada de resposta, vermelho - a resposta. A resposta correta na fórmula é escrita após o | (Barra vertical)

Adiciona proteção contra spam ao formulário.

É necessário mais um plugin para que esta função funcione. Baixe, instale e ative o plugin.

Você pode deixar as configurações inalteradas, copiar e colar 2 linhas na frente do botão enviar.

Upload de arquivo

Você pode anexar um arquivo ao formulário de envio de mensagens. Nas configurações, você pode especificar o tamanho máximo em bytes e os formatos permitidos para upload, por exemplo, jpg .tiff .doc

Botão de envio

Enviando o formulário. Nas configurações da seção "Marcador" - você pode dar o nome do botão (enviar, responder, enviar 🙂)

Personalizando a aparência do Formulário de Contato 7

Como os plug-ins têm propriedades a serem atualizadas, faremos alterações na aparência do formulário no arquivo de estilo do tema do site style.css

O código a seguir é responsável por exibir o formulário, seus campos e demais elementos:

Wpcf7 (background-color: #ddd;) / * form background color * / .wpcf7 input, .wpcf7 textarea (padding: 5px; color: # 1D1D1D; font-family: Arial, Helvetica, sans-serif; font-size: 16px; altura da linha: 20px; borda: 1px sólido # C7C7C7; sombra da caixa: inserir 2px 2px 8px # F9F9F9; -webkit-transição: toda facilidade 0,2s; -moz-transição: toda facilidade 0,2s; -o-transição : toda a facilidade 0.2s; transição: toda a facilidade 0.2s;) .wpcf7 .wpcf7-list-item (padding-left: 0; margin-left: 0; margin-right: 25px;) .wpcf7 .wpcf7-list-item input (border: none; padding-left: 0; margin-left: 0;) .wpcf7 select (contorno: nenhum; font-size: 16px; font-family: Arial, Helvetica, sans-serif;) .wpcf7 input: pairar, .wpcf7 input: focus, .wpcf7 input: active, .wpcf7 textarea: hover, .wpcf7 textarea: focus, .wpcf7 textarea: active (background: #FDFDFD; contorno: nenhum;)

O que está lá o quê.

entrada .wpcf7, área de texto .wpcf7 - o estilo do campo de entrada (campo de texto)

1. preenchimento- define o recuo do conteúdo até a borda do elemento. Aqui está o recuo do texto inserido no campo até a borda do campo. Defina o valor em pixels Xpx, onde X é o número de pixels. Exemplo: padding: 5px 3px 6px 8px;
2. cor- cor do texto.
3. família de fontes- fonte dos campos de entrada.
4. tamanho da fonte- tamanho da fonte
5. altura da linha- altura da linha
6. fronteira- borda ao redor do campo de entrada
7. Sombra da caixa- bloco de sombra. inserir indica que a sombra é interna. Se você precisar de uma sombra externa, pule este valor. O segundo e terceiro valores 2px 2px indicam a combinação da sombra horizontal e verticalmente, respectivamente. O quarto valor, 8px, define o raio de desfoque da sombra. Quinto - # F9F9F9 - cor da sombra.

Personalização do botão 7 do formulário de contato

.buttons_form (preenchimento: 0px; altura: 30px; largura: 150px! importante; borda: nenhum! importante; cursor: ponteiro; cor: #fff; -webkit-border-radius: .5em; -moz-border-radius :. 5em; raio da borda: .5em; cor: #faddde; borda: sólido 1px # 980c10; plano de fundo: # d81b21; plano de fundo: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (# ed1c24), a (# aa1317)); background: -moz-linear-gradient (top, # ed1c24, # aa1317); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ed1c24", endColorstr = "# aa1317");)

Estilo de notificação do formulário de contato 7

Ele é responsável por mensagens de erro ou envios bem-sucedidos.

Wpcf7 .wpcf7-validation-errors (border: none; background-color: # 246416; color: #fff; margin: 0; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;) .wpcf7 .wpcf7-mail-sent-ok (border: none; background-color: # 7ad33f; margin: 0; padding: 20px; -webkit-border-radius: 10px; -moz-border -radius: 10px; border-radius: 10px;) .wpcf7 .wpcf7-mail-sent-ng (border: none; background-color: # 349622; margin: 0; padding: 20px; -webkit-border-radius: 10px ; -moz-border-radius: 10px; border-radius: 10px; cor: branco;) .wpcf7 span.wpcf7-not-valid-tip (border: none; background-color: # 349622; padding: 5px; padding- left: 5px; padding-right: 5px; border-radius: 10px; largura: 290px; cor: branco; / * Sombra projetada * / -webkit-box-shadow: 3px 3px 3px rgba (0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba (0,0,0,0.3); box-shadow: 3px 3px 3px rgba (0,0,0,0.3);)

E agora, por conveniência, todo o código com comentários:

Wpcf7 (background-color: #ddd;) / * cor de fundo do formulário * / .wpcf7 input, .wpcf7 textarea (/ * Esta parte do código é responsável pelo estilo dos campos de entrada, áreas de texto * / preenchimento: 5px ; / * Define o recuo do elemento fields antes de seu conteúdo, você pode colocar qualquer valor, por exemplo 10px * / color: # 1D1D1D; / * Cor do texto nos campos de entrada * / font-family: Arial, Helvetica, sans- serif; / * Fonte do texto nos campos de entrada * / font -size: 16px; / * O tamanho do texto nos campos de entrada * / altura da linha: 20px; / * A altura da linha nos campos de entrada * / border: 1px solid # C7C7C7; / * A borda ao redor dos campos. O primeiro valor é a largura em pixels, o segundo - estilo de borda, terceiro - sua cor * / box-shadow: inset 2px 2px 8px # F9F9F9; / * Shadow dos campos de entrada.2px - deslocamento ao longo do eixo x, 2px - deslocamento ao longo do eixo y, 8px - raio de desfoque da sombra, # F9F9F9 - cor da sombra * / -webkit-transição: todos os 0,2s facilidade; -moz- transição: toda a facilidade de 0,2s; -o-transição: toda a facilidade de 0,2s; transição: toda a facilidade de 0,2s;) .wpcf7 .wpcf7-list- item (preenchimento-esquerdo: 0; margem-esquerda: 0; margem-direita: 25px;) .w entrada pcf7 .wpcf7-item da lista (borda: nenhum; padding-left: 0; margem esquerda: 0; ) .wpcf7 select (contorno: nenhum; font-size: 16px; font-family: Arial, Helvetica, sans-serif;) .wpcf7 input: hover, .wpcf7 input: focus, .wpcf7 input: active, .wpcf7 textarea: hover, .wpcf7 textarea: focus, .wpcf7 textarea: active (/ * Esta parte é responsável pelo estilo dos campos de entrada quando o ponteiro do mouse está sobre eles * / background: #FDFDFD; / * O plano de fundo do campo de entrada quando o ponteiro do mouse está sobre ele * / outline: none; / * Borda externa do campo de entrada de texto * /) .wpcf7 input.wpcf7-submit (/ * Esta parte do código é responsável pelo estilo do botão Enviar no formulário * / -webkit-transição: 0; -moz-transição: 0; - o-transição: 0; transição: 0; borda: nenhuma; / * Borda ao redor do botão * / posição: relativa; cor: #fff; / * Cor do texto * / text-transform: maiúscula; / * Transformação do texto (maiúsculas significa que o texto no botão será exibido em letras maiúsculas) * / / * Cantos arredondados dos botões. Os valores das três propriedades a seguir devem ser os mesmos, uma vez que são iguais, apenas para navegadores diferentes * / -webkit-border-radius: 6px; / * Arredondamento de cantos para Chrome * / -moz-border-radius: 6px; / * Arredondamento de cantos para Mozilla FireFox * / border-radius: 6px; / * Arredondamento para todos os outros navegadores, incluindo os móveis * / font-size: 14px; / * Tamanho do texto do botão * / font-weight: bold; / * Estilo do texto (negrito significa negrito) * / padding-top: 11px; / * Preenchimento superior da borda do elemento até seu conteúdo * / padding-bottom: 10px; / * Preenchimento da parte inferior da borda do elemento até seu conteúdo * / padding-left: 35px; / * Preenchimento à esquerda da borda do elemento para seu conteúdo * / padding-right: 35px; / * Recuo da direita da borda do elemento até seu conteúdo * / / * Fundo gradiente - Fundo gradiente do botão * / cor de fundo: # 000000; / * A cor de fundo do botão se o gradiente não for suportado pelo navegador * / / * Nas propriedades a seguir, as cores devem ser especificadas da mesma, visto que são iguais, apenas para navegadores diferentes. Vamos dar uma olhada na primeira propriedade. A parte de (# 676767) para (# 3B3B3B) significa que você precisa exibir o gradiente, onde a transição da cor # 676767) vai para a cor # 3B3B3B * / fundo: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (# 676767), a (# 3B3B3B)); fundo: -moz-linear-gradiente (parte superior, # 349622, # 246416); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 349622", endColorstr = "# 246416"); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # 349622, endColorstr = # 246416)"; / * Drop Shadow - A sombra do botão. A cor da sombra é especificada em RGBA * / -webkit-box-shadow: 0 2px 5px rgba (0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba (0,0,0,0.3); sombra da caixa: 0 2px 5px rgba (0,0,0,0.3); ) / * Ao passar o mouse - O estilo do botão ao passar o mouse. Tudo é quase igual ao do bloco anterior * / .wpcf7 input.wpcf7-submit: hover (cursor: ponteiro; decoração de texto: nenhum; cor de fundo: # 000000; fundo: -webkit-gradiente (linear, topo esquerdo , inferior esquerdo, de (# 246416), para (# 349622)); plano de fundo: -moz-linear-gradient (superior, # 246416, # 349622); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 246416 ", endColorstr =" # 349622 "); -ms-filter:" progid: DXImageTransform.Microsoft.gradient (startColorstr = # 246416, endColorstr = # 349622) ";) / * Ao clicar - estilo do botão ao clicar nele . quase o mesmo que no bloco anterior * / .wpcf7 input.wpcf7-submit: active (top: 1px; color: # d8c6e2; / * Cor do texto do botão ao clicar nele * / background-color: # 000000; background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (# FF0000), a (# 246416)); plano de fundo: -moz-linear-gradiente (superior, # FF0000, # 246416); filtro: progid: DXImageTransform. Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 246416"); -ms-filter: "progid: DXImag eTransform.Microsoft.gradient (startColorstr = # FF0000, endColorstr = # 246416) "; -webkit-box-shadow: nenhum; -moz-box-shadow: nenhum; sombra da caixa: nenhum; ) / * Mensagens CF7 - Estilo de mensagens sobre envio bem-sucedido, erros, etc. * / .wpcf7 .wpcf7-validation-errors (/ * Estilo de mensagens para erros de validação * / border: none; / * Frame do bloco de mensagem * / background-color: # 246416; / * Background * / color: #fff ; / * Cor do texto * / margem: 0; / * Preenchimento externo * / preenchimento: 20px; / * Preenchimento * / / * Arredondamento de cantos para navegadores diferentes - as 3 propriedades a seguir * / -webkit-border-radius: 10px; - moz-border -radius: 10px; border-radius: 10px;) .wpcf7 .wpcf7-mail-sent-ok (/ * Estilo de mensagens sobre envio bem-sucedido * / border: none; / * Frame do bloco de mensagem * / background -color: # 7ad33f; / * Background * / margin: 0; / * Preenchimento externo * / preenchimento: 20px; / * Preenchimento * / / * Arredondamento de cantos para navegadores diferentes - as três propriedades a seguir * / -webkit-border-radius : 10px; -moz- border-radius: 10px; border-radius: 10px;) .wpcf7 .wpcf7-mail-sent-ng (border: none; background-color: # 349622; margin: 0; padding: 20px; - webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white;) .wpcf7 span.wpcf7-not-valid-tip (border: none; backgrou nd-color: # 349622; preenchimento: 5px; padding-left: 5px; padding-right: 5px; raio da borda: 10px; largura: 290px; cor branca; / * Sombra projetada * / -webkit-box-shadow: 3px 3px 3px rgba (0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba (0,0,0,0.3); sombra da caixa: 3px 3px 3px rgba (0,0,0,0.3); ) .wpcf7-form .fleft (float: left;) .wpcf7-form .mright20 (margin-right: 20px;) .wpcf7-form .mright40 (margin-right: 40px;) .wpcf7-form .clear (limpar: Ambas;)

Instruções detalhadas para instalar, configurar e usar o plug-in de formulário de feedback para um site WordPress. Plug-in do Formulário de Contato 7 em este momentoé o melhor em sua categoria.

O fato de não haver alternativa óbvia, mesmo entre os plug-ins pagos, pode ser julgado pela frequência com que o plug-in Contact Form 7 é usado. No momento em que este artigo foi escrito, esse plug-in foi baixado mais de 28.800.000 vezes apenas do site oficial do WordPress, e a avaliação média é de 4,5 em 5! Este é realmente um indicador de grande sucesso. Além disso, se você olhar para os temas WP premium mais vendidos, encontrará o plugin Contact Form 7 como recomendado ou instalado por padrão em quase todos eles.

O plugin do Contact Form 7 é "ao vivo", atualizado pelo autor com cada nova versão WordPress. Bugs e erros são eliminados imediatamente. Nenhum conflito óbvio com os plug-ins mais comumente usados ​​foi identificado.
O plugin Contact Form 7 é totalmente gratuito, incl. para uso comercial... Depois de instalar o plugin no painel de configurações, você encontrará o pedido do autor de uma “doação”.

Instalando o plugin Contact Form 7

Você pode baixar o plugin Contact Form 7 do site oficial do WordPress (link acima) ou diretamente pela guia "Plugins"> "Adicionar novo"> Linha "Pesquisar plugins"> drive no "Formulário de Contato 7"... Não se esqueça de ativar o plugin antes de começar: "Plugins"> "Instalados"> encontre o plugin Contact Form 7> clique em "Ativar"... Um novo item “Formulário de contato 7” aparecerá no painel de administração lateral do seu site.

Configurando o plugin Contact Form 7

O que é bom é que o plugin Contact Form 7 é multilíngue por padrão. Se a sua versão do WordPress for em russo, o plugin também será totalmente em russo, e você pode criar um formulário de feedback em qualquer idioma. O idioma do formulário é especificado durante a criação de cada formulário. Não há seção separada para configurações, todas as configurações são individuais para cada formulário separado.

Um exemplo de adição de um formulário de feedback

1. Selecione no painel de administração "Formulário de contato 7"> "Formulários"> botão na página "Adicionar novo".

2. Você será solicitado a selecionar um idioma para o formulário. O padrão é "Russo". Pressionamos o botão "Adicionar novo"
3. Uma janela se abriu na sua frente onde você pode criar seu formulário com suas configurações.

As possibilidades são extensas, mas quero destacar alguns recursos imediatamente. A janela em que se abriu contém vários separadores: "Modelo de formulário", "Carta", "Notificações no envio do formulário", "Definições adicionais". Última aba você não precisa disso, é mais uma personalização para usuários e programadores avançados. Vamos dar uma olhada no resto.

"Notificações de envio de formulário"- essas são as mensagens que um visitante de seu site verá ao enviar um formulário. Contém opções para mensagens de sucesso e com erros e falhas. Você pode alterar essas mensagens do sistema a seu critério.

"Modelo de formulário"- nesta seção você irá gerar Tags, que são responsáveis ​​pela presença dos campos obrigatórios no formulário.

"Carta"- esta é a aparência e o conteúdo da carta que você receberá depois que o visitante preencher o formulário.

ATENÇÃO: agora vamos analisar o que são tags e quais campos eles criam. Todas essas tags são inseridas na guia "Modelo de formulário", mas se você não inserir as "tags de resposta" manualmente (!) Na guia "Carta", os formulários preenchidos não chegarão completamente ao seu e-mail.

4. Opções de tags na guia "Modelo de formulário".

- texto: adiciona uma caixa de texto (curta).
- o email: campo para e-mail.
- URL: campo para indicar o endereço do site ou qualquer link.
- tel: campo de telefone de contato
- número: um campo no qual apenas um valor numérico pode ser inserido
- encontro: campo de formato de data
- área de texto: adiciona uma caixa de texto (longa).
- menu suspenso: lista suspensa. O campo tem Configurações adicionais... A lista que será excluída é indicada no campo "Opções". Além disso, um elemento da lista em uma linha (não separado por vírgulas!). Se “Permitir várias seleções” estiver marcado, o usuário poderá selecionar mais de uma opção de sua lista. Se houver uma marca de seleção ao lado de “Inserir um item em branco como a primeira opção”, um campo em branco será adicionado na parte superior por padrão, que também pode ser selecionado pelo usuário.

- caixas de seleção: Caixa de seleção (marcas de seleção). O campo possui várias configurações. A lista de caixas de seleção é indicada no campo “Opções”. E uma caixa de seleção em uma linha (não separada por vírgulas!). Se houver uma marca de seleção ao lado de “Coloque um rótulo primeiro, uma caixa de seleção por último”, por padrão, a caixa de seleção estará na primeira caixa de seleção. Se o item “Tornar as caixas de seleção exclusivas” estiver marcado, o usuário poderá marcar apenas uma das caixas de seleção.

- botões do rádio: botões do rádio. Os botões de opção sempre permitem que você selecione apenas um item da lista. Inserir uma lista é semelhante a caixas de seleção em uma coluna. Nas configurações, você pode habilitar “Coloque um rótulo primeiro, uma caixa de seleção por último” e, em seguida, o primeiro botão de opção da lista será selecionado por padrão.

- aceitação: caixa de seleção, sem marcar a caixa para a qual a mensagem não será enviada. Na verdade, esta é uma oportunidade de tirar o consentimento incondicional do usuário para algo, caso contrário, a carta não será enviada. Por exemplo, "Você concorda que as informações fornecidas serão processadas por nossos operadores."

- questionário: inovação de plugins. Este campo permite que você crie uma pergunta e uma resposta para ela. Ideal para proteção contra spam. Observe a formatação de perguntas e respostas no formulário de geração de tags.

Qualquer campo pode ser tornado obrigatório (geralmente tais campos são marcados com *) para preenchimento, para isso você precisa marcar a caixa Tipo de campo> Campo obrigatório. Atenção! Não se esqueça de indicar no texto aos usuários que o campo deve ser preenchido!

- CAPTCHA: captcha é instalado apenas como um plugin adicional. Mas, em princípio, com a etiqueta do questionário, a necessidade de uma queda é muito menor.

- Arquivo: o campo cria uma tag que permite ao usuário anexar um arquivo à mensagem. Nas configurações de tag, você pode especificar o tamanho máximo “Limite de tamanho de arquivo (bytes)” do arquivo anexado, tipos de arquivo permitidos (extensões separadas por vírgulas). Atenção, se você não especificar o tamanho máximo do arquivo anexado, por padrão, ele será determinado pelos recursos de seu servidor. Você pode obter as informações exatas sobre as restrições com a empresa de hospedagem. Normalmente, o tamanho máximo é limitado a 10 MB.

submint: a tag adiciona um botão "Enviar" (o nome pode ser alterado).
Essa é uma tela com todas as tags que gerei, e abaixo está uma tela do formulário no site. Observe que o “Modelo de formulário” oferece suporte a tags HTML, portanto, estou usando as seguintes explicações para os usuários. usando HTML Tag.

5. A guia "Carta".

Agora vamos ao formulário para gerar a carta que será enviada a você e adicionar as tags que usamos no "template de formulário". Preste atenção na tela. Os campos não incluídos no corpo da carta são exibidos na parte superior da guia em preto, e aqueles que estão presentes no corpo da carta são exibidos em cinza.

Nós as adicionamos ao corpo da mensagem (campo “Corpo da Mensagem”): basta copiar as tags destacadas em preto e colá-las no formato do corpo da mensagem. Observe que os números indicados nas tags correspondem aos números de campo exclusivos que você adicionou no modelo de formulário. Dessa forma, você pode identificar qual campo se refere a quê e assiná-los diretamente no corpo da carta, para não se confundir posteriormente.
Nós salvamos as alterações.

6. Instalação do formulário no site.

Na página de criação de um formulário, copie o código curto (geralmente é destacado em azul ou marrom) e cole-o em qualquer página ou postagem.

Prós e contras em poucas palavras

prós
+ um grande número de tipos de campo
+ suporte multilíngue
+ facilidade de uso
+ grátis
+ confiável
+ não entra em conflito com outros plugins
+ O plugin Contact Form 7 está sendo desenvolvido

Desvantagens:
- não devemos esquecer de adicionar tags adicionais à carta gerada
- o design do formulário e da carta requer um conhecimento mínimo de HTML

Saída: definitivamente um ótimo editor, senão o melhor! Satisfeito com flexibilidade, confiabilidade e estabilidade. Se fosse pago, ainda seria comprado, uma vez que não há nenhuma outra qualidade próxima a ele. Eu recomendo o plugin Contact Form 7.