Como criar formulários personalizados de registro e login do WordPress

Como criar formulários personalizados do WordPress

Existem vários plugins que ajudarão você a criar um formulário de registro para seu site WordPress. Mas com base na facilidade de uso e funcionalidades, descobrimos que o ProfilePress é o melhor plugin de formulários disponível.

ProfilePress oferece belos formulários pré-construídos que você pode personalizar de acordo com suas necessidades usando recursos de arrastar e soltar. Dito isto, o plugin é muito mais do que um construtor de formulários. Usando ProfilePress você pode criar:

• Belos perfis de usuário
• Diretórios de membros pesquisáveis ​​e filtráveis
• Restringir o acesso a postagens, páginas e páginas filhas
• Restringir o acesso a categorias, tags, tipos de postagem personalizados e taxonomias

Além de tudo isso, você pode expandir a funcionalidade do plug-in usando complementos como Google reCAPTCHA, Polylang, autenticação de dois fatores etc. Você pode aprender mais sobre os recursos do plug-in na página de listagem de recursos.

ProfilePress é um plugin premium e, para usá-lo, você precisará adquirir uma licença que custa US$ 79 por ano para um único site. Se você quiser usá-lo para mais de um site, assine os planos mais altos.

Vamos usar o plugin para criar formulários personalizados do WordPress.

Criando um registro personalizado

Instale e ative o ProfilePress no seu site WordPress.

Etapa 1: Para garantir que você possa usar campos personalizados em seu formulário, você precisa habilitar os campos personalizados indo para ProfilePress > Addons > Custom Fields e alternar o botão em .

Passo 2: Agora vá para ProfilePress > Forms & Profiles > Add New > Registration .

Passo 3: Em seguida, você tem a opção de editar um modelo pré-criado ou criar o formulário do zero.

Construir um formulário do zero requer conhecimento de codificação e muitos de vocês que estão lendo este artigo provavelmente não sabem codificar. Nesse caso, escolha o Drag & Drop Builder .

Etapa 4: na próxima página, você precisará nomear o formulário e escolher um modelo . Em seguida, você prosseguirá para projetar o formulário usando o construtor de arrastar e soltar.

Etapa 5: crie o formulário usando os seguintes campos personalizados:

• Nome do usuário
• Endereço de email
• confirmar e-mail
• Senha
• Confirme sua senha
• Força da senha
• Local na rede Internet
• Apelido
• Nome em Exibição
• Primeiro nome
• Último nome
• Carregar foto do perfil
• Carregar foto de capa
• Biografia
• Selecionar função
• HTML personalizado
• reCAPTCHA

Etapa 6: Clique no botão Visualização ao vivo para visualizar o formulário antes de salvar as alterações.

Etapa 7: em seguida, role para baixo até as configurações do formulário . Aqui você pode alterar os rótulos dos botões, a cor, o título e as configurações de registro.

Etapa 8: Quando estiver pronto, clique no botão Salvar alterações . É isso. Seu novo formulário de inscrição está pronto.

IMPORTANTE: Deseja adicionar o Google reCAPTCHA, logins sociais ou autenticação de dois fatores ao seu formulário? O plugin permite estender e personalizar a funcionalidade do seu site. Saber mais

Em seguida, há duas coisas que você precisa fazer:

1. Você precisará publicar o formulário em uma nova página ou postagem
2. Em seguida, torne o novo formulário seu formulário de registro padrão do WordPress

Estamos cobrindo ambos os tutoriais em duas seções diferentes abaixo. Mas primeiro, vamos dar uma olhada rápida em como criar um formulário de login personalizado do WordPress.

Criando um formulário de login personalizado

As etapas que você precisa seguir são idênticas às do formulário de registro, exceto por duas coisas:

Vá para ProfilePress > Forms & Profiles > Add New > Drag & Drop Builder. E em vez de escolher Registro, escolha Login .

Então, depois de nomear o formulário e escolher um modelo , você notará que os campos personalizados são limitados em comparação com o formulário de registro. Você realmente não precisa de tantos campos personalizados para um formulário de login.

Aqui está uma lista dos campos personalizados que você pode usar em seu formulário de login:

• Login de usuário (nome de usuário ou e-mail)
• Senha
• Lembrar login
• HTML personalizado
• reCAPTCHA

Todo o resto é exatamente igual ao formulário de inscrição.

Quando seu novo formulário de login estiver pronto, vá para a próxima seção onde você aprenderá como publicar os novos formulários (registro e login) e como defini-los como formulários padrão do WordPress.

Como publicar os novos formulários em seu site

Isso é facil.

Vá para ProfilePress > Forms & Profiles e selecione Login ou Registro . No lado direito dos formulários, você poderá ver um código de acesso. Copie o shortcode do formulário que você acabou de criar.

Em seguida, crie uma nova página acessando Páginas > Adicionar novo e cole o código de acesso. Dê um nome à página e clique em Publicar .

Seu formulário agora está ativo em seu site.

Veja como fica o formulário de registro em nosso site de demonstração:

E aqui está a aparência do formulário de login:

O próximo passo é tornar o novo formulário seu formulário de login ou registro padrão.

Como definir os novos formulários como seu formulário padrão do WordPress

Vá para ProfilePress > Configurações > Global .

Na opção Página de login , há um menu suspenso. Na lista suspensa, selecione a nova página onde você publicou o formulário de login.

E na opção Página de Registro , selecione a nova página onde você publicou o formulário de registro.

É isso. Sempre que alguém tentar se registrar ou fazer login no seu site, encontrará novos formulários.

Como criar formulários personalizados para WooCommerce

Muitos de vocês lendo este artigo estão se perguntando se você pode substituir os formulários do seu site WooCommerce? Certamente você pode. Veja como:

Ative e instale o ProfilePress no seu site WooCommerce. Como dissemos anteriormente, em nossa experiência pessoal, o ProfilePress é o melhor plugin que você pode usar para criar formulários porque é fácil de usar e oferece muitas funcionalidades.

Em seguida, você precisa habilitar a integração do WooCommerce acessando ProfilePress> Addon> WooCommerce e alternando o botão em .

Criando um formulário personalizado de registro e login para WooCommerce

Já abordamos as etapas que você precisa seguir para criar um formulário de registro e login anteriormente neste artigo. Você precisará seguir as etapas exatas para criar formulários em seu site WooCommerce.

Quando os formulários estiverem prontos, publique-os em duas páginas separadas. Também abordamos isso na seção “Como publicar os novos formulários em seu site”.

Também mostramos como definir os novos formulários como o formulário padrão de registro e login em seu site. Você precisará seguir as mesmas etapas em seu site WooCommerce.

Adicionando campos personalizados aos formulários de checkout do WooCommerce

Existem dois tipos de formulários de checkout: registro e login. Nesta seção, você aprenderá como criar formulários de login ou registro de checkout personalizados.

Formulário de login de checkout personalizado

Deseja substituir seu formulário de login de checkout padrão por um formulário de login de checkout personalizado?

Vamos primeiro criar um formulário de login de checkout personalizado. Já mostramos como fazer isso em uma seção anterior. Siga as etapas na seção "Criando um formulário de login personalizado".

Feito? Agora, vá para ProfilePress > Configurações > Geral > WooCommerce .

Você deverá ver uma opção chamada Checkout Login Form . Ele vem com um menu suspenso. Selecione o novo formulário no menu suspenso e salve sua configuração.

Seus clientes devem poder usar o novo formulário para fazer login durante a finalização da compra.

Formulário de Cadastro de Saída

Quanto ao formulário de registro, o ProfilePress permite adicionar campos personalizados ao formulário de registro de checkout do WooCommerce. Você não precisa criar um formulário de registro do zero. Seu site usará seu formulário de registro padrão como formulário de registro de checkout, mas você pode adicionar campos personalizados ao formulário.

Para adicionar campos personalizados ao seu formulário de registro de checkout, você precisa primeiro criar os campos personalizados.

Vá para WooCommerce > Configurações > Contas e privacidade e ative a opção “ Permitir que os clientes criem uma conta durante o checkout ”.

Em seguida, vá para ProfilePress > Configurações > Campos personalizados > Adicionar novo . Na próxima página, insira o rótulo, a chave, a descrição e o tipo de campo. Salve sua configuração.

Quando terminar de criar todos os campos personalizados, adicione-os ao formulário de registro de checkout.

Vá para ProfilePress > Configurações > Geral > WooCommerce > Campos de registro de checkout e os campos que você acabou de criar devem aparecer como um menu suspenso. Selecione-os .

Na próxima seção (ou seja, Campos de registro obrigatórios), você pode inserir os campos personalizados que deseja tornar obrigatórios.

Formulários personalizados de registro e login de minha conta

Com o ProfilePress, você tem a opção de definir um formulário personalizado de registro e login. Você primeiro precisará criar os formulários em seu site WordPress. Basta seguir as etapas que abordamos em “Como criar formulários personalizados do WordPress”.

Em seguida, vá para ProfilePress > Configurações > Geral > WooCommerce > Formulário de login da minha conta e selecione o novo formulário de login que você acabou de criar.

Em seguida, vá para o Formulário de registro de minha conta e selecione o novo formulário de registro que você acabou de criar.

Abaixo está uma prévia de como pode ficar na página WooCommerce My Account.

É isso, pessoal. Com isso, chegamos ao fim deste tutorial.

Pensamentos finais

Criar um registro personalizado do WordPress e o formulário de login é uma ótima ideia. Você pode adicionar campos personalizados, coletar mais dados de usuários e criar o formulário de uma forma que pareça adequada à sua marca.

Embora existam muitos plug-ins por aí que ajudarão você a criar formulários em seu site WordPress, descobrimos que o ProfilePress é o melhor plug-in de formulário de registro e login de usuário. É muito fácil de usar e se integra às lojas WooCommerce.