Tutorial Ninja Forms plugin para WordPress

Actualizado: octubre 2018

Si has llegado hasta aquí, estas de enhorabuena y es que hoy vamos a ver un completo tutorial en español sobre cómo crear y gestionar formularios de contacto con el plugin Ninja Forms.

ninja forms wordpress

Tutorial Ninja Forms plugin para WordPress
4 (80%) 4 votes

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

Ninja Forms plugin

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.

Mejorar Ninja Forms

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:

Formulario contacto Ninja Forms

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:

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 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”.

Añadir formulario Ninja Forms a WordPress

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:

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:

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:

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.

Espero que te haya gustado, y de ser así, agradecería enormemente si me ayudades compartiéndolo en las redes sociales para llegar a más gente.

¡Un saludo!

¿Alguna pregunta?

Si tienes alguna duda, o si te ha gustado el post, te espero en Twitter: @TutorialWP_

¡Sigue leyendo!