Quer personalizar a página de login no seu site WordPress? Com o WPForms, tem imensas formas de estilizar os seus formulários de login, sem necessidade de qualquer código!

Neste artigo, vamos mostrar-lhe 7 exemplos diferentes de páginas de login de sites populares e como recriá-las. Vamos guiá-lo através do processo de criação de cada formulário com o mesmo estilo dos exemplos que apresentamos aqui, com apenas alguns cliques do seu rato.

Vamos a isso!

Crie a Sua Página de Login Agora

O Que Escrever Numa Página de Login?

A sua página de login provavelmente contém alguns campos onde os utilizadores digitam o seu nome de utilizador, endereço de e-mail, palavra-passe e mais.

A página de login do seu site é um local onde os utilizadores do site inserem as suas credenciais para aceder ao seu site. Estes visitantes podem ter uma conta no seu site, ou algum outro motivo para necessitar de iniciar sessão no seu site.

Provavelmente também vai querer incluir alguma forma de texto na sua página de login, para informar ou orientar os utilizadores do seu site sobre como aceder ao site. Poderá também adicionar imagens como logótipos e ilustrações no seu login, e poderá optar por funcionalidades de segurança adicionais para evitar que spam indesejado sobrecarregue a 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 num campo para e-mail, palavra-passe, uma caixa de seleção e um botão de login.

A questão sobre um formulário como este é que é semelhante à base de todos os outros exemplos de formulários de login. Tem os elementos mais básicos necessários para uma página de login.

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

Primeiro, terá de instalar o WPForms e inscrever-se no Plano Pro para aceder ao suplemento de Registo de Utilizadores.

Após inserir a sua chave de licença nas suas definições do WPForms, vá a WPForms » Addons no seu painel. Percorra os suplementos disponíveis para encontrar o suplemento de Registo de Utilizadores, que também irá instalar. Certifique-se de que também ativa o suplemento assim que o tiver instalado.

Agora está pronto para criar o seu formulário de login. Vá a WPForms » Add New e encontre o modelo User Login Form nos seus Modelos de Suplementos disponíveis. Clique no botão Use Template para selecionar este modelo e abrir o construtor de formulários.

O construtor de formulários WPForms torna fácil editar este modelo pré-definido para satisfazer as suas necessidades. Encontrará uma vasta seleção de campos de formulário que cobrem praticamente qualquer elemento que deseje no seu formulário online. Tudo o que precisa de fazer é simplesmente arrastar e largar cada campo no lugar.

Verá que o Formulário de Login de Utilizador já carregou os campos necessários.

Mas, como todos os modelos WPForms, este formulário é altamente personalizável, pelo que pode adicionar e editar campos no seu formulário de diversas formas.

Para este formulário, vamos editar o botão de Enviar na parte inferior do formulário para que diga ‘Iniciar sessão’, como no exemplo da página de início de sessão da HubSpot.

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

Em seguida, para alterar o texto do botão, abra o separador Geral e navegue até à caixa Texto do Botão de Envio.

Agora, escreva o que pretende que o botão diga, como por exemplo ‘Iniciar sessão’.

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

E é tudo o que precisa de fazer para criar um formulário de início de sessão básico como o utilizado na página de início de sessão da HubSpot.

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

Assim que for guardado, este formulário estará disponível para utilização na página Todos os Formulários do WPForms no seu painel WordPress.

Agora tem um formulário de início de sessão simples que pode publicar rapidamente no seu site, ou que pode usar como base para criar páginas de início de sessão mais detalhadas. Estes são os passos básicos necessários para todos os exemplos de páginas de início de sessão abordados aqui.

2. Formulário de Login com Texto Instrutivo

Dê uma vista de olhos à página de início de sessão do WordPress.org. Tal como o primeiro exemplo que abordámos, este é bastante básico.

Mas tem um excerto de texto instrutivo na parte superior, e o seu formulário também pode tê-lo.

Como mencionámos, cada formulário criado aqui requer primeiro o modelo de Formulário de Início de Sessão de Utilizador, incluindo este. Prossiga e selecione novamente o modelo.

Em seguida, no construtor de formulários, arraste o campo Conteúdo para a parte superior do formulário e solte-o aí.

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

Mas para se assemelhar ao texto instrutivo na página de início de sessão acima, vamos colocar o campo no topo.

Clique no campo para abrir as suas opções personalizáveis, encontradas no lado esquerdo do ecrã. Em seguida, utilize o editor de texto para escrever o texto instrutivo que pretende que seja exibido neste campo.

Tal como o exemplo acima, pode instruir os utilizadores sobre como introduzir as suas informações para iniciar sessão no 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, tudo disponível dentro deste campo.

Por exemplo, olhe novamente para a página de início de sessão da HubSpot do exemplo 1. Repare que existe um excerto muito curto de texto instrutivo. O texto instrutivo diz: ‘Não tem conta? Inscreva-se’ e fornece um link para uma página onde os utilizadores podem criar uma conta.

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

Primeiro, escreva o seu texto instrutivo e realce a parte que pretende ligar. Em seguida, clique no ícone de link na barra de ferramentas do editor de texto.

Agora, irá inserir o URL da página para a qual pretende que os utilizadores aterrem. Clique em OK quando terminar.

E é tudo! Agora tem texto instrutivo e um link no seu formulário.

Como sempre, guarde o seu formulário para mais tarde ou incorpore-o numa página. Partilharemos detalhes sobre como publicar quando estiver pronto para que a página de início de sessão fique ativa no seu site no final desta publicação.

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

Outra forma de personalizar o Formulário de Início de Sessão do Utilizador para a sua página de início de sessão é adicionando uma imagem de cabeçalho à sua escolha. Utilizar uma imagem no topo do seu formulário é uma boa forma de personalizar o seu formulário, ou complementar o estilo do seu site.

Para adicionar uma imagem de cabeçalho, irá novamente utilizar o campo Conteúdo e o modelo de Formulário de Início de Sessão do Utilizador. 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, irá carregar uma imagem à sua escolha, que aparecerá acima do texto no editor de texto.

Também pode eliminar o texto desta vez, se desejar, e trabalhar apenas com a imagem.

Clique na imagem para aceder às suas Definições de Exibição e posicione a imagem como desejar.

Para fazer com que a imagem no nosso exemplo atue como uma verdadeira imagem de cabeçalho, centralizaremos o alinhamento e selecionaremos a versão de tamanho completo. Pode ajustar estas definições algumas vezes para descobrir o que prefere.

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

Também pode explorar os outros separadores de definições para mais opções, como alterar o Tamanho do Campo no separador Avançado.

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

Mais uma vez, certifique-se de que guarda o seu formulário para mais tarde. E para mais dicas relacionadas com este exemplo, consulte esta publicação completa sobre adicionar uma imagem de cabeçalho aos seus formulários.

4. Formulário de Login com Logótipo da Empresa

Vamos dar uma vista de olhos à página de início de sessão SendLayer. No topo do formulário, acima do texto instrutivo que cobrimos anteriormente, encontra-se um logótipo para o site.

Também pode adicionar um logótipo ao seu formulário, utilizando novamente o campo Conteúdo no seu Formulário de Início de Sessão do Utilizador.

Lembra-se de como usou o campo Conteúdo para carregar uma imagem de cabeçalho? Porque não usar um processo semelhante para exibir um logótipo? Graças ao construtor de formulários, tem várias opções para colocar logótipos no seu formulário.

Simplesmente arraste o campo Conteúdo para onde o deseja no seu formulário.

Para se assemelhar ao exemplo acima, vamos colocar o logótipo no topo do formulário. E como isto é um pouco como uma imagem de cabeçalho, um logótipo com estilo horizontal pode ficar melhor aqui.

Lembre-se de simplesmente clicar no botão Adicionar Média do campo Conteúdo para carregar o seu logótipo.

E não se esqueça das definições adicionais. Pode querer centralizar o logótipo, torná-lo de tamanho completo, ou alterar o tamanho do campo nas definições Avançadas.

Também pode editar o texto abaixo do logótipo como cobrimos no exemplo do texto instrutivo, o que faria com que o seu formulário aqui se assemelhasse de perto ao exemplo.

A sua página de início de sessão tem agora o seu logótipo claramente exibido no seu formulário. Sinta-se à vontade para adicionar outro logótipo na parte inferior, ou em qualquer outro lugar onde deseje arrastar o campo Conteúdo!

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

Agora vamos tomar nota da página de login da TrustPulse. Este formulário de login tem credenciais inseridas num lado do ecrã com um pequeno logótipo acima, e uma grande ilustração apresentada no outro lado.

Você também pode criar um formulário com este aspeto utilizando o campo Layout e o campo Conteúdo em conjunto.

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

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

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

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

Utilize o botão Adicionar Média para carregar novamente o seu logótipo e, em seguida, certifique-se de que as definições da imagem o orientam e dimensionam como pretende.

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

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

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

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

Agora pode adicionar uma ilustração da sua escolha para ser exibida em grande 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 definições do campo para personalizar o tamanho e a colocação da sua ilustração.

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

E agora o seu formulário tem o pequeno logótipo e as entradas de credenciais de um lado, e uma grande ilustração apresentada do outro lado.

Como sempre, terá de guardar este formulário para o manter no WPForms no seu painel de controlo e, em seguida, incorporá-lo numa página do WordPress quando estiver pronto para o utilizar.

6. Formulário de Login com CTA

Em seguida, veremos a página de login da ExactMetrics, que é algo semelhante ao login anterior, mas com um botão de chamada para ação num lado do formulário em vez de uma ilustração.

Um lado tem um pequeno logótipo, entrada de email, entrada de password e botão de login, e o outro lado tem bastante texto, seguido por um CTA clicável.

Para criar um aspeto semelhante com o seu próprio formulário, basta seguir os passos que cobrimos no exemplo anterior: primeiro adicionar o campo Layout ao seu Formulário de Login do Utilizador e arrastar campos para um lado ou coluna do layout.

Lembre-se, basta arrastar o campo Conteúdo para o Layout para carregar o seu logótipo e, em seguida, arrastar os campos restantes do formulário para esse lado do Layout também.

Mas depois, para o outro lado do campo Layout, na segunda coluna, não se preocupe em carregar nada. Irá apenas editar o texto que já está aqui.

Repare como parte do texto pré-carregado é maior e mais ousado do que o que está por baixo, semelhante ao estilo de texto no exemplo.

Isto torna fácil moldar o seu texto como o do exemplo, mas não se esqueça de todas as outras formas de usar o editor de texto a seu favor. Pode alterar o tamanho, orientação, cor e muito mais do texto, conforme entender.

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

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

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

Agora tem um botão de CTA no seu formulário!

Mais uma vez, terá de guardar este formulário e depois incorporá-lo numa página WordPress quando estiver pronto para o usar.

7. Formulário de Login com reCAPTCHA

Agora que percorremos as formas mais complexas de estilizar um formulário de login, vamos analisar um dos elementos de segurança mais fáceis de adicionar ao seu formulário, onde quer que o queira.

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

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

Pode facilmente adicionar um campo reCAPTCHA a qualquer um dos seus formulários de login também. Mas primeiro, terá de o configurar nas suas definições do WPForms.

No seu painel WordPress, navegue até WPForms e depois Definições. Em seguida, certifique-se de que está no ecrã CAPTCHA.

Selecione a opção reCAPTCHA do meio do ecrã.

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

Vamos selecionar o reCAPTCHA de Caixa de Verificação v2.

Em seguida, terá de introduzir uma Chave do Site e uma Chave Secreta nesta página de definições, fornecidas pelo Google. Para receber estas chaves, deve seguir o processo de configuração na consola de administração reCAPTCHA do Google.

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

Não se esqueça de clicar Guardar na parte inferior deste ecrã para aplicar estas definições ao seu campo reCAPTCHA.

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

De volta à página de criação de formulários, basta clicar no campo reCAPTCHA para o ativar no seu Formulário de Login de Utilizador.

E é tudo! O seu formulário de login está agora protegido contra bots e spam que, de outra forma, poderiam infiltrar-se no seu site.

Além disso, o ícone reCAPTCHA é então exibido no seu formulário, o que informa os seus utilizadores que as suas informações estão seguras.

Como Adicionar uma Página de Login Personalizada ao WordPress

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

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

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

Além disso, tenha em mente que com todos os seus formulários criados e os exemplos que cobrimos aqui, precisará de guardar o formulário quando terminar de o editar. Depois, talvez mais tarde, se necessário, pode incorporar o formulário numa página e publicá-lo quando estiver pronto.

Ou, a partir do construtor de formulários, pode prosseguir e incorporar o seu formulário numa página agora.

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

Se decidir criar uma nova página, terá de lhe dar um nome, tal como as outras páginas do seu website são nomeadas para que as possa encontrar facilmente no painel WordPress.

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

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

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

E lembre-se que, como todas as suas páginas WordPress, precisará de publicar a página com o seu formulário incorporado para a colocar no ar no seu website.

Pode também pré-visualizar a página antes de publicar, ou guardar o rascunho para mais tarde.

Para ainda mais leitura sobre este tópico, consulte este tutorial que abrange como exibir formulários de login e registo.

Crie a Sua Página de Login Agora

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

Agora que aprendeu tudo sobre como criar formulários de login para o seu website WordPress, porque não tenta criar um formulário de registo WordPress com PayPal? Dessa forma, pode registar os utilizadores do seu website e começar a recolher pagamentos.

Se desejar uma impressão das suas entradas de formulário, recomendamos que consulte o nosso guia sobre impressão de formulários WordPress para PDF.

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

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