Ninja Forms – The Easy and Powerful Forms Builder creado por The WP Ninjas es un plugin formularios WordPress que está ganando cada vez más popularidad y ya cuenta con más de un millón de instalaciones activas.
Y es que es uno de los plugins freemiums (gratis con opciones extra de pago) que más opciones ofrece, tanto de diseño como de contenido y gestión de formularios de contacto por lo que cada vez más está entrando en el grupo de plugins imprescindibles WordPress.
Instalar y activar el plugin Ninja Forms – The Easy and Powerful Forms Builder
He creado esta web con el fin de enseñar «WordPress for dummies« así que vamos a empezar por el principio, pero sólo un poquito más adelante veremos todo lo que el plugin Ninja Forms te puede aportar.
Como cualquier otro plugin, lo primero es ir a la sección de Plugins dentro del panel de administrador y pulsar en la sección “Añadir Nuevo”.
Una vez allí, escribiremos en la caja del buscador superior derecha “Ninja Forms”.
Como ya hemos dicho, seleccionaremos el primer plugin que nos aparece, por si tienes dudas, el nombre completo es Ninja Forms – The Easy and Powerful Forms Builder y ha sido creado por The WP Ninjas.
Una vez detectado, instalamos, activamos y seguimos.
Si prefieres subir el plugin por FTP, también puedes descargarlo del repositorio oficial en wordpress.org.
Conociendo el plugin Ninja Forms para WordPress
Seguramente, lo primero que te llamará la atención nada más instalarlo, será el enorme banner que aparece en la parte superior del apartado de plugins.
En él, nos solicitan permiso para recolectar ciertos datos de nuestro servidor y el uso que hacemos del plugin, así como que demos permiso para apuntarnos a su boletín o newsletter de novedades.
Decide qué prefieres rápidamente o directamente cierra el aviso para empezar con la configuración de Ninja Forms.
Una vez instalado y activo, el plugin Ninja Forms nos creará un apartado en nuestro dashboard de administrador llamado con el mismo nombre del plugin.
Una vez dentro, podrás disfrutar de uno de los principales puntos fuertes del plugin Ninja Forms, y no es otra cosa que su limpia y bien diseñada interfaz de usuario.
Como podrás ver, hay 3 pestañas principales:
Formularios
Podremos añadir un formulario de contacto nuevo o modificar y editar el que ya trae el plugin por defecto.
Aquí también veremos los diferentes shortcodes de WordPress que genera el plugin para añadir los formularios de contacto a nuestra web.
Aplicaciones e integraciones
Como te puedes imaginar, en este apartado encontrarás todas las posibles extensiones disponibles para combinar con los formularios del plugin Ninja Forms.
Membresía
En esta última pestaña tienes todas las opciones disponibles y los precios por si te interesa pasarte a la opción premium de Ninja Forms.
Crear formularios de contacto con Ninja Forms en WordPress
De vuelta a la pestaña Formularios, vamos a ver cómo crear un formulario de contacto para WordPress con el plugin Ninja Forms.
Pulsamos en añadir nuevo o pulsamos en el título del que viene ya creado para empezar a modificarlo.
En la pestaña formularios tenemos otros 6 nuevos apartados:
- + Campos del formulario
- + Avanzadas
- + Ver
- + Publicar
- + Correos electrónicos y acciones
- + Preview Changes (Previsualizar cambios)
Campos del formulario
Ninja Forms cuenta con un montón de campos para añadir a tus formularios.
Por defecto, el formulario viene con los campos nombre, email, mensaje y enviar.
Para cambiar el orden de los campos Ninja Forms cuenta con un sistema drag & drop. Simplemente hay que arrastar y soltar los campos para dejarlos en el orden que más te interese.
Añadir nuevos campos al formulario de contacto
Para incluir nuevos campos al formulario, tan sólo hay que pinchar en el icono “+” con fondo azul que vemos abajo a la derecha y nos aparecerá un desplegable con todas las opciones disponibles.
A continuación te dejo un listado con todos los campos disponibles por si quieres comprobar si Ninja Forms cuenta con algún campo concreto antes de instalarlo:
- Campos comunes
- Cuadro de verificación único
- Fecha
- Lista del cuadro de verificación
- Multi-Seleccionar
- Lista de opciones
- Seleccionar
- Enviar
- Texto del párrafo
- Texto de una sola línea
- Campos de información de usuario
- Dirección
- Ciudad
- Correo electrónico
- Nombre
- Apellido
- País
- Estados de USA
- Teléfono
- Código postal
- Campos de precios
- Producto
- Cantidad
- Envío
- Total
- Campos de diseño
- HTML
- Divisor
- Campos de misceláneas
- Confirmar
- Oculta
- Número
- Recaptcha
- Anti-spam
- Valoración de estrellas
Editar los campos del formulario con Ninja Forms
Una vez vistos todos los campos disponibles para añadir a los formularios de nuestra web en WordPress, debes saber que también es posible editar cada uno de ellos.
Para editar los campos de tu formulario con Ninja Forms, tan sólo tienes que pulsar el icono de la rueda que verás al lado de cada campo.
Estos son algunos de los campos que podrás editar:
- Texto de la etiqueta del campo
- Posición de la etiqueta
- Campo obligatorio
- Restricciones
- Visualización
- Avanzadas
- Administración
Texto y posición de la etiqueta del campo
Esta parte no tiene mucho misterio.
Simplemente se trata de decidir qué texto quieres que aparezca en la etiqueta (o label) que aparece junto al campo del formulario.
Además, también puedes elegir la posición del texto de esta etiqueta.
Campo obligatorio
SI lo seleccionas, el formulario no podrá ser enviado a menos que estos campos se rellenen correctamente.
Suele usarse para prevenir el spam o asegurarte que recibes todos los datos importantes del usuario (email de contacto por ejemplo).
Restricciones
En este apartado, podrás añadir ciertas restricciones a los campos.
Principalmente el tipo, número mínimo o máximo de caracteres etc.
Visualización
Este apartado sirve para aplicar estilos CSS a nuestro formulario.
Podríamos cambiar los bordes, el tamaño, los colores de fondo, los colores de los input.
También se puede añadir clases al contenedor o directamente al evento.
Avanzado
En este apartado se pueden controlar aspectos tan novedosos como activar o desactivar el auto relleno de los campos aprovechando las cookies almacenadas.
Administración
En administración le podríamos dar una clave a algún campo del formulario.
Correos electrónicos y acciones
En este apartado tienes otro grupo de opciones para configurar.
Si vas con prisa, lo principal es que traduzcas al español los mensajes de aviso que le llegarán al usuario.
En este caso, para que este tutorial de Ninja Forms sea completo, vamos a ver todos los detalles:
Store Submission
Si seleccionamos esta opción, se guardarán los datos del usuario en nuestra base de datos.
Las opciones de configuración en este caso son sólo activar, desactivar y cambiar el nombre de la acción y colocaremos.
Email confirmation
El mensaje de éxito que le llegará al usuario una vez haya enviado el mensaje correctamente a través de un formulario creado con Ninja Forms.
Si pinchas en el icono de rueda, verás todas las opciones de personalización que tiene el plugin.
Email notification
Este email es simplemente un aviso para el administrador. No lo verá el usuario.
Success message
Este es el mensaje de confirmación que verá el usuario al enviar el formulario de contacto creado con Ninja Forms de forma correcta.
Te sugiero que aunque no tengas mucho tiempo de configurarlo, al menos traduzcas el mensaje al español.
Avanzadas
En este último apartado, tenemos algunos ajustes avanzados que nos permiten configurar nuestros formularios de Ninja Forms hasta el último detalle.
Estas son las opciones disponibles:
Ajustes de visualización
En este apartado, tenemos la opción de modificar el título del formulario.
Justo debajo del campo para añadir el título del formulario, tendremos la opción de decidir si queremos que aparezca o no ese título.
Lo siguiente es la opción “Eliminar el formulario completado con éxito”. Tal y como dice el mensaje de ayuda, marcando esta opción limpiará los valores que añada el usuario al formulario una vez enviado correctamente.
Con la siguiente opción “Ocultar el formulario completado con éxito” harás que Ninja Forms oculte el formulario completo tras ser enviado correctamente.
Esta opción facilita que el usuario comprenda que el formulario se ha realizado con éxito y por eso ha desaparecido, evitando que se confunda y piense que lo ha hecho mal.
En el apartado de Administración, puedes asignar un nombre a un formulario concreto para así hacer referencia a él desde el panel de control y poder cargarlo en la página o post que te interese.
Por último, en el apartado “Avanzadas”, como ya hemos visto antes, es donde designaremos entre otras cosas dónde queremos que aparezca la etiqueta o label del formulario o directamente que se oculte.
Además, podremos escribir los mensajes de error o de aviso al usuario que aparecerán al interactuar con nuestro formulario creado con Ninja Forms.
Restricciones
En esta apartado de la configuración de Ninja Forms, se pueden configurar algunas limitaciones que queramos aplicar a nuestros formularios.
Por ejemplo, podemos decir que sólo las personas registradas pueden utilizar el formulario con un mensaje parecido a «Debes estar registrado para rellenar el formulario», esto claro, en caso de que quisiéramos habilitar esta opción.
Cálculos
El apartado cálculos es para hacer formularios avanzados con números y ecuaciones.
Es una sección muy interesante con la que puedes exprimir toda la potencia de Ninja Forms.
El límite aquí está en tu imaginación y sobre todo, lo que realmente necesites para tu proyecto.
Añadir Formulario de contacto a WordPress con Ninja Forms
Si has llegado hasta aquí, déjame darte la enhorabuena.
Ya tienes creado y configurado el formulario de contacto para tu web con el plugin Ninja Forms de WordPress.
Dale al botón azul en la parte superior derecha llamado “Hecho” o “Publicar” según la sección de la configuración en la que estés para guardar todos los cambios y pulsa la X grande de la derecha para volver al panel de administrador de WordPress.
Para añadir el formulario de contacto que hemos creado con Ninja Forms, debemos copiar el shortcode que hace referencia al formulario que nos interesa y nos vamos a la página o post que queramos modificar.
Ninja Forms ofrece varias opciones para incrustar los formularios creados con este plugin.
Mediante Shortcode
Si ya has copiado el shortcode que referencia a algún formulario, tan sólo tienes que pegarlo directamente en el editor de WordPress, en la línea donde quieras que aparezca.
Botón en el editor de WordPress
Otra opción es utilizar el botón que como verás ha aparecido en el editor de WordPress con el título “Añadir Formulario”.
Si usamos esta opción, aparecerá un cómodo desplegable con el que seleccionar el formulario web creado con Ninja Forms que queramos añadir.
Una vez carguemos el formulario y demos a guardar, podremos comprobar que ya está visible y disponible para nuestros usuarios en la web.
Complementos o extensiones premium para el plugin Ninja Forms
En el apartado complementos del menú de Ninja Forms, tendremos un listado con todas las extensiones premium que tiene Ninja Forms a tu disposición.
Nada más pinchar, veremos toda la oferta de complementos premium, de los que podremos ampliar información y comprar desde la página oficial.
Estas son las extensiones entre las que podrás elegir:
- Layout and Styles
- File Uploads
- Conditional Logic
- Multi-Part Forms
- MailChimp
- PayPal Express
- User Management
- Front-End Posting
- Stripe
- Webhooks
- Zapier
- SalesForce CRM
- Campaign Monitor
- Constant Contact
- AWeber
- Zoho CRM
- Table Editor
- Capsule CRM
- Insightly CRM
- PDF Form Submission
- Trello
- Vimeo Uploader
- Slack
- CleverReach
- Excel Export
- WebMerge
- Emma
- Recurly
- Twilio SMS
- ClickSend SMS
Otras opciones que ofrece Ninja Forms
Para que este tutorial de Ninja Forms sea completo, voy a comentar brevemente los paneles que nos faltan por mencionar.
Envíos
En este apartado, podremos ver todos los envíos que nuestros usuarios hagan a través de los formularios que creemos con Ninja Forms.
Es muy útil ya que tendremos unificados todos los emails recibidos y podremos ver a través de qué formulario se ha enviado y todos los campos añadidos, que por defecto son:
- Nombre
- Mensaje
- Fecha
Importar/Exportar
Como su nombre indica, con esta opción podrás importar o exportar formularios completos creados con Ninja Forms en o para otras web.
Una opción muy destacada que ofrece la sección “Campos Favoritos” dentro de este apartado es importar y exportar sólo algunos campos, con el fin de poder incluirlos en un formulario ya creado en otra web.
Obtener ayuda
En este apartado, tienes acceso directo a toda la documentación de Ninja Forms, resolución de problemas y enlace directo a la asistencia técnica del plugin, así como un resumen del entorno en el que está creada tu web para poder informar al servicio técnico en caso de problemas con toda esta información:
- URL de inicio
- URL del Sitio
- Versión de WP
- Versión PHP
- Versión MySQL
- Idioma de WP
- SMTP
- smtp_port
- Nombre del host
- SUHOSIN Instalado
- Plugins activados
- PHP Límite de Tiempo
- Versión de Ninja Forms
- WP Multisitio activado
- PHP Entrada Máxima Vars
- Límite de memoria de WP
- Modo de depuración de WP
- Dirección IP del servidor
- Zona Horaria por Defecto
- Configuración regional PHP
- Tamaño Máximo de Puesto PHP
- Información del servidor web
- Tamaño máximo de subida de WP
- Nivel Máximo de Entrada de la Anidación
Registro de cambios en las actualizaciones de Ninja Forms
En este apartado iré añadiendo las novedades en el desarrollo del plugin, directamente extraídas de WordPress.org y traducidas de forma automática, para que si el inglés no es lo tuyo, puedas estar a la última:
Versión 3.4.22 (21 Noviembre 2019)
Solución de errores:
- La restricción de campo único ya no debería impedir que se completen las acciones de pago.
- Se ha corregido un error que impedía que la lista actual de campos favoritos se visualizara en cualquier lugar.
- Actualizado algunos de nuestros estilos de construcción para tener en cuenta las actualizaciones en WordPress 5.3.
- Se ha corregido un error que a veces hacía que no se encontraran las imágenes del campo de selección de imágenes.
- Deshabilitada una función interna de registro de errores que a veces causaba hinchazón en nuestras tablas de la base de datos.
Mejoras:
- Las acciones de correo electrónico ahora admiten archivos adjuntos de la biblioteca multimedia de WordPress.
Opinión final Ninja Forms
Pues hasta aquí ha llegado este tutorial del plugin Ninja Forms en el que he intentado explicarte todo lo relacionado con esta herramienta para que puedas decidir si es válida para tu proyecto, y para que puedas crear y añadir formularios de contacto a tu web sin ninguna duda.
Por si te has quedado con ganas de más, te dejo este fantástico video de Javier Posada en el que podrás ver el plugin Ninja Forms en acción.
Ninja forms crea formulario de contacto en wordpress tutorial en español
Video de Javier Posada
Para mí, Ninja Forms es junto con Contact Form 7 el plugin gratuito para crear formularios web que más me gusta.
Su interfaz limpia y fácil de usar, hace que sea ideal para los clientes o gente sin mucha experiencia y como es un plugin muy extendido y famoso tiene complementos para cualquier necesidad que te pueda surgir así como un sistema de soporte y planes premium.
Si te ha gustado este artículo, te invito a compartirlo en redes sociales para que ayude a más gente.
Por último, puedes dejar tu email en el formulario que verás debajo para recibir gratis nuestra Guía Completa de Wordpress en PDF. También te informaremos de nuevos artículos, recursos y ofertas útiles para tu Wordpress.
