Como criar uma página personalizada de login e cadastro no WordPress?

Criar uma página de login e cadastro personalizada no WordPress ajuda a proporcionar aos usuários uma experiência mais fluida e alinhada à sua marca. Em vez das telas padrão do WordPress, você pode criar páginas que combinem com o estilo do seu site e ofereçam melhor usabilidade.

Uma configuração personalizada também permite adicionar recursos úteis, como logins sociais , segurança reforçada, funções de usuário e mensagens personalizadas. Isso torna o processo de login mais profissional e fácil de usar.

Neste guia, você aprenderá as maneiras mais fáceis de criar e personalizar suas páginas de login e cadastro sem comprometer o funcionamento do seu site ou escrever códigos complexos.

Passos para criar uma página de login e registro personalizada no WordPress

Uma página de login e cadastro personalizada no WordPress pode ser a chave para criar conexões mais profundas com seu público. Vamos embarcar juntos nessa jornada e descobrir como transformar seu site em um centro online interativo e sob medida.

Criar login personalizado

O design personalizado do WordPress cria uma página de login sob medida para que os usuários insiram suas credenciais e acessem suas contas. Ao contrário das páginas de login padrão, as personalizadas são elaboradas para combinar com o estilo e a identidade visual do site, proporcionando uma experiência de usuário perfeita. Elas também podem incorporar recursos adicionais, como medidas de segurança web aprimoradas ou campos para coletar informações específicas do usuário durante o cadastro. É uma abordagem personalizada para que os usuários façam login e interajam com segurança em um site WordPress.

Saiba mais : Como adicionar o reCAPTCHA ao WordPress para aumentar a segurança do seu site?

Eis como você deve proceder para criar um formulário com o WP Forms –

Passo 1: Instale o plugin WPForms

Primeiramente, você precisará instalar e ativar o plugin WPForms.

Lembre-se: para usar os recursos de cadastro e login de usuários, você precisa do WPForms Pro ou de uma versão superior. A versão Pro inclui o complemento de Cadastro de Usuários, que facilita muito a criação de páginas de login personalizadas.

Depois de instalar o WPForms, basta acessar WPForms ⟶ Complementos .

Continue rolando a página para baixo até encontrar o complemento de registro de usuário . Clique no botão para instalá-lo e desbloquear a próxima etapa.

Ative o Modo de Manutenção do WordPress para manter os visitantes afastados enquanto você realiza todo o processo sem interrupções.

Saiba mais : Terceirizando tarefas de manutenção do WordPress para maximizar a eficiência

Preparados para começar! Vamos criar nosso novo formulário de login personalizado.

Passo 2: Crie um formulário de login personalizado para WordPress

Com a instalação do WPForms concluída, é hora de criar um novo formulário de login do WordPress que reflita a aparência e o estilo únicos do nosso site.

Acesse WPForms ⟶ Clique em Adicionar novo para começar

Em seguida, você será direcionado para a tela de seleção de modelos do WPForms. Graças ao complemento de registro de usuários, você pode acessar diversos modelos especializados com recursos exclusivos, conforme ilustrado abaixo.

Ao abrir o formulário no construtor de formulários, você notará que ele inclui campos para Nome de usuário, Senha e Lembrar-me, tornando-o uma solução de login personalizada bastante completa.

O campo "Lembrar-me" é exclusivo e está disponível apenas neste modelo. Ele permite que os usuários façam login automaticamente sempre que retornarem ao seu site após usarem este formulário. Você pode manter o modelo como está ou adicionar mais recursos.

Explicaremos como fazer isso na próxima etapa.

Leitura interessante : Os 5 principais plugins de formulário indispensáveis ​​para WordPress

Passo 3: Adicione uma imagem de marca ao seu formulário de login

O WPForms permite editar modelos facilmente ou criar novos formulários. Por exemplo, podemos adicionar a identidade visual da nossa marca ao formulário de login para torná-lo único.

Uma maneira é inserir uma imagem de cabeçalho que represente nossa marca. Para fazer isso, arraste e solte o Conteúdo na parte superior do formulário, logo abaixo do título.

Após adicionar o campo Conteúdo ao seu formulário, clique nele para acessar as Opções do Campo .

Hora de usar a criatividade! Acesse o editor WYSIWYG à esquerda e comece a adicionar imagens ou criar textos personalizados para o seu formulário.

Vamos dar um toque especial ao nosso formulário de login do WordPress com a identidade visual da sua marca. Basta clicar no "Adicionar mídia" para fazer o upload de uma imagem .

Prepare-se para dar um toque especial à sua galeria de mídia. Clicar no botão "Adicionar mídia" abrirá a janela modal . É o momento ideal para fazer o upload de imagens, como você já faz normalmente no WordPress.

Lembre-se de clicar no Salvar para concluir o negócio!

Leitura complementar : Os melhores plugins de formulário de contato para WordPress

Passo 4: Personalize as configurações do seu formulário de login personalizado

Agora, vamos explorar as configurações do formulário de login. Isso nos permite gerenciar o botão do formulário e a página para onde nossos visitantes serão redirecionados após o envio.

Para começar, clique em Configurações , localizado no lado esquerdo do construtor de formulários.

Ao acessar as configurações, a Geral já está selecionada, que é exatamente onde precisamos estar.

Nas configurações gerais, basta rolar para baixo até o texto do botão Enviar e atualizá-lo para " Entrar" .

Além disso, ajustamos o texto de processamento do botão Enviar para informar aos usuários que o login está em andamento. Sinta-se à vontade para personalizar esta mensagem.

Agora, vamos navegar até a de Confirmações .

Aqui, você pode selecionar a ação a ser tomada após o envio do formulário de login. Você pode direcionar os usuários para a área administrativa do WordPress, mas enviá-los de volta para a página inicial é mais lógico para muitos sites.

Neste caso, redirecionaremos os usuários para a página inicial.

Antes de prosseguirmos, há mais uma configuração a ser revisada.

Na aba Configurações do construtor de formulários, role a tela para baixo e você verá o Registro de Usuário . Clique nele para exibir as opções.

Você pode ocultar este formulário de usuários já conectados ativando o botão. Personalize a mensagem a ser exibida em vez do formulário quando um usuário já estiver conectado usando a caixa de texto fornecida.

Agora, é hora de explorar! Sinta-se à vontade para conferir as outras configurações e ajustar o que quiser. Quando estiver satisfeito, basta clicar no Salvar na parte superior do construtor de formulários para confirmar as alterações.

Veja também : Como instalar o WordPress localmente no Mac

Etapa 5: Publique seu formulário de login personalizado

Que momento emocionante! Seu formulário de login novinho em folha está pronto para ser usado pelo mundo.

Onde colocá-lo? As opções são tão ilimitadas quanto a sua imaginação:

• Enfeita as páginas com sua presença.
• Incorpore-o perfeitamente em suas postagens.
• Deixe que brilhe na barra lateral.
• Ou acomode-o cuidadosamente no rodapé.

Em seguida, vamos criar uma página de login personalizada para WordPress. Pronto para começar? Basta clicar no "Incorporar " na parte superior do construtor de formulários!

Eis o que está prestes a acontecer –

1. Uma janela modal será exibida perguntando onde você deseja incorporar o formulário. Para este exemplo, criaremos uma nova página. Clique em Criar nova página .
2. Agora, dê um nome à sua página. Depois disso, clique em Vamos lá .
3. Essa ação o levará ao editor de blocos do WordPress com o formulário de login incorporado.
4. Este é um ótimo lugar para utilizar as opções de estilo de formulário no bloco WPForms para personalizar facilmente a aparência de seus campos, rótulos e botões.
5. Quando estiver satisfeito com a aparência do seu formulário de login personalizado, basta clicar no Publicar para publicar sua página de login personalizada.

Pronto! Sua página de login personalizada do WordPress já está online e pronta para uso.

Dica profissional: Se você utilizou a "Ocultar se conectado" , lembre-se de que precisará sair do WordPress para visualizar o formulário finalizado. Caso contrário, a tela de login não ficará visível enquanto você estiver conectado. É um pequeno truque para garantir que tudo esteja correto antes da chegada dos visitantes!

Você sabia? – O novo plugin CF7 Blocks traz blocos para o Contact Form 7.

Passo 6: Adicione o formulário de login ao seu menu de navegação

Ah, você acaba de dar os toques finais no seu formulário de login personalizado. Excelente trabalho!

Agora, vamos garantir que seja facilmente acessível para seus visitantes. A chave? Adicioná-lo ao menu .

Para começar, acesse o painel do WordPress, clique em Aparência e selecione Menus .

Aparência ⟶ Menus

Em uma limpeza completa, seguimos os próximos passos –

1. Se o seu tema já tiver um menu de navegação, acesse Aparência e depois Menus no painel do WordPress. Selecione a sua página de login na coluna à esquerda e clique em Adicionar ao Menu .
2. Sua página de login agora aparecerá no lado direito, junto com outros itens do menu. Reorganize a ordem arrastando e soltando, se necessário.
3. Em seguida, escolha onde deseja que o menu apareça. A maioria dos temas oferece até 5 locais de exibição, como o cabeçalho ou o rodapé. Para este exemplo, vamos adicioná-lo ao cabeçalho, geralmente identificado como menu principal.
4. Clique em Menu Principal e, em seguida, clique em Salvar Menu na parte inferior para atualizá-lo.

Seu menu de navegação agora incluirá a nova página de login. Após atualizar ou criar o menu, certifique-se de visitar sua página inicial para verificar se tudo está correto.

5. Se o seu site ainda precisar de um menu, criá-lo é semelhante. Comece dando um nome ao seu novo menu em Estrutura do Menu .

Siga os mesmos passos descritos acima para adicionar a página de login à sua navegação. Se você também criou um formulário personalizado para redefinição de senha, considere adicioná-lo ao menu também.

Outro guia prático : Como criar um site de uma página no WordPress? (3 passos simples)

Passo 7: Redirecione a página de login do WordPress para sua página de login personalizada

Nessa etapa, você precisa garantir que qualquer pessoa que tente usar a página de login padrão do WordPress seja redirecionada para a sua nova página personalizada.

Para que isso aconteça, precisaremos de um plugin chamado WPCode e um pouquinho de conhecimento de programação.

O WPCode é um plugin prático que permite adicionar seu próprio código ao seu site WordPress gratuitamente. Depois de instalá-lo e ativá-lo, acesse Trechos de Código , clique em + Adicionar Trecho e selecione Adicionar Seu Código Personalizado para criar um novo trecho .

Em seguida, na tela seguinte, dê ao seu snippet um nome claro e fácil de lembrar. Por exemplo, nós o chamamos de "Redirecionamento para a Página de Login".

Em seguida, cole o código fornecido na área indicada:

add_filter( 'login_url', function( $login_url, $redirect, $force_reauth ){ // Altere aqui a URL da sua página de login $login_url = 'https://sulliesflowers.com/login/'; if ( ! empty( $redirect ) ) { $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url ); } if ( $force_reauth ) { $login_url = add_query_arg( 'reauth', '1', $login_url ); } return $login_url;}, 10, 3);

Certifique-se de substituir https://sulliesflowers.com/login/ pelo URL da sua página de login personalizada. Em seguida, clique no botão Salvar Snippet para salvar as alterações.

Você receberá uma mensagem de sucesso assim que seu redirecionamento for salvo e aplicado. Por fim, ative a configuração na parte superior da tela para ativar seu snippet.

A partir de agora, quando os usuários tentarem fazer login, serão direcionados para sua página personalizada.

Como criar um cadastro de usuário no WordPress?

Um formulário de cadastro de usuário personalizado é uma página da web customizada onde os visitantes podem se inscrever para criar contas em um site. Diferentemente da página de login, que é destinada a usuários frequentes, este formulário tem como objetivo dar as boas-vindas a novos visitantes e coletar seus dados para uma experiência sob medida. Com os formulários de cadastro do WordPress, você pode adicionar toques especiais com campos personalizados, integrando-os perfeitamente à identidade visual do seu site.

Um formulário de inscrição personalizado também permite coletar apenas as informações necessárias, mantendo o processo de cadastro simples e fácil de usar.

Outro guia prático : Como personalizar a página de redefinição de senha do WordPress?

Passo 1: Instale o plugin WPForms

A instalação do plugin é o primeiro passo. Certifique-se de investir no plano WPForms Pro , pois ele dá acesso ao complemento de Registro de Usuários, que utilizaremos para criar formulários de registro dinâmicos para os usuários do seu site com facilidade.

O que é excelente no WPForms é que você não precisa de nenhum de HTML , PHP ou CSS para criar seu formulário de registro no WordPress. Com seu construtor de formulários intuitivo de arrastar e soltar, qualquer pessoa pode criar facilmente um formulário personalizado que atenda às suas necessidades.

Passo 2: Ative o complemento de registro de usuários

Ativar o complemento é simples, pois ele se integra de forma perfeita e adequada ao seu site WordPress.

1. Acesse WPForms ⟶ Complementos na sua área administrativa do WordPress.
2. Percorra a lista de complementos ou digite " registro de usuário" no campo de pesquisa para localizar o complemento de Registro de Usuário.
3. Clique em Instalar Complemento para iniciar o processo de instalação.
4. Após a instalação, o status do complemento de Registro de Usuário mudará para Ativo . Parabéns! Você ativou o complemento de Registro de Usuário com sucesso.
5. Com o complemento de Registro de Usuários pronto, você pode começar a criar formulários de registro de usuários do WordPress sem esforço usando o WPForms.

Aprenda : Como migrar do Umbraco para o WordPress

Etapa 3: Criar formulário de registro de usuário do WordPress

Essa etapa permite coletar informações do usuário de forma integrada e simplificar o processo de registro no seu site WordPress.

Continue acompanhando –

1. Para criar um novo formulário de inscrição, navegue até WPForms ⟶ Adicionar novo .
2. Você será direcionado para a tela de configuração do formulário, onde poderá nomear seu formulário e selecionar um modelo.
3. Neste exemplo, vamos criar o formulário de inscrição do WordPress do zero, mas para uma opção mais rápida, você também pode começar com um modelo. Clique em Criar Formulário em Branco .

4. Você se encontrará na tela do construtor de formulários, com o formulário vazio, já que optamos por um formulário em branco.
5. O WPForms oferece amplas opções de personalização, incluindo diversos campos personalizados que você pode adicionar conforme necessário. Nos próximos passos, exploraremos esses recursos de registro.

Etapa 4: Personalizar os campos do formulário de registro de usuário

Vamos criar um formulário de cadastro elegante, mantendo-o enxuto e eficiente, com apenas os campos essenciais para coletar informações do usuário rapidamente. Formulários mais curtos significam menor probabilidade de abandono. No entanto, em nossa experiência, com o complemento de Abandono de Formulário

Agora, vamos adicionar um toque especial ao nosso formulário usando o construtor de arrastar e soltar. Basta selecionar um campo no menu à esquerda e soltá-lo no formulário à direita.

Repita o processo até que todos os campos desejados estejam no lugar.

Para o nosso formulário, incluímos:

1. Nome
2. E-mail
3. Texto em linha única (para inserir o nome de usuário)
4. Senha

Sinta-se à vontade para adicionar mais detalhes aos campos do seu formulário. Veja como personalizamos nosso campo de Texto de Linha Única para exibir "Nome de Usuário" , definimos um limite máximo de caracteres e até adicionamos uma máscara de entrada para controlar os caracteres permitidos para o nome de usuário.

Para ajustar qualquer campo, clique nele para exibir as Opções do Campo . Na Geral , você pode alterar o rótulo, adicionar uma descrição e até mesmo marcar o campo como obrigatório.

Mãos à obra!

Para saber mais : Umbraco vs WordPress: Como escolher a solução ideal para a gestão do seu conteúdo.

Etapa 5: Configurar as definições do formulário de registo de utilizadores do WordPress

Método de ativação do usuário

Nesta etapa, configuramos as definições do formulário de registo de utilizadores do WordPress para adequar o fluxo de utilizadores à sua preferência:

Comece clicando em Configurações ⟶ Registro de Usuário . Em seguida, ative a opção Habilitar Registro de Usuário .

Eis o que você pode gerenciar nesta seção:

• Mapeie cada campo do formulário para o campo correspondente no perfil do usuário.

• Escolha a função de usuário padrão para novos cadastros.

• Ative as notificações por e-mail para novos cadastros.

• Selecione a página de confirmação que os usuários veem após o cadastro.

Use os menus suspensos para vincular cada campo do formulário ao campo de perfil correto. Em seguida, role até a "Funções do Usuário" e escolha uma das funções predefinidas do seu site WordPress para novos usuários.

Alterar as configurações de registro de novos usuários

Continue rolando a página para baixo, passando pelas configurações mencionadas anteriormente, e você encontrará a seção Notificações por e-mail. Aqui, você pode ajustar as notificações para novos cadastros de usuários.

As opções incluem:

• Enviar um e-mail ao administrador quando um novo usuário se cadastra
• Enviar informações da conta ao usuário, e
• Notificar o usuário assim que sua conta for ativada

Se desejar personalizar o cabeçalho e o conteúdo desses e-mails, basta clicar no botão “Editar modelo” ao lado de cada tipo de notificação.

Outro guia: Como excluir usuários administradores invisíveis do WordPress?

Editar Formulário de Inscrição

Além de enviar e-mails de notificação, o WPForms também exibe uma mensagem de confirmação para os usuários após o envio do formulário.

Existem três tipos de confirmações à sua escolha:

1. Mensagem: Uma mensagem simples aparece confirmando que o formulário foi enviado.
2. Exibir página: Os usuários são direcionados para uma página específica do seu site como forma de agradecimento pelo cadastro.
3. Ir para o URL (Redirecionamento): Os usuários são redirecionados para um site diferente, como um de comércio eletrônico .

Você pode personalizar essas confirmações acessando Configurações ⟶ Confirmações . Em nosso exemplo, usamos o tipo de mensagem padrão, mas adicionamos instruções para o usuário. Se você quiser que os novos usuários sejam conectados automaticamente à sua nova conta do WordPress em vez de verem uma mensagem de agradecimento após se registrarem no seu site, salve as alterações.

Em seguida, vamos incorporar e publicar o formulário no seu site.

Etapa 6: Adicione o formulário de registro de usuário ao seu site

Depois de criar o formulário de cadastro e login de usuários do WordPress, é hora de adicioná-lo ao seu site WordPress.

1. Incorporando o formulário:
   • Clique no Incorporar no canto superior direito da tela do construtor de formulários.
   • Selecione Criar nova página e dê um nome à sua nova página. Em seguida, clique em Vamos lá .

• O WPForms irá redirecioná-lo para o seu editor WordPress com o seu novo formulário de inscrição já incorporado.
• Clique em Publicar quando estiver pronto. É isso! Sua página de cadastro agora está online no seu site WordPress.

2. Redirecionando a URL de registro padrão do WordPress:
   • Considere redirecionar o URL de registro padrão do WordPress para sua nova página de login personalizada.
   • A página de login padrão do WordPress pode parecer deslocada no seu site por ser muito simples e não combinar com o tema do seu site.

Agora, os usuários podem se cadastrar no seu site usando seu formulário de cadastro personalizado. Após o cadastro, você pode modificar as funções ou outras configurações de cada usuário na página de perfil padrão do WordPress.

Passo 7: Adicione sua página de cadastro ao menu do seu site

Depois de publicar o formulário de cadastro de novos usuários, você deve garantir que as pessoas o encontrem facilmente. Uma maneira de fazer isso é adicioná-lo ao menu principal do seu site WordPress.

Eis como:

1. Acesse Aparência ⟶ Menus no painel do WordPress.

2. Procure sua nova página de cadastro nas opções listadas à esquerda e adicione-a ao seu menu.
3. Se o seu tema do WordPress tiver uma página de cadastro antiga no menu, talvez seja necessário removê-la. Lembre-se de salvar as alterações.
4. Se precisar de ajuda, consulte um tutorial sobre menus do WordPress para obter orientações.

E pronto! Você aprendeu como criar um formulário de cadastro no WordPress, facilitando o cadastro de novos usuários no seu site.

Continue lendo : 10 principais motivos para usar o WordPress no seu site

Benefícios de criar uma página de login e registro personalizada no WordPress

Criar páginas personalizadas de login e cadastro para o seu site WordPress é uma estratégia inteligente que pode trazer inúmeras vantagens para você e seus usuários. Controlar esse aspecto crucial do seu site pode aprimorar a experiência geral do usuário, fortalecer a identidade da sua marca e até mesmo melhorar as medidas de segurança.

Marca

Personalizar suas páginas de login e cadastro é como dar à sua porta de entrada virtual uma reforma muito necessária. Com criatividade, você pode integrar perfeitamente o logotipo deslumbrante da sua marca, o esquema de cores característico e a tipografia moderna imediatamente. Essa identidade visual reforça instantaneamente a singularidade do seu site, criando uma experiência coesa e memorável para cada visitante que entra por aquela porta.

Dicas para aproveitar ao máximo:

• Incorpore o logotipo e o esquema de cores da sua marca
• Mantenha uma aparência e um estilo consistentes em todas as páginas
• Reforce a identidade da sua marca e construa confiança

Leia mais : 5 dicas para criar uma marca com um orçamento limitado

Experiência do usuário aprimorada

As páginas padrão de login e cadastro do WordPress são básicas e visualmente pouco atraentes. Ao personalizá-las, você pode criar uma experiência mais envolvente e amigável para seus visitantes.

Dicas para aproveitar ao máximo:

• Crie uma interface visualmente atraente e intuitiva
• Melhorar a estética e a usabilidade em geral
• Proporcione uma experiência perfeita e agradável para seus usuários

Leia mais : Por que uma experiência ruim do usuário é um pesadelo para o seu negócio?

Segurança reforçada

Páginas personalizadas de login e cadastro permitem implementar medidas de segurança adicionais, como autenticação de dois fatores, verificação CAPTCHA ou indicadores de força de senha. Essa camada extra de proteção pode ajudar a mitigar potenciais riscos de segurança e proteger seu site contra acessos não autorizados.

Dicas para aproveitar ao máximo:

• Adicione recursos de segurança extras, como autenticação de dois fatores
• Implemente a verificação CAPTCHA para prevenir ataques de bots
• Imponha requisitos de senha mais rigorosos para aumentar a segurança

Saiba mais : Os 10 melhores scanners de malware e segurança para WordPress

Integração com ferramentas de terceiros

Páginas personalizadas de login e cadastro podem ser integradas facilmente a ferramentas e serviços de terceiros, como logins em redes sociais, plataformas de e-mail marketing ou sistemas de gestão de relacionamento com o cliente (CRM). Essa integração pode agilizar os processos de integração de usuários e gerenciamento de dados.

Integrações perfeitas são essenciais para sites de membros, pois dependem de dados de usuário precisos, fluxos de trabalho automatizados e um processo de integração fácil.

Dicas para aproveitar ao máximo:

• Habilite as opções de login por meio de redes sociais para sua conveniência
• Integre com plataformas de marketing por e-mail para campanhas perfeitas
• Integre-se aos sistemas CRM para uma gestão de dados eficiente

Leia mais : As 10 principais ferramentas de gerenciamento de projetos para agências web

Conclusão

Criar uma página de login e cadastro personalizada no WordPress ajuda a oferecer uma experiência mais limpa, alinhada à sua marca e mais amigável ao usuário. Com as ferramentas certas, você pode personalizar o design, melhorar a segurança e tornar o processo de login profissional e fluido.

Algumas mudanças simples podem fazer uma grande diferença na forma como os usuários interagem com seu site, tornando suas páginas de login funcionais e acolhedoras.

Perguntas frequentes