Widget de elemento Ninja Forms: Formulários Ninja de estilo sem CSS

O widget Formulário Ninja em Master Addons é gratuito Ele coloca um formulário que você construiu no plugin Formulários Ninja em uma página Elementor e dá-lhe controles de estilo para o título, rótulos, campos, botões de rádio e caixas de seleção, botão enviar e mensagens Quatro variações de design são gratuitas, e mais sete vêm com Master Addons Pro. Formulários Ninja ainda lida com os campos, notificações e submissões.

Como adicionar formulários Ninja ao Elementor

Você precisa do plugin gratuito Ninja Forms e pelo menos um formulário integrado nele.

  1. Instalar e ativar Formas Ninja a partir do WordPress.org, em seguida, construir o seu formulário no painel Formulários Ninja.
  2. Verifique se o Forma Ninja o widget é ativado nas configurações do widget Master Addons.
  3. Edite sua página com Elementor, procure no painel Forma Ninja e arraste o widget para dentro.
  4. Escolha seu formulário no Formulário Contato dropdown e escolha se deseja mostrar Etiquetas e Espaço reservado texto.
  5. Na guia Estilo, escolha a Design Variação, em seguida, ajuste as entradas, caixas de seleção, botão enviar e mensagens.
  6. Atualize a página e envie uma entrada de teste para verificar se o Ninja Forms a recebe.
Predefinições de variações de design de widgets WeForms em complementos mestres

Variações de design: 4 grátis, 7 Pro

Design Variação na guia Estilo aplica uma aparência pronta para todo o formulário Estilo Um ao Estilo Quatro são gratuitos, e Estilo Cinco ao Estilo Onze precisam de Master Addons Pro. Escolha um como ponto de partida e altere os detalhes nas seções abaixo dele.

  • Grátis: Estilo Um, Estilo Dois, Estilo Três e Estilo Quatro.
  • Pró: Estilo Cinco até Estilo Onze.
  • Opções de conteúdo: mostrar ou ocultar rótulos e texto do espaço reservado, além de mensagens de erro e erros de validação.

Estilo de entrada, área de texto e caixa de seleção

Entrada e área de texto possui guias Normal e Focus com cor e borda de fundo, além de cor do texto, raio da borda, alinhamento, recuo de texto, largura e altura da área de entrada e texto, preenchimento, espaçamento e tipografia. Rádio e caixa de seleção pode substituir os padrões do navegador por estilos personalizados: tamanho, cor, largura da borda e cor da borda, raio de borda separado para caixas de seleção e botões de opção e uma cor marcada.

  • Etiquetas e espaço reservado: cor do texto e tipografia para rótulos e cor do texto para espaços reservados.
  • Descrição do campo: cor, tipografia e espaçamento para o texto de ajuda sob um campo.
  • Título e descrição: alinhamento, cor, tipografia e margem para o título e descrição do formulário.
WeForms formam estilos de contêiner no widget Master Addons
WeForms entrada, área de texto e estilo de etiqueta

Enviar Mensagens de Botão e Formulário

Botão Enviar define alinhamento, largura total ou personalizada, cor de fundo e texto, borda, raio de borda, preenchimento, margem superior, tipografia e sombra de caixa, com uma guia Hover para fundo, texto e cor de borda As seções de mensagem estilizam o que os visitantes veem depois de enviar.

  • Mensagem de sucesso: cor do texto e tipografia.
  • Aviso de campos obrigatórios: cor, espaçamento e tipografia.
  • Erros: cor do texto para mensagens de erro, além de cores de descrição e borda para campos que falham na validação.

Widget de código curto Elementor vs o widget de formulário Ninja

O Elementor Livre já pode mostrar um Formulário Ninja: cole seu shortcode no widget Shortcode O formulário funciona da mesma maneira de qualquer maneira A diferença é como você o estiliza.

CaracterísticaWidget de código curto ElementorWidget Master Addons Ninja Form
PreçoGrátis (núcleo do elementador)Grátis, Pro para mais 7 variações de design
Adicionando o formulárioCole um shortcode como [ninja_form id="1"]Escolha o formulário em um menu suspenso
EstiloSeu próprio CSSControles de guias de estilo para campos, caixas de seleção, botão e mensagens
Aparência predefinidaNão4 grátis, 7 Pro
Ocultar etiquetas ou espaços reservadosCSSInterruptores
Campos, notificações, submissõesFormas NinjaFormas Ninja

Ambas as rotas executam o mesmo formulário Ninja Forms O widget salva você escrevendo CSS para combinar o formulário com o resto da página.

Outros widgets de formulário: Formulário de contato 7 (grátis), Formulários WP (gratuito) e Formas Gravidade (Pro).

Visualizador de modelos
Facebook
Twitter
WhatsApp
Copiar link
Compre Agora
Formulário de contato de vidro
Formulário de contato de vidro
Formulário de consulta de negócios
Formulário de consulta de negócios
Formulário de Contato Básico
Formulário de Contato Básico
Formulário de Contato Avançado
Formulário de Contato Avançado
Mapa do Google com Formulário de Contato
Mapa do Google com Formulário de Contato
Formulário de Contato com Inscrição
Formulário de Contato com Inscrição

Perguntas frequentes para o formulário Ninja

Saiba as dúvidas mais solicitadas que os usuários têm sobre o Ninja Form e encontre respostas em um só lugar.
Preciso do plugin Ninja Forms instalado?

Sim. Instale e ative o plugin gratuito Ninja Forms e crie seu formulário lá primeiro Sem ele, o widget mostra um aviso “Ninja Forms is Not Activated” em vez de um formulário.

Sim. O widget e o Style One to Style Four são gratuitos em Master Addons Style Five to Style Eleven precisam do Master Addons Pro.

Posso tornar o formulário responsivo em dispositivos móveis?

Sim. muitos dos controles de tamanho e espaçamento, como largura e altura de entrada, preenchimento, alinhamento e largura do botão, assumem valores separados para desktop, tablet e celular.

Use as seções Mensagem de Sucesso, Aviso de Campos Necessários e Erros na guia Estilo Eles definem a cor do texto e a tipografia para a mensagem de sucesso, e as cores do texto, descrição e borda para erros Não há configuração de cor de fundo para essas mensagens.

Widgets e extensões de elementos de tendência

Construa sites sofisticados em menos tempo.

Extensão Master Addons Glassmorphism para Elementor: cartões de vidro fosco com o controle Blur Value definido como 20 px

Glassmorphismo

Extensão de Glassmorphism de Elementor Livre em Casa: Efeito de vidro fosco em uma alternância O Glassmorphism é o fosco...
Ver detalhes
Extensão Master Addons Container Extras para Elementor: contêiner tampado em uma largura máxima de 1400 px, com controles de largura máxima, altura máxima, largura mínima e altura mínima

Contêiner Extras

Home Elementor Container Max Width e Max Height Controls Container Extras é um Master gratuito...
Ver detalhes
Extensão Master Addons Patterns para Elementor: herói com o estilo Purple Gradient Grid Left, mais três estilos de padrões e o painel Habilitar Padrão

Padrões

Início 70+ Padrões de fundo de elementor gratuitos é uma extensão gratuita de complementos mestres que adiciona...
Ver detalhes
Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]

Duplicador de postagem/página

Home Páginas e postagens de elementos duplicados em um clique Post/Page Duplicator é um Master gratuito...
Ver detalhes
Extensão da barra de progresso de leitura de complementos mestres para Elementor: barra azul 42% preenchida na parte superior de uma página de política de privacidade, com configurações de habilitação, posição, altura e preenchimento de cores

Barra de progresso de leitura

Início Adicionar uma barra de progresso de leitura no WordPress (Elementor) A barra de progresso de leitura é gratuita...
Ver detalhes