Utiliza un constructor de formularios de arrastrar y soltar para WordPress

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los formularios siempre han sido una parte integral de Internet. Como propietario de un sitio web de WordPress, no tienes más remedio que usarlos si quieres que tus usuarios se comuniquen contigo. Sin embargo, crear un formulario moderno que siga las prácticas recomendadas y se ajuste a la apariencia de tu sitio puede ser una tarea desalentadora, especialmente si no te sientes cómodo escribiendo código.

Afortunadamente, en la actualidad existen distintos y potentes constructores de formularios para WordPress, que ofrecen intuitivas interfaces WYSIWYG ("lo que ves es lo que obtienes") y con funcionalidad para arrastrar y soltar elementos, disponibles en CodeCanyon. FormCraft, desarrollado por el autor de élite de CodeCanyon nCrafts, es uno de esos constructores de formularios.

FormCraft es un plugin premium de WordPress preparado para cumplir el RGPD que puedes usar para crear atractivos formularios en tu sitio web en cuestión de minutos. Tiene integradas un montón de características avanzadas, incluyendo soporte para solicitudes AJAX, desencadenadores, mensajes emergentes, e incluso lógica condicional. A través de complementos, ofrece funcionalidad adicional como la integración con MailChimp y reCAPTCHA.

En este tutorial, te mostraré cómo instalar el plugin y usar algunas de sus más importantes características.

1. Instalación de FormCraft

Inicia sesión en tu cuenta de Envato y dirígete a CodeCanyon para que puedas adquirir una licencia de uso para FormCraft. Con más de 16.000 ventas, es uno de los artículos más populares de la plataforma.

Después de haberlo comprado con éxito, tendrás acceso a un archivo ZIP que podrás usar para instalar el plugin.

Inicia sesión en el panel de administración de tu instalación de WordPress y dirígete a Plugins > Añadir nuevo. A continuación, pulsa el botón Subir plugin. En la siguiente pantalla, pulsa primero el botón Examinar... para seleccionar el archivo ZIP y, a continuación, pulsa el botón Instalar ahora para iniciar la instalación.

Ten en cuenta que el tamaño del plugin es de 2,3MB. Si tu instalación de WordPress te notifica de que el tamaño del plugin supera el tamaño máximo permitido para los archivos cargados, tendrás que aumentar el valor de la variable upload_max_filesize en tu archivo php.ini.

Una vez instalado el plugin, pulsa el botón Activar para empezar a usarlo.

2. Creación de un formulario usando una plantilla

El panel de administración de WordPress ahora debería tener una nueva sección llamada FormCraft. Abre y presiona el botón New Form (nuevo formulario) para poder empezar a crear tu primer formulario.

En el cuadro de diálogo que aparece, elige la opción Template (plantilla). Debido a que FormCraft viene con casi una docena de plantillas bien diseñadas para los tipos más comunes de formularios, usar una de ellas es la forma más sencilla y rápida de crear tu formulario.

Por ahora, vamos a crear un formulario de contacto. Así que elige cualquier plantilla de Contact (contacto), asígnale un nombre al formulario y presiona el botón Create Form (crear formulario). Yo usaré la plantilla Contact (2).

Una vez que el formulario esté listo, serás redirigido automáticamente a una interfaz en la que podrás editarlo.

Editar un formulario con FormCraft es extremadamente fácil. Por lo general, todo lo que tienes que hacer es hacer clic en el campo de formulario que desees modificar y actualizar sus propiedades. Por ejemplo, si deseas cambiar la etiqueta del campo Name (nombre), haz clic sobre él y, en el cuadro de diálogo que aparece, actualiza el valor de la propiedad Label (Etiqueta).

Para cerrar el cuadro de diálogo, haz clic en cualquier lugar fuera de él.

Por último, si estás satisfecho con todos los cambios, puedes hacerlos permanentes pulsando el botón Save (Guardar).

3. Visualización del formulario

Existen dos enfoques distintos que puedes seguir para mostrar un formulario creado con FormCraft. El primer enfoque implica el uso de una página de formulario dedicada, que tiene su propia dirección URL única y no muestra nada más que el formulario. Este enfoque implica un esfuerzo mínimo y también te facilita la posibilidad de compartir el formulario.

De forma predeterminada, FormCraft crea automáticamente una página de formulario dedicada a cada formulario. Para determinar la dirección URL del formulario que creaste en el paso anterior, haz clic en el botón Settings (Ajustes) y cambia a la pestaña General.

General tab showing the URL of the form page

El segundo enfoque consiste en incrustar el formulario dentro de una publicación o una página. Este enfoque es más flexible porque te permite mostrar texto o imágenes adicionales además del formulario.

Para incrustar un formulario de FormCraft, necesitarás su shortcode. Para descubrir cuál es, dirígete a Settings > Embed > Shortcode.

Cada formulario que crees con FormCraft tendrá un shortcode propio, único y fácil de memorizar.

En este punto, puedes crear una nueva entrada y escribir el shortcode para incrustar el formulario. Esta es una entrada de muestra que contiene un formulario de FormCraft:

4. Gestión de envíos de formularios

Después de que un usuario haya cumplimentado tu formulario, él o ella, por supuesto, va a enviarlo. Hay dos maneras diferentes de recibir el formulario rellenado. La primera forma es recibirlo como un correo electrónico desde tu servidor de WordPress. No implica programación y es ideal para gestionar una pequeña cantidad de envíos de formularios.

Para recibir un formulario enviado como correo electrónico, ve a Settings > Email > Email settings.

FormCraft puede enviar correos electrónicos usando tu configuración de correo predeterminada de WordPress o usando una configuración SMTP personalizada. Por lo general, la configuración predeterminada es suficiente. Así que cambia a la pestaña WP Mail y rellena los campos Sender Name (nombre del remitente) y Sender Email (correo electrónico del remitente) de acuerdo con tus preferencias. Como habrás adivinado, la dirección de correo electrónico que proporciones aquí será aquella en la que recibirás todos los envíos del formulario.

A continuación, expande la sección Email Notifications (notificaciones por correo electrónico). Aquí, debes proporcionar la dirección de correo electrónico a la que se deben enviar todos los formularios cumplimentados. No dudes en utilizar la misma dirección de correo electrónico que indicaste anteriormente.

Deja el resto de la configuración sin cambios y pulsa el botón Save.

El primer controlador de envío de formularios está listo. A partir de ahora, cada vez que un usuario envíe su formulario, lo recibirás como un correo electrónico.

Sin embargo, si crees que vas a recibir miles de envíos de formularios, seguir un enfoque más programático sería mejor idea. FormCraft puede enviar los datos enviados a través del formulario a cualquier URL personalizada que especifiques. Si deseas seguir este enfoque, dirígete a Settings > General y escribe tu dirección URL personalizada. Además, si deseas recibir el formulario enviado como un documento JSON, activa la opción POST (JSON).

La lógica que utilices para controlar el envío del formulario en la dirección URL personalizada depende de ti. El siguiente código de ejemplo muestra cómo guardar cada envío como un archivo con un nombre único en el sistema de archivos del servidor:

1	<?php
2	$file_name = 'wp-content/submissions/' . md5(uniqid(rand(), true));
3	file_put_contents($file_name, file_get_contents('php://input'));

Con el anterior código, cada envío de formulario se guardará en un archivo cuyo contenido se verá así:

{
    "": "1",
    "Describe the Issue": "This is awesome!",
    "Email": "alice@example.com",
    "Entry ID": 4,
    "Full Name": "Alice K.",
    "Reason for Contact": "Feedback",
    "Text Field": ""
}

5. Creación de un formulario personalizado

Si crees que ninguna de las plantillas integradas cubre tus necesidades, puedes avanzar y crear un nuevo formulario desde cero. Para presentar un ejemplo realista, ahora vamos a crear un formulario que permita a los usuarios enviar reseñas de películas.

Comienza dirigiéndote al panel de FormCraft y vuelve a presionar el botón New Form (nuevo formulario).

Esta vez, elige la opción Blank (en blanco), asigna un nombre al nuevo formulario y presiona el botón Create Form (crear formulario).

Ahora verás un lienzo en blanco sin campos de formulario. Por defecto, su ancho se establece en 420 px. Eres libre de cambiarlo a un valor en porcentaje si no deseas que tenga un ancho fijo.

A continuación, presiona el botón Add field (añadir campo) para añadir tu primer campo de formulario.

Como puedes ver, FormCraft ofrece más de 15 tipos diferentes de campos de formulario entre los que puedes elegir.

Para añadir una cabecera al formulario, haz clic en el campo Heading (encabezado). Una vez añadido el encabezado, haz clic en él para modificar sus propiedades.

En el cuadro de diálogo que aparece, puedes cambiar el texto que muestra el campo, ajustar su relleno, cambiar su fuente e incluso aplicar un color de fondo.

A continuación, para aceptar el nombre de la película, haz clic en el botón Add field (añadir campo) y selecciona la opción One line input (campo de entrada de una línea).

Haz clic en el campo recién añadido para abrir su cuadro de diálogo de propiedades. Aquí, dá asignarle una etiqueta y subetiqueta apropiada al campo. Si lo deseas, puedes hacer clic en la propiedad Icon (icono) para mostrar un icono junto al campo.

Para asegurarte de que los usuarios no dejan el campo vacío, comprueba la propiedad Required Field (campo obligatorio). Además, dado que los títulos de película pueden contener espacios, comprueba el campo Alllow Spaces (permitir espacios).

Mediante las propiedades Min Chars y Max Chars, caracteres mínimos y máximos, puedes controlar la longitud del texto que escribe el usuario.

Creating and configuring a one line input field

Haz clic en cualquier lugar fuera del cuadro de diálogo propiedades para cerrarlo. A continuación, selecciona Add Field > Survey > Star rating. Como su nombre indica, este campo permitirá a los usuarios dar a la película una calificación de estrellas.

Del mismo modo, para permitir a los usuarios escribir sus opiniones sobre la película, añade un Textarea (área de texto) al formulario.

Por último, selecciona Add field > Submit para añadir un botón de envío al formulario. Si deseas que el botón sea ancho, marca la opción Wide Button (botón ancho).

En este punto, el formulario personalizado está listo. Pulsa el botón Save para guardarlo.

Para echarle un vistazo, puedes visitar directamente la página dedicada del formulario, cuya dirección URL puedes determinar yendo a Settings > General.

Este es el aspecto del formulario:

Conclusión

En este tutorial, aprendiste a usar el plugin FormCraft WordPress para crear formularios tanto personalizados como basados en plantillas para tu sitio de WordPress. Con un poco de creatividad, ahora podrás crear rápidamente formularios que realicen tareas esenciales como recopilar direcciones de correo electrónico, realizar encuestas o cuestionarios, y aceptar reservas.

FormCraft viene con seis meses de soporte gratuito por parte de su autor. Si tienes cualquier problema al usarlo, utiliza su página de comentarios en CodeCanyon para obtener ayuda.

Si quieres aprender más sobre los plugins de formularios, echa un vistazo a algunos de estos otros artículos sobre plugins de formulario para WordPress aquí en Envato Tuts+.