Como Criar um Formulário de Registro de Usuário Personalizado no WordPress

Se você está gerenciando um site de associação WordPress ou outro site que permite o registro de usuários, uma experiência de inscrição perfeita é muito importante. Mas você pode ter notado que o formulário de registro de usuário padrão do WordPress é um pouco básico.

Como este formulário padrão não possui opções de personalização e exibe a marca do WordPress, ele pode conflitar com o design do seu site.

Aqui no WPBeginner, entendemos a importância de manter uma marca consistente em todos os pontos de contato, incluindo o registro de usuários.

Ao adicionar um formulário de registro personalizado, você pode melhorar a experiência do usuário para novos visitantes, garantir uma identidade de marca coesa e até mesmo aumentar os registros de usuários em seu site WordPress.

Este artigo irá guiá-lo através do processo de criação de formulários de registro personalizados no front-end do WordPress.

Por que adicionar um formulário de registro de usuário personalizado no WordPress?

A página de registro de usuário padrão do WordPress exibe a marca e o logotipo do WordPress, o que não combina com o restante do design do seu site WordPress.

Criar um novo formulário de registro de usuário permite que você adicione o formulário de registro em qualquer página do site e ajuda a oferecer uma experiência de usuário mais consistente durante o processo de registro.

Com um formulário de registro, você pode coletar informações específicas de seus usuários que podem ser exclusivas do seu blog WordPress ou negócio.

Isso pode incluir detalhes de contato adicionais, preferências ou qualquer outra informação relevante para a funcionalidade do seu site.

Por exemplo, se você está organizando um evento, um formulário de inscrição o ajudará a coletar detalhes essenciais dos participantes, como restrições alimentares, preferências de sessão ou requisitos especiais.

Um formulário de registro de usuário personalizado também permite que você redirecione os usuários após o registro. Você pode até exibir campos adicionais de perfil de usuário, combiná-los com um formulário de login personalizado no front-end e conectá-lo ao seu serviço de marketing por e-mail.

Dito isso, vamos dar uma olhada em como criar um formulário de registro de usuário personalizado no WordPress, passo a passo.

Como Criar um Formulário de Registro de Usuário Personalizado no WordPress

A maneira mais fácil de criar um formulário de registro de usuário personalizado é usando o WPForms. Na nossa opinião, é o melhor plugin de formulário de contato do WordPress. Ele permite que você crie todos os tipos de novos formulários no WordPress.

Na WPBeginner, usamos o WPForms para todas as nossas necessidades de formulário de contato, bem como para nossa pesquisa anual. Tivemos apenas boas experiências com a ferramenta. Apreciamos particularmente que seu construtor de arrastar e soltar o torna super fácil de usar.

Para saber mais, veja nossa revisão do WPForms.

Primeiro, você precisa instalar e ativar o plugin WPForms. Para instruções mais detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página WPForms » Configurações na barra lateral de administração do WordPress para inserir sua chave de licença.

Você pode obter esta chave em sua conta no site do WPForms.

Assim que a chave for verificada, você precisará visitar a página WPForms » Addons no painel do WordPress.

A partir daqui, localize o ‘User Registration Addon’ e clique no botão ‘Install Addon’ abaixo dele.

O WPForms agora instalará e ativará o User Registration Addon em seu site WordPress. Você verá o status mudar para ‘Active’ quando o addon for instalado.

Agora você está pronto para criar seu formulário de registro de usuário personalizado.

Para fazer isso, visite a página WPForms » Add New na barra lateral do administrador.

Isso o levará à página ‘Select a Template’, onde você pode começar digitando um nome para o formulário que está prestes a criar.

Depois de fazer isso, basta localizar o modelo ‘Formulário de Registro de Usuário’ e clicar no botão ‘Usar Modelo’ abaixo dele.

Isso abrirá o construtor de formulários WPForms na sua tela. Na coluna da direita, você notará as opções de campo e uma prévia do formulário no canto esquerdo da tela.

O formulário de registro padrão já possui os campos de nome, nome de usuário, senha, e-mail e uma breve biografia adicionados.

No entanto, você pode facilmente adicionar mais campos ao formulário do painel esquerdo e também arrastar os campos para reorganizar sua ordem.

O plugin também permite editar cada campo do formulário. Para fazer isso, basta clicar em qualquer campo do formulário e você verá ‘Opções de Campo’ aparecerem na coluna da esquerda.

A partir daqui, você pode alterar o rótulo do campo, editar seu formato, adicionar uma descrição, configurar a formatação condicional, definir o campo como obrigatório e muito mais.

Quando terminar, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas configurações.

Observação: Se você deseja enviar notificações por e-mail para usuários registrados, consulte nosso tutorial sobre como enviar e-mails de confirmação após o envio de formulário WordPress.

Adicionando Campos Personalizados ao Seu Formulário de Registro de Usuário Personalizado

O WPForms também permite conectar campos de perfil de usuário personalizados ao seu formulário de registro de usuário.

Para fazer isso, você precisará adicionar campos de perfil de usuário adicionais ao seu site WordPress, e a maneira mais fácil de fazer isso é usando um plugin do WordPress.

Neste tutorial, estamos usando o plugin Advanced Custom Fields. No entanto, o recurso de mapeamento de campos do WPForms funcionará com qualquer plugin que use campos personalizados padrão do WordPress para adicionar e armazenar metadados de usuário.

Primeiro, você precisa instalar e ativar o plugin Advanced Custom Fields. Para mais detalhes, você pode consultar nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação do plugin, vá para a página ACF » Grupos de Campos na barra lateral de administração do WordPress. Aqui, clique no botão ‘+ Adicionar Grupo de Campos’.

Isso o levará para a página ‘Adicionar Novo Grupo de Campos’, onde você pode começar digitando um título para o grupo de campos.

Para este tutorial, criaremos um campo personalizado para detalhes de contas de mídia social.

Depois disso, role para baixo até o menu suspenso ‘Tipo de Campo’ e escolha um tipo para o campo personalizado. Você pode selecionar texto, números, imagens, arquivos, caixas de seleção, URLs, senhas e muito mais.

Depois de fazer isso, insira um Rótulo de Campo que aparecerá na página de perfil.

Por exemplo, se você quiser adicionar um campo personalizado para coletar perfis do Facebook, poderá nomear o rótulo do campo como ‘Facebook’.

Você notará que o Nome do Campo será gerado automaticamente conforme você insere um rótulo de campo, mas você pode editá-lo.

Em seguida, mude para a aba ‘Validação’ na seção ‘Rótulo’. Aqui, você pode ativar o interruptor ‘Obrigatório’ para tornar obrigatório que os usuários preencham este campo personalizado antes de enviar o formulário.

Você pode até definir um limite de caracteres para o campo a partir daqui.

Depois de fazer isso, basta mudar para a aba ‘Apresentação’ no topo.

Agora você pode adicionar instruções para autores, texto de espaço reservado para o campo, atributos de wrapper e muito mais.

Depois disso, você também pode adicionar lógica condicional ao campo personalizado que está criando, mudando para a aba ‘Lógica Condicional’ no topo.

Depois de fazer suas alterações, role para baixo até a seção ‘Regras de Localização’. A partir daqui, você deve criar um conjunto de regras para determinar quais telas usarão esses campos personalizados.

Como queremos que este campo apareça para todos os perfis de usuário, teremos que selecionar a opção ‘Função do Usuário’ no menu suspenso à esquerda.

Depois disso, deixe o menu suspenso no meio como está e, em seguida, escolha a opção ‘Todos’ no menu suspenso à direita.

Agora, o grupo de campos personalizados que estamos criando será exibido para todos os perfis de usuário.

Em seguida, mude para a aba ‘Configurações do Grupo’ no topo.

Uma vez lá, certifique-se de que o grupo de campos esteja ativo deslizando o interruptor de Não para Sim.

Depois de fazer isso, você também pode adicionar outros campos personalizados ao grupo de campos clicando no botão ‘Adicionar Campo’ no topo da página.

Por exemplo, se você quiser criar vários campos de mídia social, poderá clicar no botão ‘Adicionar Campo’ e começar a personalizar o campo para outras plataformas de mídia social.

Lembre-se de que todos os campos que você criar farão parte do mesmo grupo de campos.

Quando terminar, não se esqueça de clicar no botão ‘Salvar Alterações’ no topo para armazenar suas configurações.

Agora você publicou com sucesso seu grupo de campos.

Agora, para visualizar o campo personalizado que você criou, acesse a página Usuário » Perfil na área administrativa.

Aqui, você verá seus campos personalizados adicionados na parte inferior da página de perfil.

Agora que você criou um campo de perfil de usuário personalizado, precisará adicioná-lo ao formulário de registro de usuário personalizado no WPForms.

Depois disso, você também precisará garantir que o campo do formulário seja mapeado para o campo personalizado para que os dados sejam armazenados corretamente.

Para fazer isso, visite a página WPForms » Todos os Formulários no painel do WordPress. Em seguida, clique no link ‘Editar’ abaixo do formulário de registro de usuário que você acabou de criar e salvar anteriormente.

Isso abrirá seu formulário no construtor de formulários do WPForms. Assim que estiver lá, basta arrastar um campo do painel esquerdo para adicioná-lo ao seu formulário.

Neste exemplo, estamos adicionando um campo ‘Website/URL’ ao nosso formulário.

Ao adicionar o campo Website/URL, clique nele para abrir as propriedades dos campos na coluna esquerda.

Agora, vá em frente e altere o rótulo do campo de Website/URL para o nome do grupo de campos que você criou.

Se desejar, você também pode adicionar uma descrição para o campo.

Depois disso, não se esqueça de clicar no botão ‘Salvar’ para salvar seu formulário.

Em seguida, você precisa clicar no botão ‘Configurações’ no canto direito para configurações avançadas do formulário e mapeamento de campos. Na página Configurações, clique na aba ‘Registro de Usuário’.

O WPForms agora mostrará seus campos de formulário e um menu suspenso abaixo deles para selecionar o campo de registro do WordPress com o qual mapeá-lo.

Você notará que o WPForms mapeará automaticamente seus campos padrão como Nome, E-mail, Senha e muito mais.

A partir daqui, escolha a opção de nome do seu grupo de campos no menu suspenso sob a opção ‘Website’.

Depois disso, role para baixo até a seção ‘Metadados Personalizados do Usuário’.

Você pode inserir o nome do grupo de campos que criou anteriormente na opção de chave de metadados personalizada e, em seguida, selecionar o campo de formulário personalizado com o qual deseja mapeá-lo no menu suspenso.

Observação: Se você deseja enviar notificações por e-mail para usuários registrados, consulte nosso tutorial sobre como enviar e-mails de confirmação após o envio de formulários do WordPress.

Por fim, clique no botão ‘Salvar’ no canto superior direito da tela para salvar suas configurações.

Adicionando Seu Formulário de Registro Personalizado no WordPress

O WPForms torna super simples adicionar formulários às suas postagens, páginas e widgets de barra lateral do WordPress.

Primeiro, você precisa abrir uma postagem/página existente ou nova onde deseja adicionar o formulário de registro personalizado.

Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo para abrir o menu de blocos.

A partir daqui, localize e adicione o bloco WPForms à página/postagem.

Depois disso, você pode selecionar seu formulário de registro personalizado no menu suspenso no próprio bloco.

Agora você verá a prévia do seu formulário de registro no editor do WordPress. Prossiga e publique sua postagem ou página para ver o formulário de registro personalizado em ação.

Adicionar o Formulário Personalizado de Registro de Usuário à Barra Lateral

O WPForms também permite que você adicione seu formulário personalizado de registro de usuário na sua barra lateral. Simplesmente visite a página Aparência » Widgets na área de administração e clique no botão ‘Adicionar Bloco’ (+).

Isso abrirá o menu de blocos de onde você pode adicionar o bloco WPForms na aba de widgets na página ‘Widgets’.

Depois disso, simplesmente selecione o formulário de registro de usuário no menu suspenso no bloco WPForms.

Quando terminar, não se esqueça de clicar no botão ‘Atualizar’ para salvar suas configurações.

Agora, você pode visitar seu site para ver o formulário de registro de usuário na barra lateral do site.

Adicionar o Formulário Personalizado de Registro de Usuário no Editor de Site Completo

Se você estiver usando um tema do WordPress baseado em blocos, você não terá a página de widgets. Para adicionar o formulário de registro na barra lateral com o Editor de Site Completo (FSE), vá para a página Aparência » Editor na barra lateral de administração.

Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo para abrir o menu de blocos.

A partir daqui, você deve encontrar e adicionar o bloco WPForms ao seu local preferido em seu site.

Depois disso, selecione o formulário de registro no menu suspenso no próprio bloco.

Finalmente, clique no botão ‘Salvar’ para armazenar suas configurações.

Agora, visite seu site para ver o formulário personalizado de registro de usuário em ação.

Bônus: Crie uma Página de Login Personalizada com seu Formulário de Registro

Quando você adiciona seu formulário de registro a uma página em seu site, o WordPress usará o layout, modelo e estilo do seu tema por padrão.

No entanto, você pode criar uma página de registro impressionante do zero usando um construtor de páginas de destino do WordPress.

SeedProd é o melhor construtor de páginas para WordPress. É fácil de usar e oferece um construtor de arrastar e soltar que ajuda você a criar todos os tipos de landing pages. O plugin também oferece modelos pré-construídos e muitos recursos de personalização.

Algumas de nossas marcas parceiras o usaram para criar temas personalizados, tornando seus sites visualmente atraentes e recebendo elogios de seus usuários. Para saber mais, você pode ler nossa análise do SeedProd.

Primeiro, você deve instalar e ativar o plugin SeedProd em seu site. Para instruções detalhadas, você pode consultar nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, visite a página SeedProd » Configurações para inserir a chave de licença do plugin. Você pode encontrar essas informações em sua conta no site do SeedProd.

Após verificar sua chave, você está pronto para criar uma página de login com seu formulário de registro.

Para começar, vá para a tela SeedProd » Landing Pages na barra lateral de administração e clique no botão ‘Configurar uma Página de Login’.

Isso o levará para a tela ‘Escolher um Novo Modelo de Página’, onde você pode selecionar um modelo pré-fabricado para a página de login que você está prestes a criar.

Após selecionar um modelo, uma janela pop-up aparecerá.

Agora você deve inserir um nome para sua página de destino e uma URL. Assim que terminar, clique no botão ‘Salvar e Começar a Editar Página’.

Em seguida, você pode editar sua página de login usando o construtor de landing pages de arrastar e soltar do SeedProd.

Para fazer isso, selecione um bloco do menu à sua esquerda e arraste-o para onde você deseja adicioná-lo em sua página de login.

Por exemplo, você pode adicionar um bloco de título, imagem, vídeo ou compartilhamento social à sua página de destino.

Depois de fazer isso, vá para a seção Blocos Avançados na coluna da esquerda.

A partir daqui, selecione o bloco ‘Formulário de Contato’ e coloque-o em sua página de login.

Sugerimos que você exclua o bloco existente de Nome de Usuário e Senha do modelo para que os usuários não precisem inserir as credenciais de login duas vezes.

Em seguida, clique no bloco WPForms em sua página de login para abrir suas configurações na coluna da esquerda.

Agora você verá uma opção para ‘Selecionar um Formulário’ no menu.

A partir daqui, selecione seu formulário de registro no menu suspenso.

Agora você deve ver uma prévia do seu formulário de registro no construtor de landing pages.

Por fim, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas alterações.

Depois disso, você pode ir para a aba ‘Conectar’ e integrar diferentes serviços de e-mail marketing ao seu formulário de registro.

O SeedProd se integra facilmente a serviços populares de e-mail marketing como Drip, Constant Contact, AWeber, e outros, o que pode ajudar a melhorar sua lista de e-mails.

Em seguida, você pode ir para a aba ‘Configurações da Página’ e alterar o Status da Página para Publicar nas configurações Gerais.

Você pode até editar o título e a URL da página e habilitar o link do SeedProd nesta aba.

Se você quiser otimizar sua página para mecanismos de busca, vá para a aba SEO.

A partir daqui, você pode configurar as definições inserindo um título SEO, descrição, miniatura de mídia social e muito mais.

O SeedProd também permite adicionar trechos de código nas configurações de Scripts. Assim que estiver satisfeito com as configurações, basta clicar no botão ‘Salvar’ no topo e fechar o construtor de páginas.

Depois disso, vá para a tela SeedProd » Landing Pages e alterne o interruptor sob a Página de Login para tornar sua página ‘Ativa’.

Agora você pode visitar sua página de login para ver o formulário de registro em ação.

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente um formulário de registro de usuário personalizado no WordPress. Você também pode querer ver nosso guia definitivo para usar formulários do WordPress ou nossas principais escolhas para os melhores plugins de registro de usuário do WordPress.

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