Como criar formul√°rios AMP no WordPress (o caminho mais f√°cil)

Deseja criar formulários compatíveis com AMP no seu site WordPress?

O Mobile Pages acelerado, ou AMP, é um projeto do Google que torna os sites carregados mais rapidamente em dispositivos móveis.

Embora o AMP ofere√ßa uma √≥tima experi√™ncia de navega√ß√£o m√≥vel, fazendo com que suas p√°ginas sejam carregadas mais rapidamente, ele desabilita muitos recursos √ļteis em seu site.

Um deles é o formulário de contato. Como o AMP usa um conjunto limitado de HTML e JavaScript, você não pode carregar seus formulários do WordPress corretamente nas páginas AMP.

Mas, felizmente, agora existe uma solução fácil disponível. O WPForms, o plug-in de formulários WordPress mais amigável para iniciantes, agora ajuda a criar formulários WordPress prontos para AMP. Sua equipe trabalhou recentemente com o Google para facilitar os formulários AMP para WordPress.

Neste artigo, mostraremos como criar formul√°rios AMP no WordPress usando WPForms (o caminho mais f√°cil).

Criar formul√°rios AMP no WordPress (o caminho mais f√°cil)

Crie formul√°rios AMP no WordPress (passo a passo)

Para usar o AMP com o WordPress, você deve instalar e ativar o plug-in oficial do AMP para o WordPress. Para mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.

Uma vez ativado, o plug-in adicionar√° automaticamente o suporte do Google AMP ao seu site WordPress.

No entanto, voc√™ pode alterar as configura√ß√Ķes de AMP do seu site acessando AMP ¬ĽGeral do seu painel.

Configura√ß√Ķes do AMP para WordPress

Na p√°gina de configura√ß√Ķes do AMP, voc√™ pode ativar ou desativar o AMP no seu site, escolher um modo de site para o AMP e escolher os modelos suportados.

Depois de configurar o AMP, a próxima etapa é criar um formulário de contato compatível com AMP em seu site WordPress.

Ele passou 1. Crie um formul√°rio do WordPress com WPForms

Para come√ßar, instale e ative o plug-in WPForms Lite no seu site. √Č a vers√£o lite do plug-in WPForms Pro.

As vers√Ķes lite e profissional do WPForms permitem criar um formul√°rio de contato b√°sico pronto para AMP. Em nosso artigo, usaremos a vers√£o gratuita para capturas de tela.

Depois que o plug-in estiver instalado e ativado, voc√™ dever√° ir para WPForms ¬ĽAdicionar novo p√°gina para criar um novo formul√°rio do WordPress.

Na tela de configura√ß√Ķes do formul√°rio, voc√™ pode escolher um modelo de formul√°rio para come√ßar rapidamente. Voc√™ pode selecionar o formul√°rio em branco se desejar come√ßar do zero.

Modelos de formul√°rio WPForms

Em seguida, a p√°gina do construtor de formul√°rios ser√° aberta.

Arraste e solte o Construtor de formul√°rios WPForms

A partir daqui, você pode adicionar ou remover campos de formulário. Para adicionar um novo campo ao seu formulário, basta clicar em um campo do painel esquerdo e ele aparecerá no painel do construtor de formulários à direita.

Depois disso, voc√™ pode configurar as op√ß√Ķes de campo. Basta clicar em um campo e, em seguida, Op√ß√Ķes de campo aparecer√£o.

Definindo op√ß√Ķes de campo no plug-in WPForms

Da mesma forma, você pode personalizar todos os outros campos.

Depois disso, voc√™ pode clicar na guia Configura√ß√Ķes para definir as configura√ß√Ķes do seu formul√°rio.

Configura√ß√Ķes gerais do WPForms

Configura√ß√Ķes gerais permite alterar o nome do seu formul√°rio, enviar o texto do bot√£o, enviar o processamento do bot√£o, ativar o anti-spam Honeypot e muito mais.

Em seguida, voc√™ pode clicar na guia Notifica√ß√Ķes para configurar notifica√ß√Ķes por email que notificam voc√™ quando um usu√°rio preenche o formul√°rio.

Configura√ß√Ķes de notifica√ß√£o WPForms

Você pode clicar na guia Confirmação para configurar uma mensagem de confirmação a ser exibida quando um usuário enviar o formulário.

Configura√ß√Ķes da mensagem de confirma√ß√£o WPForms

Após a conclusão da instalação, você pode salvar seu formulário.

Ele passou 2. Adicione seu formul√°rio AMP a uma p√°gina

Agora que seu formulário do WordPress está pronto, você pode adicioná-lo a uma página.

Primeiro, você deve criar uma nova página ou abrir uma existente na qual deseja adicionar o formulário.

Na tela de edição da sua página, clique no ícone Adicionar novo bloco e selecione o bloco WPForms.

Adicione o bloco WPForms ao editor de p√°ginas do WordPress

Depois disso, você pode ver o widget WPForms adicionado à tela de edição da sua página. Você só precisa selecionar o formulário que você criou anteriormente, e o widget o carregará instantaneamente no editor de páginas.

Adicionar formulário de contato à página do WordPress com WPForms

Você pode publicar ou atualizar sua página.

Isso é tudo! Você não precisa configurar mais nada. O plug-in WPForms Lite adicionará suporte completo a AMP ao seu formulário agora.

Se você quiser ver como fica, pode abrir a página no seu celular.

Ou você pode abrir a página no navegador da área de trabalho adicionando / amp / ou /? Amplificador até o final do URL da sua página. Por exemplo, https://www.example.com/contact/?amp.

Adicione o Google reCAPTCHA ao seu formul√°rio AMP

Por padrão, o WPForms inclui um honeypot anti-spam para capturar e bloquear spam. Além disso, você pode usar o Google reCAPTCHA para reduzir envios de spam.

Para usar o Google reCAPTCHA com seus formulários AMP, você deve registrar seu site no Google reCAPTCHA v3 e obter as chaves da API do Google.

Acesse o site do Google reCAPTCHA e clique no botão "Console de administração" no canto superior direito da página.

Visite o site do Google reCAPTCHA

Depois disso, você precisa fazer login com sua conta do Google. Feito isso, você verá a página "Registrar um novo site".

Registre um novo site para o Google reCAPTCHA

Primeiro, voc√™ deve inserir o nome do seu site no campo R√≥tulo. O Google AMP oferece suporte apenas ao reCAPTCHA v3, portanto, voc√™ deve escolher entre as op√ß√Ķes de tipo reCAPTCHA.

Depois disso, digite seu nome de domínio na seção Domínios.

Adicionar nome de domínio e proprietário do Google reCAPTCHA

A seção Proprietários exibe o endereço de email por padrão. Você também pode adicionar outro email, se desejar.

Voc√™ deve concordar com os Termos de Servi√ßo do reCAPTCHA para continuar. Al√©m disso, marque a caixa de sele√ß√£o "Enviar alertas aos propriet√°rios", que permitir√° ao Google notific√°-lo sobre problemas como configura√ß√Ķes incorretas e tr√°fego suspeito no seu site.

Aceite os Termos de Serviço do Google reCAPTCHA

Depois de concluído, clique no botão Enviar.

Você verá uma mensagem de sucesso junto com a chave do site e a chave secreta para adicionar o reCAPTCHA ao seu site.

Chaves ReCAPTCHA

Agora voc√™ tem as chaves da API do Google para adicionar reCAPTCHA aos seus formul√°rios. No entanto, √© necess√°rio mais um ajuste para garantir a compatibilidade AMP com o reCATCHA. Clique no link "Ir para configura√ß√Ķes" l√°.

Voc√™ ver√° as configura√ß√Ķes do reCAPTCHA novamente com a caixa de sele√ß√£o "Permitir que esta chave funcione com as p√°ginas AMP". Basta marcar a caixa e clicar no bot√£o Salvar abaixo.

Deixe o reCAPTCHA trabalhar nas p√°ginas AMP

Agora que voc√™ possui as chaves da API do Google para adicionar o reCAPTCHA nos formul√°rios AMP, abra WPForms ¬ĽConfigura√ß√£o¬Ľ reCAPTCHA p√°gina no seu painel do WordPress.

WPForms reCAPTCHA Configuração do WordPress

Nesta tela, voc√™ precisa escolher a op√ß√£o reCAPTCHA v3 e colar a chave do site e a chave secreta. Depois disso, clique no bot√£o Salvar configura√ß√Ķes.

Agora que o Google reCAPTCHA foi adicionado ao WPForms, voc√™ pode ativ√°-lo em seus formul√°rios quando necess√°rio. Ir WPForms ¬ĽTodos os formul√°rios e selecione o formul√°rio em que deseja ativar o reCAPTCHA.

Edite um formul√°rio criado com WPForms

Quando a tela de configura√ß√Ķes do formul√°rio aparecer, clique na guia Configura√ß√Ķes e selecione a se√ß√£o Configura√ß√Ķes gerais. Na parte inferior, voc√™ pode ver a caixa de sele√ß√£o "Ativar Google v3 reCAPTCHA".

Ativar reCAPTCHA do Google v3 em WPForms

Marque a caixa e salve seu formul√°rio clicando no bot√£o Salvar no canto superior direito.

Depois disso, você pode revisitar a página de contato e ver o formulário AMP com o reCAPTCHA em ação.

Esperamos que este artigo tenha ajudado você a aprender como criar formulários AMP no WordPress facilmente. Você também pode conferir o nosso guia sobre como criar formulários compatíveis com GDPR no WordPress.

Se você gostou deste artigo, assine o nosso canal YouTube para assistir a vídeos tutoriais do WordPress. Você também pode encontrar-nos em Twitter e Facebook