Como criar um formulário de registro de usuário personalizado no WordPress

Se você estiver administrando um site de associação do WordPress ou outro site que permita o registro de usuários, uma experiência de registro perfeita é muito importante. No entanto, o formulário de registro de usuário padrão do WordPress é um pouco básico.

Como esse formulário padrão não tem opções de personalização e exibe a marca do WordPress, ele pode entrar em conflito com o design do seu site.

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

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 no seu site WordPress.

Este artigo o guiará pelo processo de criação de formulários de registro front-end personalizados no WordPress.

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

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

A criação de um novo formulário de registro de usuário permite adicionar o formulário de registro em qualquer página do site e ajuda a proporcionar uma experiência de usuário mais consistente durante o processo de registro.

Com um formulário de registro, é possível coletar informações específicas dos usuários que podem ser exclusivas do seu blog ou empresa no WordPress.

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

Por exemplo, se você estiver 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 redirecionar os usuários após o registro. Você pode até mesmo exibir campos adicionais de perfil de usuário, combiná-los com um formulário de login front-end personalizado 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 é usar o WPForms. Ele é o melhor plug-in de formulário de contato do WordPress que permite criar todos os tipos de novos formulários no WordPress.

O WPForms é muito fácil de usar e oferece um construtor de formulários do tipo arrastar e soltar, para que você possa personalizar o formulário de registro como quiser. O plug-in também se integra a serviços populares de marketing por e-mail e serviços de pagamento como o PayPal.

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

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

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

Depois que a chave for verificada, você precisará acessar a página WPForms ” Addons no painel do WordPress.

A partir daí, localize o “User Registration Addon” e clique no botão “Install Addon” abaixo dele.

O WPForms agora instalará e ativará o Addon de Registro de Usuário no seu site WordPress. Você verá o status mudar para “Ativo” quando o addon for instalado.

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

Para fazer isso, acesse a página WPForms ” Adicionar novo na barra lateral do administrador.

Isso o direcionará para a página “Select a Template” (Selecionar um modelo), 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 “User Registration Form” (Formulário de registro de usuário) e clicar no botão “Use Template” (Usar modelo) abaixo dele.

Isso abrirá o construtor de formulários WPForms na sua tela. Aqui você verá as opções de campo na coluna da direita e uma visualização do formulário no canto esquerdo da tela.

Agora, o formulário de registro padrão já terá os campos de nome, nome de usuário, senha, e-mail e biografia curta adicionados a ele.

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

O plug-in também permite que você edite cada campo do formulário. Para fazer isso, basta clicar em qualquer campo do formulário e você verá “Field Options” (Opções de campo) na coluna da esquerda.

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

Quando terminar, não se esqueça de clicar no botão “Save” (Salvar) para armazenar suas configurações.

Observação: se quiser enviar notificações por e-mail aos usuários registrados, consulte nosso tutorial sobre como enviar e-mails de confirmação após o envio do formulário do WordPress.

Adição de campos personalizados no formulário de registro de usuário personalizado

O WPForms também permite que você conecte campos de perfil de usuário personalizados ao seu formulário de registro de usuário.

Para isso, será necessário adicionar campos adicionais de perfil de usuário ao seu site WordPress, e a maneira mais fácil de fazer isso é usando um plug-in do WordPress.

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

Primeiro, você precisa instalar e ativar o plug-in Advanced Custom Fields. Para obter mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação do plug-in, vá para a página ACF ” Field Groups na barra lateral de administração do WordPress. Aqui, clique no botão “+ Add Field Group”.

Isso o direcionará para a página “Add New Field Group”, 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 “Field Type” (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 será exibido 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 Field Name será gerado automaticamente quando você inserir um rótulo de campo, mas é possível editá-lo.

Em seguida, mude para a guia “Validation” (Validação) na seção “Label” (Rótulo). Aqui, você pode ativar a opção “Required” (Obrigatório) para tornar obrigatório o preenchimento desse campo personalizado pelos usuários antes de enviar o formulário.

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

Depois de fazer isso, basta alternar para a guia “Presentation” (Apresentação) na parte superior.

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, alternando para a guia “Conditional Logic” (Lógica condicional) na parte superior.

Depois de fazer as alterações, role a tela para baixo até a seção “Location Rules” (Regras de localização). A partir daí, você deve criar um conjunto de regras para determinar quais telas usarão esses campos personalizados.

Como queremos que esse campo seja exibido para todos os perfis de usuário, teremos de selecionar a opção “User Role” (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 “All” (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, vá para a guia “Group Settings” (Configurações do grupo) na parte superior.

Quando estiver lá, certifique-se de que o grupo de campos esteja ativo, deslizando o botão de alternância 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 “Add Field” (Adicionar campo) na parte superior da página.

Por exemplo, se você quiser criar vários campos de mídia social, poderá clicar no botão “Add Field” (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 “Save Changes” (Salvar alterações) na parte superior para armazenar suas configurações.

Você já publicou seu grupo de campo com sucesso.

Agora, para visualizar o campo personalizado que você criou, vá até a página User ” Profile (Usuário ” Perfil ) na área de administração.

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, terá de adicioná-lo ao formulário de registro de usuário personalizado no WPForms.

Depois disso, você também terá de mapear o campo do formulário para o campo personalizado para que os dados sejam armazenados corretamente.

Para isso, acesse a página WPForms ” All Forms (Todos os formulários ) no painel do WordPress. Em seguida, clique no link “Editar” abaixo do formulário de registro de usuário que acabou de criar e salvar anteriormente.

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

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

Depois de adicionar o campo Website/URL, clique nele para abrir as propriedades dos campos na coluna da 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 “Save” (Salvar) para salvar o formulário.

Em seguida, você precisa clicar no botão “Settings” (Configurações) no canto direito para obter configurações avançadas do formulário e mapeamento de campos. Na página Settings (Configurações), clique na guia “User Registration” (Registro de usuário).

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

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

A partir daí, escolha a opção de nome do grupo de campos no menu suspenso sob a opção “Website”.

Depois disso, role para baixo até a seção “Custom User Meta” (Meta de usuário personalizado).

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

Observação: se quiser enviar notificações por e-mail aos 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 “Save” (Salvar) no canto superior direito da tela para salvar suas configurações.

Adicionando seu formulário de registro de usuário personalizado no WordPress

O WPForms simplifica muito a adição de formulários aos seus posts, páginas e widgets da barra lateral do WordPress.

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

Quando estiver lá, clique no botão “Add Block” (+) no canto superior esquerdo para abrir o menu de blocos.

A partir daí, localize e adicione o bloco WPForms à página/post.

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

Agora você verá a visualização do seu formulário de registro no editor do WordPress. Vá em frente e publique seu post ou página para ver o formulário de registro personalizado em ação.

Adicionar o formulário de registro de usuário personalizado à barra lateral

O WPForms também permite que você adicione seu formulário de registro de usuário personalizado na barra lateral. Basta acessar a página Appearance ” Widgets na área de administração e clicar no botão “Add Block” (+).

Isso abrirá o menu de blocos, no qual você poderá adicionar o bloco WPForms à guia da barra lateral na página “Widgets”.

Depois disso, basta selecionar o formulário de registro de usuário no menu suspenso do bloco WPForms.

Quando terminar, não se esqueça de clicar no botão “Update” (Atualizar) para armazenar suas configurações.

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

Adicionar o formulário de registro de usuário personalizado no Full Site Editor

Se 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 Full Site Editor (FSE), vá para a página Appearance ” Editor na barra lateral do administrador.

Uma vez lá, clique no botão “Add Block” (+) no canto superior esquerdo para abrir o menu de bloqueio.

A partir daí, você deve localizar e adicionar o bloco WPForms ao local de sua preferência em seu site.

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

Por fim, clique no botão “Save” (Salvar) para armazenar suas configurações.

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

Bônus: Crie uma página de login personalizada com seu formulário de registro

Ao adicionar o formulário de registro a uma página do seu site, o WordPress usará o layout, o modelo e o 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.

O SeedProd é o melhor construtor de páginas para WordPress. Ele é fácil de usar e oferece um construtor de arrastar e soltar que ajuda a criar todos os tipos de páginas de destino. O plugin também oferece modelos pré-criados e muitos recursos de personalização.

Primeiro, você deve instalar e ativar o plug-in SeedProd em seu site. Para obter instruções detalhadas, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

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

Depois de verificar sua chave, você estará pronto para criar uma página de login com o formulário de registro.

Para começar, vá até a tela SeedProd ” Landing Pages na barra lateral do administrador e clique no botão “Set up a Login Page” (Configurar uma página de login).

Isso o levará à tela “Choose a New Page Template” (Escolher um novo modelo de página), na qual você poderá selecionar um modelo predefinido para a página de login que está prestes a criar.

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

Agora você deve inserir um nome para sua página de destino e um URL. Feito isso, clique no botão “Save and Start Editing Page” (Salvar e começar a editar a página).

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

Para fazer isso, selecione um bloco no menu à esquerda e arraste-o para o local onde deseja adicioná-lo à página de login.

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

Depois de fazer isso, vá para a seção Advanced Blocks (Blocos avançados) na coluna da esquerda.

Aqui, selecione o bloco “Contact Form” (Formulário de contato) e coloque-o na sua página de login.

Sugerimos que você exclua o bloco de nome de usuário e senha existente 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.

Aqui, vá em frente e selecione seu formulário de registro no menu suspenso.

Agora você deve ver uma visualização 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 até a guia “Connect” (Conectar) e integrar diferentes serviços de marketing por e-mail ao seu formulário de registro.

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

Em seguida, vá para a guia “Page Settings” (Configurações da página) e altere o status da página para ” Publish” (Publicar ) nas configurações gerais.

Você pode até mesmo editar o título e o URL da página e ativar o link do SeedProd nessa guia.

Se quiser otimizar sua página para os mecanismos de pesquisa, vá para a guia SEO.

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

O SeedProd também permite que você adicione trechos de código nas configurações de Scripts. Quando estiver satisfeito com as configurações, basta clicar no botão “Save” (Salvar) na parte superior e fechar o construtor de páginas.

Depois disso, vá para a tela SeedProd ” Landing Pages e alterne o botão abaixo da 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 o tenha ajudado a aprender como adicionar facilmente um formulário de registro de usuário personalizado no WordPress. Talvez você também queira ver nosso guia definitivo para usar formulários do WordPress ou nossas principais opções dos melhores plug-ins de registro de usuário do 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.