Como adicionar o campo WYSIWYG em um formulário de registro do WordPress?

Publicados: 2023-04-03

Quer aprender a adicionar o campo WYSIWYG em um formulário de registro do WordPress? Vamos mostrar-lhe como!

WYSIWYG (pronuncia-se wiz-ee-wig) é um acrônimo para 'What You See Is What You Get'.

Simplificando, é um sistema de edição que permite editar o conteúdo na mesma interface que apareceria para os usuários finais.

Adicionar o campo WYSIWYG nos formulários de registro é uma ótima ideia se você deseja coletar conteúdo bem formatado de seus usuários. Ele permite que eles editem e estilizem texto e multimídia em uma única área e enviem.

Portanto, se você deseja incluir um campo WYSIWYG em seu formulário de registro do WordPress, fique conosco até o final. Mostraremos como você pode adicionar um com a ajuda deste tutorial.

Índice

O que é um campo WYSIWYG? Quais são os benefícios de adicioná-lo ao seu formulário?

Já discutimos brevemente o que é o campo WYSIWYG. É um campo de formulário que permite aos usuários inserir e formatar texto usando um editor visual semelhante a um processador de texto.

Um editor WYSIWYG em um site pode ser o editor de texto usado ao criar uma postagem/página de blog no WordPress. Por exemplo, o editor clássico do WordPress.

Editor Clássico WordPress

O editor permite que os usuários formatem texto e adicionem visualmente imagens e outros elementos de mídia.

Assim, quando os usuários inserem texto ou imagens em um campo WYSIWYG, eles podem ver o texto formatado em tempo real.

Agora, você pode se perguntar como um campo WYSIWYG em um formulário de registro de usuário pode ser útil.

Abaixo estão alguns dos principais benefícios:

  • Como proprietário de um site, você pode coletar conteúdo pré-formatado dos usuários. Por exemplo, a biografia do usuário pode ser coletada.
  • Ele permite que seus usuários tenham imagens, listas, links, etc., em um único local sem codificação. Assim, eles podem enviar suas ideias livremente.
  • Ele torna o formulário do WordPress acessível a vários usuários com diferentes níveis de conhecimento técnico.

Qual é a melhor maneira de adicionar o campo WYSIWYG nos formulários de registro do WordPress?

Agora, você só precisa de um plugin para te ajudar na tarefa. Para isso, sugerimos o plugin de registro WordPress definitivo, Registro de Usuário.

Este plug-in incrível permite que você crie muitos formulários de registro personalizados bonitos sem complicações.

Da mesma forma, você pode adicionar vários campos em seu formulário, incluindo o campo WYSIWYG. Tudo que você precisa é a extensão de Campos Avançados, e você está pronto.

Complemento de campos avançados

O campo WYSIWYG do plug-in de registro do usuário permite que seus usuários alternem entre dois modos:

  • Visual : Imagens e textos são exibidos em um editor de texto.
Visual ou Texto
  • Texto : Imagens e textos são exibidos no formato HTML.
Visual ou Texto

Em seguida, você verá a lista de opções da barra de ferramentas que encontrará no modo Visual.

  • Parágrafo
  • Audacioso
  • itálico
  • Lista com marcadores
  • lista numerada
  • Bloco de citação
  • alinhar à direita
  • Alinhar centro
  • Alinhar à esquerda
  • Inserir/editar link
  • Inserir marca Leia mais
  • Tela cheia
  • Alternar barra de ferramentas

Da mesma forma, você pode obter mais opções no ícone de alternância da barra de ferramentas, como Tachado , Linha horizontal , Cor do texto , Colar como texto , Limpar formatação , Caractere especial , Diminuir recuo e Aumentar recuo .

Ícone de alternância da barra de ferramentas

Agora, sem mais delongas, vamos mergulhar direto no conteúdo.

Como adicionar o campo WYSIWYG em um formulário de registro do WordPress?

Uma boa ferramenta como o Cadastro de Usuários é autoexplicativa e muito fácil de usar. Mas passar por este tutorial é sábio para garantir uma compreensão sólida.

Etapa 1: instalar e ativar o User Registration Pro

Você pode criar facilmente formulários simples com a versão gratuita do plug-in. No entanto, o campo WYSIWYG vem na seção Campos Avançados .

E para desbloquear esse campo, você vai precisar do add-on Advanced Fields , que só vem com o plano premium do plugin.

Basta visitar o site oficial do plug-in, adquirir um plano adequado para você e pronto.

Obtenha o registro do usuário agora!

Depois disso, você receberá um link em seu e-mail. Siga o link e tenha acesso ao painel da sua conta.

Baixe o arquivo User Registration Pro

A partir daí, você pode baixar a versão pro do plug-in e obter a chave de licença na guia Chave de licença .

Chave de licença de registro do usuário

Em seguida, retorne ao painel do WordPress e navegue até Plugins >> Add New . E simplesmente clique no botão Upload Plugin .

Em seguida, escolha o arquivo zip do User Registration Pro que você baixou antes e clique em Instalar agora .

Carregar plug-in profissional

Agora, cole a chave de licença na área necessária e ative o plug-in em seu site.

Insira a chave de licença de registro do usuário

Se você precisar de todo o processo de instalação e configuração em detalhes, siga este link sobre como instalar o User Registration pro.

Após a configuração bem-sucedida, você pode passar para a próxima etapa.


Etapa 2: instale o complemento de campos avançados

Depois de adquirir o plano premium, você pode acessar facilmente o add-on Advanced Fields .

Navegue até Registro do usuário >> Extensões e procure por Campos avançados .

Instalar complemento de campo avançado

Em seguida, clique no botão Instalar complemento e pressione Ativar sequencialmente. E assim, você tem seu add-on Advanced Fields .

Ativar complemento de campo avançado

Etapa 3: criar um novo formulário

Agora, o próximo passo é criar um novo formulário. No seu painel, vá para Registro do usuário >> Adicionar novo .

Adicionar novo no registro do usuário

Aqui, você verá vários modelos criados gratuitamente e uma opção para criar seu formulário.

Portanto, clique em Iniciar do zero para iniciar o formulário desde o início ou selecione o modelo pré-construído para economizar seu tempo.

Para este tutorial, vamos criar um formulário de registro de palestrante do zero.

Você será solicitado a nomear seu formulário imediatamente após fazer isso. Então, digite o nome do formulário adequado e pressione Continuar .

Formulário de Inscrição do Palestrante

Etapa 4: adicione um campo WYSIWYG ao seu formulário

Aqui vem a etapa mais crucial, adicionando um campo WYSIWYG em seu formulário.

Então, adicione todos os campos necessários em seu formulário.

Para adicionar um campo WYSIWYG , arraste-o dos Campos avançados à direita e solte-o na tela do construtor de formulários à esquerda.

Arraste e solte WYSIWYG

Você pode adicionar quantos campos precisar seguindo o mesmo processo.

Depois de selecionar o campo, as opções de campos serão exibidas. Você pode personalizar cada campo de formulário nesta seção.

Você pode fazer alterações nas opções de campo, conforme explicado abaixo.

  • Rótulo : Dê um título adequado para o seu campo. Como Notas, Pedidos, etc.
  • Descrição : Adicione a descrição que deseja incluir em seu formulário.
  • Nome do campo : esta área contém o id do campo. Você pode deixá-lo como está ou alterá-lo de acordo com sua preferência.
  • Obrigatório : você pode marcar o campo WYSIWYG obrigatório simplesmente no menu suspenso.
  • Ocultar rótulo : você também pode ocultar o rótulo do campo no menu suspenso. Basta selecionar Sim ou Não.
  • Ativar dica de ferramenta : ative a dica de ferramenta para mostrar informações sobre o campo aos usuários.
Personalizar opção de campo

Da mesma forma, personalize as opções de campo para o restante dos campos.

Observação: a maioria dos campos de formulário tem opções de campo semelhantes. No entanto, algumas opções podem diferir ligeiramente dependendo do campo. Portanto, personalize de acordo.

Depois de fazer todas as alterações, você pode salvar o formulário clicando em Atualizar formulário na parte superior. Da mesma forma, clique em Visualizar se quiser ver a aparência do formulário no front-end.

Botão de formulário de atualização de visualização

Isso é tudo para a parte de personalização de campo. Você pode seguir em frente com o processo.


Etapa 4: definir configurações de formulários

Depois de personalizar o campo do formulário, é hora de definir as configurações do formulário.

Você encontrará as opções de Configurações de formulário ao lado de Opções de campo . Você pode definir as configurações gerais e configurações extras aqui.

Nas configurações gerais , você pode alterar a opção de login e aprovação do usuário . Você pode definir critérios personalizados de aprovação e login para seus usuários entre as opções do menu suspenso.

Configurações Gerais do Formulário

Depois, há a função de usuário padrão para definir a função dos usuários que se registram em seu formulário. Você pode escolher entre as seis funções de usuário padrão.

Da mesma forma, você pode ativar a opção Captcha Support para proteger seu formulário contra bots e spam.

Além disso, existem várias outras opções como Enviar classe de botão , Enviar texto de botão , Posição de mensagem de sucesso , etc.

Agora, assim como nas configurações gerais , você pode definir as configurações extras do seu formulário.

Configurações Extras do Formulário

Você encontrará várias opções importantes de proteção, como:

  • Ativar senha gerada automaticamente para usuários
  • Ativar proteção contra spam por HoneyPot
  • Ativar lista branca/lista negra de domínios , etc.

Da mesma forma, você pode ativar o formulário amigável do teclado e ativar o botão Redefinir para uma excelente experiência do usuário.

Você também pode alterar o rótulo do botão de redefinição em Rótulo do botão de redefinição de formulário .

Além disso, você pode ativar o mapeamento de campos de formulário com campos extras para tornar o plug-in de registro do usuário compatível com plug-ins externos.

Isso é tudo para a parte de configurações. Novamente, clique em Atualizar formulário para salvar todas as suas alterações.


Etapa 5: exibir o formulário em seu site

Por fim, é hora de publicar o formulário de cadastro com o campo WYSIWYG para os usuários preencherem em seu site.

Para incorporar o formulário em seu site, vá para Post/Páginas >> Adicionar novo .

Páginas Adicionar Novo

Em seguida, clique no botão Adicionar Bloco ( + ) e procure o bloco Cadastro de Usuário . Em seguida, adicione-o à página clicando nele.

Selecione o bloco de registro do usuário

Depois disso, selecione seu Formulário de registro de palestrante do WordPress no menu suspenso.

Formulário de registro WYSIWYG WordPress

Você pode ter a visualização final do formulário com o botão Visualizar na parte superior.

Visualizar formulário final

Abaixo está a imagem de como seu formulário vai ficar.

Visualize o campo WYSIWYG do formulário WordPress

E, finalmente, se você acha que seu formulário está totalmente pronto, pode clicar em Publicar .


Pensamentos finais!

É isso para o nosso artigo sobre como adicionar o campo WYSIWYG em um formulário de registro do WordPress.

Esperamos que este guia tenha ajudado você a entender o que é WYSIWYG e como ele funciona no plugin User Registration.

O Registro de Usuário é de longe a melhor escolha quando se trata de tornar seu site exclusivo. Ele é carregado com todos os recursos essenciais que um plug-in de registro deve possuir.

Existem mais recursos exclusivos do Registro do usuário, alguns dos quais são:

  • Redirecionamentos e restrições de conteúdo
  • Códigos de convite para convites exclusivos
  • Recursos livres de spam para um espaço seguro e protegido
  • Integrações de gateway de pagamento
  • Modelos de e-mail personalizados

Isso é apenas algumas de suas características. Além disso, a aplicação deste plugin é ilimitada. Para saber mais sobre este plugin, visite o site oficial.

Em seguida, se você deseja definir um campo de senha em seu formulário de registro do WordPress, consulte nosso guia sobre como adicionar um campo de senha no formulário de registro do WordPress.

Da mesma forma, você também pode aprovar usuários no WordPress após o registro do front-end.

Você pode ler mais maravilhas sobre este poderoso plugin em nosso blog. E para tutoriais em vídeo fáceis, você pode se inscrever em nosso canal do YouTube.

Se você tiver alguma sugestão ou dúvida sobre o plug-in, entre em contato conosco pelas redes sociais. Estamos disponíveis no Facebook e no Twitter.