Como criar formulários AMP no WordPress (a maneira mais fácil)

Você já ouviu falar de páginas móveis aceleradas (AMP)? As Accelerated Mobile Pages (AMP) do Google podem ajudar a acelerar o seu site e proporcionar uma experiência de usuário rápida em dispositivos móveis.

No entanto, as AMP removem diferentes elementos de seu site para melhorar o desempenho. Isso inclui formulários do WordPress.

Uma maneira simples de contornar isso é criar formulários que sejam compatíveis com AMP. De acordo com nossa experiência, a maneira mais fácil de fazer isso é usar o WPForms.

Neste artigo, mostraremos a você como criar formulários AMP no WordPress usando o WPForms (da maneira mais fácil).

Por que criar um formulário AMP no WordPress?

Accelerated Mobile Pages ou AMP é um projeto do Google que faz com que os sites carreguem mais rapidamente em dispositivos móveis.

Embora o AMP ofereça uma excelente experiência de navegação em dispositivos móveis, fazendo com que suas páginas da Web carreguem mais rapidamente, ele desativa muitos recursos úteis em seu site WordPress.

Um deles são os formulários de contato. Como as AMP usam um conjunto limitado de HTML e JavaScript, seus formulários do WordPress não podem ser carregados corretamente nas páginas AMP.

Como alternativa, você pode usar um dos muitos temas responsivos do WordPress que oferecem excelente desempenho em computadores e dispositivos móveis. Dessa forma, você não precisa comprometer o estilo do seu site para oferecer uma experiência superior no celular.

No entanto, se você estiver usando AMP no seu site WordPress, poderá usar um plugin para exibir formulários. Vamos ver como adicionar um formulário AMP ao seu site.

Adição de formulários AMP no WordPress (passo a passo)

A melhor maneira de criar um formulário AMP é usar o WPForms. É o plugin de formulário de contato do WordPress mais amigável para iniciantes que ajuda a criar formulários do WordPress prontos para AMP.

Sua equipe trabalhou recentemente com o Google para facilitar os formulários AMP para o WordPress.

Etapa 1: Instalar e ativar o plug-in WPForms

Para este tutorial, usaremos a versão WPForms Pro porque ela oferece mais recursos, modelos de formulários, complementos e opções de personalização. Há também uma versão WPForms Lite que você pode usar para começar gratuitamente.

Tanto a versão lite quanto a versão pro do WPForms permitem criar um formulário de contato básico pronto para AMP.

Primeiro, você precisará instalar e ativar o plug-in WPForms. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Etapa 2: Adicionar AMP ao seu site WordPress

Antes de criarmos um formulário, é importante que você tenha o AMP configurado em seu site WordPress.

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

Depois de 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 ” Configurações no painel.

Na página de configurações de AMP, você pode ativar ou desativar as AMP em seu site, escolher um modo de site para AMP e escolher modelos compatíveis.

Para obter mais detalhes, consulte nosso guia sobre como configurar corretamente o Google AMP em seu site WordPress.

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

Etapa 3: criar um novo formulário AMP no WPForms

Basta acessar a página WPForms ” Adicionar novo para criar um novo formulário do WordPress. O WPForms é compatível com AMP por padrão, portanto, você não precisará ativar nenhuma configuração especial.

Na tela de configuração do formulário, você pode escolher um modelo de formulário e inserir um nome na parte superior. Você pode selecionar o formulário em branco se quiser começar do zero ou usar um modelo pré-criado para editá-lo rapidamente de acordo com suas necessidades.

Para este tutorial, escolheremos o modelo“Simple Contact Form” (Formulário de contato simples).

Em seguida, você verá a página do construtor de formulários, onde há diferentes opções para personalizar o modelo.

A partir daqui, você pode adicionar ou remover campos de formulário. Para adicionar um novo campo ao formulário, basta clicar em um campo de formulário no painel esquerdo e arrastá-lo para o modelo de formulário.

Depois disso, você pode configurar as opções de campo. Basta clicar em um campo e, em seguida, as opções de campo aparecerão à esquerda.

Por exemplo, você pode editar o rótulo e o formato de um campo, torná-lo um campo obrigatório, configurar a lógica condicional e muito mais. Da mesma forma, você pode personalizar todos os outros campos.

Depois disso, você pode clicar na guia “Settings” (Configurações) para definir as configurações do formulário.

As configurações “General” permitem que você altere o nome do formulário, o texto do botão Enviar, o texto de processamento do botão Enviar e muito mais.

Em seguida, você pode clicar na guia “Notifications” (Notificações) para configurar notificações por e-mail para notificá-lo quando um usuário preencher o formulário.

Em seguida, você pode clicar na guia “Confirmation” (Confirmação) para configurar uma mensagem de confirmação a ser exibida quando um usuário enviar o formulário.

O WPForms permite que você mostre uma mensagem, mostre uma página ou redirecione os usuários para um URL no envio do formulário.

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

Etapa 4: 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.

No construtor de formulários do WPForms, você verá um botão “Incorporar” na parte superior. Basta clicar nele para adicionar seu formulário a uma nova página ou a uma já existente.

Em seguida, uma janela pop-up será aberta, solicitando que você crie uma nova página ou escolha uma página existente.

Selecionaremos a opção “Create New Page” (Criar nova página) para este tutorial.

Em seguida, você precisará digitar um nome para a nova página do formulário.

Feito isso, basta clicar no botão “Let’s Go”.

A partir daí, você verá uma visualização do seu formulário AMP no editor de conteúdo.

Como alternativa, você também pode usar o bloco WPForms para adicionar o formulário no editor de conteúdo. Basta selecionar seu formulário AMP no menu suspenso.

Em seguida, você pode publicar ou atualizar sua página.

Isso é tudo! Você não precisa configurar mais nada. O plugin WPForms adicionará suporte total a AMP ao seu formulário agora.

Se quiser ver como fica, abra a página no seu celular. Ou você pode abrir a página em seu navegador de desktop adicionando /amp/ ou /?amp no final do URL da página, assim:

https://www.example.com/contact/?amp

Como adicionar o Google reCAPTCHA ao seu formulário AMP

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

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

Primeiro, você precisará acessar o site do Google reCAPTCHA e clicar no botão “v3 Admin Console” no canto superior direito da página.

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

Em seguida, você precisa inserir o nome do seu site no campo Label (Rótulo). O Google AMP só é compatível com o reCAPTCHA v3, portanto, você deve escolher a opção de tipo de reCAPTCHA “Score based (v3)”.

Depois disso, digite seu nome de domínio (sem https://www.) no campo Domains (Domínios).

Em seguida, clique no botão “Submit” (Enviar).

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

Basta copiar essas chaves.

Agora, você tem as chaves da API do Google para adicionar o reCAPTCHA aos seus formulários. No entanto, há mais uma configuração necessária para garantir a compatibilidade do AMP com o reCATCHA.

Primeiro, você precisará clicar no link “Go to Settings” (Ir para configurações).

Em seguida, você verá as configurações do reCAPTCHA novamente com a caixa de seleção “Allow this key to work with AMP pages” (Permitir que essa chave funcione com páginas AMP). Basta marcar a caixa e clicar no botão “Save” (Salvar) abaixo.

Agora que você tem as chaves da API do Google para adicionar o reCAPTCHA nos formulários AMP, é necessário inseri-las no WPForms.

Você pode abrir a página WPForms ” Configurações ” CAPTCHA no painel do WordPress.

Em seguida, você pode rolar para baixo e escolher a opção “reCAPTCHA v3”.

Depois disso, basta colar a chave do site e a chave secreta. Quando terminar, basta clicar no botão “Save Settings” (Salvar configurações).

Agora que o Google reCAPTCHA foi adicionado ao WPForms, você pode ativá-lo em seus formulários quando necessário.

Vá para WPForms ” Todos os formulários e selecione o formulário em que você deseja ativar o reCAPTCHA. Basta clicar no botão “Edit” (Editar) abaixo do nome do formulário.

Quando a tela de configuração do formulário for exibida, clique na guia “Settings” (Configurações) e selecione a guia “Spam Protection and Security” (Proteção e segurança contra spam).

A partir daí, basta ativar a opção Google v3 reCAPTCHA.

Feito isso, salve o formulário clicando no botão “Save” (Salvar) no canto superior direito.

Depois disso, você poderá acessar novamente sua página de contato e ver o formulário AMP com reCAPTCHA em ação.

Esperamos que este artigo tenha ajudado você a aprender a criar facilmente formulários AMP no WordPress. Talvez você também queira ver nosso guia sobre como criar formulários em conformidade com o GDPR no WordPress e nossa seleção especializada dos melhores plugins de pesquisa para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.