Widget Ninja Forms Elementor: Estilo Ninja Forms sin CSS
El widget Ninja Form en Master Addons es gratuito. Coloca un formulario que creó en el complemento Ninja Forms en una página de Elementor y le brinda controles de estilo para el título, etiquetas, campos, botones de opción y casillas de verificación, botón de envío y mensajes. Cuatro variaciones de diseño son gratuitas y siete más vienen con Master Addons Pro. Ninja Forms todavía maneja los campos, notificaciones y envíos.
Cómo agregar formas ninja a Elementor
Necesita el complemento gratuito Ninja Forms y al menos un formulario integrado.
- Instalar y activar Formas ninja desde WordPress.org, luego cree su formulario en el panel de Ninja Forms.
- Comprueba que el Forma ninja el widget está activado en la configuración del widget de complementos maestros.
- Edite su página con Elementor, busque en el panel Forma ninja y arrastra el widget hacia adentro.
- Elige tu formulario en el Formulario de contacto desplegable y elige si mostrar Etiquetas y Marcador texto.
- En la pestaña Estilo, elija a Variación de diseño, luego ajuste las entradas, casillas de verificación, botón de envío y mensajes.
- Actualice la página y envíe una entrada de prueba para verificar que Ninja Forms la reciba.
Variaciones de diseño: 4 gratis, 7 Pro
Variación de diseño en la pestaña Estilo se aplica un vistazo listo a todo el formulario. Los estilos uno a cuatro son gratuitos y los estilos cinco a once necesitan Master Addons Pro. Elija uno como punto de partida y luego cambie los detalles en las secciones siguientes.
- Gratis: Estilo Uno, Estilo Dos, Estilo Tres y Estilo Cuatro.
- Pro: Estilo Cinco a Estilo Once.
- Opțiuni de content: muestre u oculte etiquetas y texto de marcador de posición, además de mensajes de error y errores de validación.
Entrada, área de texto y estilo de casilla de verificación
Área de entrada y texto tiene pestañas Normal y Focus con color de fondo y borde, además de color de texto, radio del borde, alineación, sangría de texto, ancho y alto del área de entrada y texto, relleno, espaciado y tipografía. Radio y casilla de verificación puede reemplazar los valores predeterminados del navegador con estilos personalizados: tamaño, color, ancho del borde y color del borde, radio del borde separado para casillas de verificación y botones de opción, y un color marcado.
- Etiquetas y marcador de posición: color de texto y tipografía para etiquetas, y color de texto para marcadores de posición.
- Descrierea câmpului: color, tipografía y espaciado del texto de ayuda bajo un campo.
- Título y descripción: alineación, color, tipografía y margen para el título y descripción del formulario.
Botón de envío y mensajes de formulario
Botón Enviar establece alineación, ancho completo o personalizado, color de fondo y texto, borde, radio del borde, relleno, margen superior, tipografía y sombra de cuadro, con una pestaña flotante para fondo, texto y color de borde. Las secciones de mensajes diseñan lo que los visitantes ven después de enviarlos.
- Mesaj de succes: color y tipografía del texto.
- Aviso de campos requeridos: color, espaciado y tipografía.
- Errores: color de texto para mensajes de error, además de colores de descripción y borde para campos que no validan.
Widget de código corto Elementor frente al widget de formulario Ninja
Free Elementor ya puede mostrar un formulario Ninja: pegue su código corto en el widget Shortcode. El formulario funciona igual en cualquier sentido. La diferencia es cómo lo peinas.
| Característica | Widget de código corto de Elementor | Widget de formulario Ninja de complementos maestros |
|---|---|---|
| Precio | Gratis (núcleo de Elementor) | Gratis, Pro para 7 variaciones de diseño más |
| Añadiendo el formulario | Pegue un código corto como [ninja_form id="1"] | Elija el formulario en un menú desplegable |
| Estilismo | Tu propio CSS | Controles de pestaña de estilo para campos, casillas de verificación, botones y mensajes |
| Aspectos preestablecidos | No | 4 gratis, 7 Pro |
| Ocultar etiquetas o marcadores de posición | CSS | Interruptores |
| Campos, notificaciones, presentaciones | Formas ninja | Formas ninja |
Ambas rutas ejecutan el mismo formulario de Formularios Ninja. El widget le permite escribir CSS para que coincida con el formulario con el resto de la página.
Otros widgets de formulario: Formulario de contacto 7 (gratis), Formularios WPF (gratis) y Formas de gravedad (Pro).
Preguntas frecuentes sobre el formulario Ninja
¿necesito instalar el complemento Ninja Forms?
Sí. Instale y active el complemento gratuito Ninja Forms y cree su formulario allí primero. Sin él, el widget muestra un aviso “Ninja Forms no está activado” en lugar de un formulario.
¿el widget Ninja Form es gratuito?
Sí. El widget y el estilo uno al estilo cuatro son gratuitos en los complementos maestros. Los estilos cinco a once necesitan complementos maestros Pro.
¿Puedo hacer que el formulario responda en dispositivos móviles?
Sí. Muchos de los controles de tamaño y espaciado, como el ancho y alto de entrada, el acolchado, la alineación y el ancho de los botones, toman valores separados para computadoras de escritorio, tabletas y dispositivos móviles.
¿Cómo diseño los mensajes de error o la notificación de éxito?
Utilice las secciones Mensaje de éxito, Aviso de campos requeridos y Errores en la pestaña Estilo. Establecen el color y la tipografía del texto para el mensaje de éxito, y el texto, la descripción y los colores de los bordes para los errores. No hay configuración de color de fondo para estos mensajes.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
