Como adicionar o campo WYSIWYG em formulários do WordPress?

Quer saber como adicionar o campo WYSIWYG no WordPress Forms? Bem, fique conosco até o final para descobrir exatamente como.

Simplificando, WYSIWYG (pronuncia-se wiz-ee-wig) é um software de edição. Essa ferramenta incrível mostra como um conteúdo ficará depois de publicado.

Da mesma forma, em um campo de formulário WYSIWYG, o texto digitado no editor se assemelha à aparência do texto publicado. E se você quiser um campo WYSIWYG em seu formulário, estamos aqui para ajudar.

Neste artigo, exploraremos o campo WYSIWYG e as etapas para adicioná-lo a um formulário. Vamos começar!

O que é um campo WYSIWYG e por que você precisa dele?

WYSIWYG , abreviação de What You See Is What You Get , é um editor usado na maioria dos sites WordPress. Este editor permite que os usuários manipulem o layout ou o conteúdo sem precisar digitar nenhum comando.

Por exemplo, quando os usuários escrevem um documento usando um processador de texto, ele usa WYSIWYG. Isso replica o que eles criam, editam ou formatam no documento impresso ou arquivo PDF.

Assim, adicionar um campo WYSIWYG ao seu formulário WordPress fornece um editor para seus usuários. Eles podem digitar qualquer conteúdo que quiserem no campo e formatá-lo de acordo. Com um campo WYSIWYG, você pode:

• Permita que os usuários enviem postagens de convidados por meio de um formulário de front-end.
• Permita que os usuários visualizem a aparência do conteúdo depois de publicado durante a edição.
• Permita que usuários sem conhecimento de programação usem este editor.

Com isso dito, você também deve ter uma ferramenta que permita adicionar um campo WYSIWYG sem problemas. E o Everest Forms é o plugin perfeito para isso! É um construtor de formulários WordPress de arrastar e soltar que oferece um campo WYSIWYG. Você pode adicionar este campo ao seu formulário para qualquer finalidade necessária.

Assim, usaremos este plugin para mostrar como adicionar um campo WYSIWYG aos formulários.

Como adicionar o campo WYSIWYG em formulários do WordPress?

Passo 1: Instalar e ativar Everest Forms e Everest Forms Pro

A primeira coisa que você precisa fazer é configurar Everest Forms e Everest Forms Pro no seu painel do WordPress.

Sim, você precisará da versão pro do plugin. Isso porque o campo WYSIWYG é desbloqueado apenas com a versão premium.

Para obter um guia detalhado, consulte nosso artigo sobre como instalar o Everest Forms Pro.

Etapa 2: criar um novo formulário personalizado

Após a conclusão da instalação do plugin, abra Everest Forms >> Add New . Na página Adicionar novo formulário , você encontrará uma coleção de modelos de formulário pré-criados. No entanto, você também pode começar do zero.

Neste tutorial, começaremos do zero. Então, clique em Start From Scratch e dê um nome ao seu formulário. Aqui vamos chamá-lo de “Formulário WYSIWYG” e pressionar Continuar.

Você pode construir qualquer tipo de formulário de acordo com suas necessidades; pode ser um formulário de contato, formulário de solicitação de licença, formulário de postagem de convidado, etc.

Tudo o que você precisa fazer é arrastar e soltar os campos necessários no editor de formulários e clicar em Salvar .

Etapa 3: adicione e personalize o campo WYSIWYG em seu formulário

Adicionar um campo WYSIWYG usando Everest Forms em seu formulário é muito fácil. Basta arrastar e soltar o campo WYSIWYG dos Campos Avançados para o formulário.

Além disso, você pode personalizar o campo WYSIWYG. Você só precisa clicar no campo e suas opções de campo aparecerão à esquerda.

Em seguida, você pode fazer alterações nas opções de campo conforme explicado abaixo:

• Rótulo : aqui, você pode alterar o rótulo do campo digitando o que deseja que seja seu rótulo.
• Meta-chave : A meta-chave armazena os dados do campo em seu banco de dados e os recupera quando necessário.
• Descrição : Você pode inserir texto para a descrição do campo do formulário aqui.

Em seguida, você pode simplesmente verificar Requerido , Dica de ferramenta e Validar como exclusivo se desejar que essas opções sejam ativadas.

Role para baixo até as Opções Avançadas , onde você encontrará:

• Place Holder Text : Você pode inserir o texto para o placeholder do campo de formulário. Por exemplo, escrevemos: "Digite sua mensagem aqui".
• Ocultar rótulo : você pode simplesmente marcar esta opção para ocultar o rótulo do campo.
• Valor padrão : Aqui, você pode inserir texto para o valor do campo de formulário padrão ou simplesmente escolher o campo necessário clicando no botão <> .
• Classes CSS : Você também pode adicionar classes CSS personalizadas para personalização adicional.

Se necessário, você pode até aplicar lógica condicional ao campo com a opção Ativar lógica condicional .

Finalmente, você pode clicar no botão Salvar na parte superior. Se você quiser uma prévia do seu formulário, clique em Pré -visualizar .

Como você pode ver, o campo WYSIWYG do Everest Forms permite que os usuários do seu site alternem entre dois modos:

• Visual : Imagens e texto são exibidos diretamente no editor de texto.
• Texto : As imagens e o texto são exibidos no formato HTML.

Aqui está a lista de opções da barra de ferramentas que você encontrará para o modo Visual no campo WYSIWYG:

• Audacioso
• itálico
• Lista de marcadores
• Lista de números
• Bloco de citação
• Alinhar à esquerda
• Alinhar ao centro
• Alinhar à direita
• Inserir/editar link
• Inserir tag Leia mais
• Tela cheia

Para exibir opções adicionais, clique no ícone de alternância da barra de ferramentas.

Aqui está uma lista de todas as opções adicionais que estão disponíveis:

• Tachado
• Linha horizontal
• Cor do texto
• Colar como texto
• Limpar formatação
• Caractere especial
• Recuar devagar
• Aumentar recuo
• Atalhos do teclado

Além disso, os usuários poderão selecionar os formatos de texto como Parágrafo, Título, etc. na lista suspensa.

Por outro lado, os usuários devem digitar tags HTML no campo se escolherem o modo Texto . Há uma lista de tags HTML comuns acima do campo que um usuário pode adicionar diretamente ao editor em vez de digitá-las.

Etapa 4: definir suas configurações de formulário

Em seguida, abra a guia Configurações do formulário para definir as configurações do seu formulário. Aqui, você encontrará 3 seções com várias opções de personalização.

Geral: com as configurações gerais, você pode editar a descrição do formulário , mensagem desativada do formulário , habilitar lógica condicional , designs de layout etc.

E-mail: As configurações de e-mail permitem que você crie modelos de notificação de e-mail de administrador e usuário.

WebHook: Usando um WebHook, você pode enviar os dados do formulário para qualquer URL externa. Tudo o que você precisa fazer é definir a URL da solicitação, o método da solicitação, o formato da solicitação e o cabeçalho da solicitação.

Finalmente, você pode clicar no botão Salvar .

Etapa 5: exiba seu formulário no site

Você criou seu formulário com sucesso usando Everest Forms para adicionar um campo WYSIWYG. Mas não será visível para seus usuários, a menos que você exiba seu formulário em seu site WordPress.

Portanto, para adicionar o formulário ao seu site, você pode usar qualquer um desses dois métodos.

A primeira maneira é copiando o código de acesso do formulário da parte superior do construtor.

Em seguida, crie uma nova página ou postagem e você chegará ao editor Gutenberg. Aqui, pressione o ícone Adicionar bloco ( + ) e procure o bloco Shortcode . Em seguida, clique no bloco para adicioná-lo à página ou postagem.

Depois disso, cole o shortcode que você acabou de copiar no bloco e clique no botão Publicar .

É isso! Seu formulário será exibido em seu site.

Alternativamente, você pode usar o bloco Everest Forms para exibir seu formulário. Clique no botão ( + ) e procure o bloco Everest Forms .

Adicione-o à página e selecione seu formulário WordPress WYSIWYG no menu suspenso.

Por fim, você pode clicar no botão Publicar na parte superior.

Embrulhando-o!

E isso é um final para o nosso guia sobre como adicionar o campo WYSIWYG no WordPress Forms. Tudo o que você precisa é do incrível plugin Everest Forms. Você pode simplesmente arrastar e soltar o campo WYSIWYG em seu formulário e personalizá-lo sem problemas.

Isso não é tudo o que você pode fazer com o Everest Forms. Você pode usar este poderoso plugin para habilitar a visualização de entrada em formulários de várias partes, habilitar o redirecionamento condicional após o envio do formulário e muito mais.

Leia mais sobre Everest Forms em nosso blog se estiver interessado. Você também pode visitar nosso canal do YouTube para tutoriais em vídeo fáceis.

Além disso, não se esqueça de nos seguir no Facebook e Twitter para atualizações futuras.