Quer personalizar a página de login do seu site WordPress? Com o WPForms, você tem muitas maneiras de estilizar seus formulários de login, sem precisar de nenhum código!

Neste post, mostraremos 7 exemplos diferentes de páginas de login de sites populares e como recriá-los. Vamos guiá-lo pelo processo de criação de cada formulário no mesmo estilo dos exemplos que apresentamos aqui, com apenas alguns cliques do mouse.

Vamos lá!

Crie Sua Página de Login Agora

O Que Escrever em Uma Página de Login?

Sua página de login provavelmente contém alguns campos onde os usuários digitam seu nome de usuário, endereço de e-mail, senha e muito mais.

A página de login do seu site é um local onde os usuários do site inserem suas credenciais para acessar seu site. Esses visitantes podem ter uma conta em seu site, ou algum outro motivo para precisar fazer login em seu site.

Você provavelmente também vai querer incluir alguma forma de texto em sua página de login, a fim de informar ou orientar os usuários do seu site sobre como acessar o site. Você também pode adicionar imagens como logotipos e ilustrações ao seu login, e pode optar por recursos de segurança extras para evitar que spam indesejado entupa sua página de login.

7 Exemplos de Páginas de Login

1. Formulário de Login Simples

Esta página de login no site da HubSpot é bastante básica e sem muitos detalhes incluídos no formulário. O formulário consiste simplesmente em um campo de e-mail, senha, caixa de seleção e botão de login.

A questão sobre um formulário como este é que ele é um pouco como a base de todos os outros exemplos de formulários de login. Ele tem os elementos mais básicos necessários para uma página de login.

E, se preferir, sua própria página de login também pode ser simplificada assim. O WPForms é o melhor plugin de criação de formulários para WordPress, e torna super fácil para você adicionar uma página de login personalizada ao seu site.

Primeiro, você precisará instalar o WPForms e assinar o Plano Pro para acessar o addon de Registro de Usuário.

Após inserir sua chave de licença nas configurações do WPForms, vá para WPForms » Addons no seu painel. Percorra os addons disponíveis para encontrar o addon de Registro de Usuário, que você também instalará. Certifique-se de ativar o addon assim que o tiver instalado.

Agora você está pronto para criar seu formulário de login. Vá para WPForms » Novo e encontre o modelo Formulário de Login de Usuário em seus Modelos de Addon disponíveis. Clique no botão Usar Modelo para selecionar este modelo e abrir o construtor de formulários.

O construtor de formulários do WPForms facilita a edição deste modelo pré-definido para atender às suas necessidades. Você encontrará uma extensa seleção de campos de formulário que cobrem praticamente qualquer elemento que você possa querer em seu formulário online. Tudo o que você precisa fazer é simplesmente arrastar e soltar cada campo no lugar.

Você verá que o Formulário de Login de Usuário já carregou os campos necessários.

Mas, como todos os modelos WPForms, este formulário é altamente personalizável, então você pode adicionar e editar campos em seu formulário de várias maneiras.

Para este formulário, vamos editar o botão Enviar na parte inferior do formulário para que ele diga 'Entrar', como no exemplo da página de login do HubSpot.

Basta clicar no botão para expandir suas configurações.

Em seguida, para alterar o texto do botão, abra a guia Geral e role até a caixa Texto do Botão de Envio.

Agora, digite o que você gostaria que o botão dissesse, como 'Entrar'.

Olhando para o formulário novamente, o botão na parte inferior do formulário se alinha melhor com a natureza de login desta página.

E é tudo o que você precisa fazer para criar um formulário de login básico como o usado na página de login do HubSpot.

A partir daqui, prossiga e Salve este formulário.

Assim que for salvo, este formulário estará disponível para uso na página Todos os Formulários do WPForms em seu painel do WordPress.

Agora você tem um formulário de login simples que pode publicar rapidamente em seu site, ou que pode usar como base para criar páginas de login mais detalhadas. Estas são as etapas básicas necessárias para todos os exemplos de páginas de login abordados aqui.

2. Formulário de Login Com Texto Instrutivo

Dê uma olhada na página de login do WordPress.org. Como o primeiro exemplo que cobrimos, este é bastante básico.

Mas ele tem um trecho de texto instrucional na parte superior, e seu formulário também pode ter isso.

Como mencionamos, cada formulário criado aqui primeiro requer o modelo de Formulário de Login de Usuário, incluindo este. Prossiga e selecione o modelo novamente.

Em seguida, no construtor de formulários, arraste o campo Conteúdo para o topo do formulário e solte-o lá.

Como dissemos antes, você pode arrastar e soltar este campo em seu formulário onde quiser.

Mas para se assemelhar ao texto instrucional na página de login acima, vamos colocar o campo no topo.

Clique no campo para abrir suas opções personalizáveis, encontradas no lado esquerdo da tela. Em seguida, use o editor de texto para digitar o texto instrucional que você deseja exibir neste campo.

Como o exemplo acima, você pode instruir os usuários sobre como inserir suas informações para fazer login em seu site.

Muitas opções estão ao seu alcance graças ao editor de texto, com estilos de fonte personalizáveis, cores e muito mais, todos disponíveis dentro deste campo.

Por exemplo, olhe novamente para a página de login do HubSpot do exemplo 1. Observe que há um trecho muito curto de texto instrucional. O texto instrucional diz: 'Não tem uma conta? Inscreva-se' e fornece um link para uma página onde os usuários podem criar uma conta.

Isso também é possível com o editor de texto do campo Conteúdo em seu formulário.

Primeiro, digite seu texto instrucional e destaque a parte que você deseja vincular. Em seguida, clique no ícone de link na barra de ferramentas do editor de texto.

Agora, você inserirá a URL da página para a qual deseja que os usuários cheguem. Clique em OK quando terminar.

E é isso! Agora você tem texto instrucional e um link em seu formulário.

Como sempre, salve seu formulário para mais tarde ou incorpore-o em uma página. Compartilharemos detalhes sobre como publicar quando você estiver pronto para que a página de login entre no ar em seu site no final desta postagem.

3. Formulário de Login Com Imagem de Cabeçalho

Outra forma de personalizar o Formulário de Login do Usuário para sua página de login é adicionando uma imagem de cabeçalho de sua escolha. Usar uma imagem no topo do seu formulário é uma boa maneira de personalizar seu formulário ou complementar a estilização do seu site.

Para adicionar uma imagem de cabeçalho, você utilizará novamente o campo Conteúdo e o modelo de Formulário de Login do Usuário. Arraste e solte este campo no topo do seu formulário como antes.

Mas desta vez, clique no botão Adicionar Mídia acima do editor de texto.

Agora, você fará o upload de uma imagem de sua escolha, que aparecerá acima do texto no editor de texto.

Você também pode excluir o texto desta vez, se desejar, e trabalhar apenas com a imagem.

Clique na imagem para acessar suas Configurações de Exibição e posicione a imagem como desejar.

Para que a imagem em nosso exemplo atue como uma verdadeira imagem de cabeçalho, centralizaremos o alinhamento e selecionaremos a versão em tamanho completo. Você pode ajustar essas configurações algumas vezes para descobrir o que prefere.

Certifique-se de clicar no botão azul Atualizar para aplicar quaisquer alterações.

Você também pode explorar as outras guias de configurações para mais opções, como alterar o Tamanho do Campo na guia Avançado.

Experimente o tamanho de campo Grande para ver sua imagem exibida ainda maior na parte superior do seu formulário, como uma verdadeira imagem de cabeçalho.

Mais uma vez, certifique-se de salvar seu formulário para mais tarde. E para mais dicas relacionadas a este exemplo, confira esta postagem completa sobre adicionar uma imagem de cabeçalho aos seus formulários.

4. Formulário de Login Com um Logotipo da Empresa

Vamos dar uma olhada na página de login do SendLayer. No topo do formulário, acima do texto instrucional que cobrimos anteriormente, fica o logotipo do site.

Você também pode adicionar um logotipo ao seu formulário, utilizando novamente o campo Conteúdo em seu Formulário de Login do Usuário.

Lembra-se de como você usou o campo Conteúdo para fazer o upload de uma imagem de cabeçalho? Por que não usar um processo semelhante para exibir um logotipo? Graças ao construtor de formulários, você tem várias opções para colocar logotipos em seu formulário.

Simplesmente arraste o campo Conteúdo para onde você o deseja em seu formulário.

Para se assemelhar ao exemplo acima, vamos colocar o logotipo no topo do formulário. E como isso é um pouco como uma imagem de cabeçalho, um logotipo estilizado horizontalmente pode ficar melhor aqui.

Lembre-se de simplesmente clicar no botão Adicionar Mídia do campo Conteúdo para fazer o upload do seu logotipo.

E não se esqueça das configurações adicionais. Você pode querer centralizar o logotipo, torná-lo em tamanho completo ou alterar o tamanho do campo nas configurações Avançadas.

Você também pode editar o texto abaixo do logotipo, como cobrimos no exemplo do texto instrucional, o que faria seu formulário aqui se assemelhar de perto ao exemplo.

Sua página de login agora tem seu logotipo claramente exibido em seu formulário. Sinta-se à vontade para adicionar outro logotipo na parte inferior, ou em qualquer outro lugar onde você queira arrastar o campo Conteúdo!

5. Formulário de Login Com Ilustração

Agora, vamos observar a página de login da TrustPulse. Este formulário de login tem as credenciais inseridas em um lado da tela com um pequeno logotipo acima, e uma grande ilustração exibida no outro lado.

Você também pode criar um formulário com essa aparência usando o campo Layout e o campo Conteúdo juntos.

Primeiro, arraste o campo Layout para o seu Formulário de Login de Usuário.

Não importa muito onde você arrasta e solta o campo Layout agora, porque você eventualmente arrastará os campos pré-carregados do formulário para dentro do próprio campo Layout.

Por enquanto, vamos apenas arrastá-lo para o topo do formulário para nos mantermos organizados. Você também selecionará a orientação das colunas dentro do layout, o que determinará o tamanho e o posicionamento do conteúdo neste campo.

Agora, arraste o campo Conteúdo para a primeira coluna do campo Layout em seu formulário, para que você possa exibir um logotipo aqui, como no exemplo da TrustPulse.

Use o botão Adicionar Mídia para carregar seu logotipo mais uma vez e, em seguida, certifique-se de que as configurações da imagem a orientem e dimensionem como você deseja.

Em seguida, arraste e solte os outros campos do formulário nesse lado do campo Layout.

Simplesmente pegue cada campo com o mouse, arraste-o para a coluna do Layout e solte-o. O campo Email, o campo Senha e a caixa de seleção agora estarão na coluna esquerda do seu formulário.

Agora, você adicionará conteúdo à outra coluna no campo Layout.

Selecione o campo Conteúdo novamente e arraste-o para a coluna maior no lado direito do seu formulário.

Agora você pode adicionar uma ilustração de sua escolha para ser exibida amplamente neste lado do seu formulário.

Clique no botão Adicionar Mídia como fez do outro lado para carregar uma ilustração.

E, mais uma vez, certifique-se de ajustar as configurações do campo para personalizar o tamanho e o posicionamento da sua ilustração.

Para uma ilustração grande como o exemplo, você pode querer remover qualquer texto adicional do campo Conteúdo.

E agora seu formulário tem o pequeno logotipo e as entradas de credenciais em um lado, e uma grande ilustração exibida no outro lado.

Como sempre, você precisará salvar este formulário para mantê-lo no WPForms em seu painel e, em seguida, incorporá-lo em uma página do WordPress quando estiver pronto para usá-lo.

6. Formulário de Login Com CTA

Em seguida, veremos a página de login da ExactMetrics, que é um tanto semelhante ao login anterior, mas com um botão de call-to-action em um lado do formulário em vez de uma ilustração.

Um lado tem um pequeno logotipo, campo de e-mail, campo de senha e botão de login, e o outro lado tem bastante texto, seguido por um CTA clicável.

Para criar uma aparência semelhante com seu próprio formulário, você simplesmente precisa seguir as etapas que cobrimos no exemplo anterior: primeiro adicionando o campo Layout ao seu Formulário de Login de Usuário e arrastando os campos para um lado ou coluna do layout.

Lembre-se, você simplesmente arrasta o campo Conteúdo para o Layout para carregar seu logotipo e, em seguida, arrasta os campos restantes do formulário para esse lado do Layout também.

Mas então, para o outro lado do campo Layout, na segunda coluna, não se preocupe em fazer upload de nada. Você apenas editará o texto que já está aqui.

Observe como parte do texto pré-carregado é maior e mais negrito do que o que está abaixo dele, semelhante ao estilo de texto no exemplo.

Isso facilita a formatação do seu texto como o do exemplo, mas não se esqueça de todas as outras maneiras de usar o editor de texto a seu favor. Você pode alterar o tamanho, a orientação, a cor do texto e muito mais, conforme achar melhor.

E dentro do editor de texto do campo Conteúdo, você pode até inserir um trecho de código para criar um botão de CTA.

Clique na guia Texto da caixa do editor de texto para copiar e colar o código que você gostaria de usar para criar um botão.

Você pode editar seu trecho de código para estilizar a aparência do seu botão de CTA como desejar.

Agora você tem um botão de CTA em seu formulário!

Mais uma vez, você precisará salvar este formulário e, em seguida, incorporá-lo em uma página do WordPress quando estiver pronto para usá-lo.

7. Formulário de Login Com um reCAPTCHA

Agora que exploramos as maneiras mais complexas de estilizar um formulário de login, vamos ver um dos elementos de segurança mais fáceis de adicionar ao seu formulário, onde você quiser.

A verificação reCAPTCHA ajuda a proteger seu site WordPress contra bots e spam que tentariam usar seus formulários para acessar seu site.

Como você pode ver, nós o usamos em nossa própria página de login aqui no WPForms.

Você também pode adicionar facilmente um campo reCAPTCHA a qualquer um dos seus formulários de login. Mas primeiro, você precisará configurá-lo nas configurações do seu WPForms.

No seu painel do WordPress, navegue até WPForms e depois Configurações. Em seguida, certifique-se de estar na tela CAPTCHA.

Selecione a opção reCAPTCHA no meio da tela.

Em seguida, você escolherá o tipo de verificação reCAPTCHA que deseja usar.

Vamos selecionar o reCAPTCHA de caixa de seleção v2.

Em seguida, você precisará inserir uma Chave do Site e uma Chave Secreta nesta página de configurações, fornecidas pelo Google. Para receber essas chaves, você deve seguir o processo de configuração no console de administração reCAPTCHA do Google.

Para mais informações, juntamente com um tutorial totalmente detalhado sobre como fazer isso, confira nosso artigo sobre  configurar e usar o reCAPTCHA com seus formulários WordPress.

Não se esqueça de clicar em Salvar na parte inferior desta tela para aplicar essas configurações ao seu campo reCAPTCHA.

Agora você está pronto para adicionar a verificação reCAPTCHA ao seu formulário.

De volta à página de criação de formulários, você só precisa clicar no campo reCAPTCHA para ativá-lo em seu Formulário de Login de Usuário.

E é isso! Seu formulário de login agora está protegido contra bots e spam que, de outra forma, poderiam se infiltrar em seu site.

Além disso, o ícone reCAPTCHA é então exibido em seu formulário, o que informa aos seus usuários que suas informações estão seguras.

Como Adicionar uma Página de Login Personalizada ao WordPress

O útil do construtor de formulários do WPForms é que todas as opções personalizáveis e escolhas de estilo inspiradas nesses exemplos podem ser criadas no próprio formulário.

No entanto, alguns dos estilos alcançados nesses exemplos podem ser o resultado de edição extra na página de login.

Portanto, para dicas adicionais aprofundadas sobre como obter ainda mais estilo com o WPForms em sua página WordPress, confira este artigo completo sobre como estilizar formulários com CSS.

Além disso, lembre-se de que, com todos os seus formulários criados e os exemplos que cobrimos aqui, você precisará salvar o formulário quando terminar de editá-lo. Em seguida, talvez mais tarde, se necessário, você pode incorporar o formulário em uma página e publicá-lo quando estiver pronto.

Ou, a partir do construtor de formulários, você pode incorporar seu formulário em uma página agora mesmo.

Ao clicar em Incorporar, você pode incorporar seu formulário de login em uma página que você já criou para seu site, ou pode criar uma nova página agora para este formulário de login.

Se você decidir criar uma nova página, precisará nomear a página, assim como as outras páginas em seu site são nomeadas para que você possa encontrá-las facilmente no painel do WordPress.

Clique em Vamos Lá! para continuar. O WPForms adicionará automaticamente seu formulário de login à sua nova página.

Após o seu formulário ser incorporado, você sempre pode editar mais algumas coisas na própria página do WordPress acessando as configurações do bloco WPForms e editando outros elementos de estilo da página.

Confira este artigo para mais ideias sobre como editar e personalizar sua página de login do WordPress.

E lembre-se que, como todas as suas páginas do WordPress, você precisará publicar a página com seu formulário incorporado para colocá-la no ar em seu site.

Você também pode pré-visualizar a página antes de publicar, ou salvar o rascunho para mais tarde.

Para ainda mais leitura sobre este tópico, confira este tutorial que cobre como exibir formulários de login e registro.

Crie Sua Página de Login Agora

Em seguida, Crie um Formulário de Registro com PayPal

Agora que você aprendeu tudo sobre como criar formulários de login para seu site WordPress, por que não tenta criar um formulário de registro WordPress com PayPal? Dessa forma, você pode registrar seus usuários do site e começar a coletar pagamentos.

Se você gostaria de uma impressão das suas entradas de formulário, recomendamos conferir nosso guia sobre impressão de formulários WordPress para PDF.

Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.