1. envato-tuts+
  2. Home
  3. Web Design
  4. HTML/CSS
  5. HTML

Cómo crear un formulario con el complemento Quform de WordPress

Scroll to top
Daniel Strongin
• 9 min read
Español
HTML/CSS HTML WordPress Plugin Development

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Los formularios son esenciales para cualquier sitio web, ya que proporcionan a tus clientes una manera eficiente de comunicarse contigo. Ya sea que desees recibir retroalimentación, completar un pedido o recibir una solicitud de los visitantes de tu sitio web, los formularios te permiten recopilar toda esta información de manera efectiva.

Muchos de los formularios de WordPress que se encuentran en el mercado hoy en día son bastante complejos y puede ser difícil para el usuario integrarlos en su sitio. No solo son demasiado complejos, sino que a menudo requieren actualizaciones costosas para desbloquear todas las funciones necesarias. Afortunadamente, existe un generador de formularios de WordPress que aborda todos estos problemas.

Quform, el generador de formularios simple y fácil de usar, es una herramienta de creación de formularios increíblemente poderosa para tu sitio web de WordPress que cuenta con 19 elementos de formulario y una cantidad ilimitada de formularios para cada sitio web.

Quform puede crear rápidamente cualquier formulario que tu mente pueda concebir y estilizar dichos formularios con temas fáciles de adaptar. En este artículo, te mostraré lo fácil que es crear un formulario rico en funciones con Quform.

Lo que estaremos construyendo

El formulario que estaremos construyendo en este tutorial será para un sitio web de tipo blog. El propósito del formulario será recopilar envíos de tipo blog de los visitantes del sitio web, de manera que podamos revisar todos los envíos de forma organizada. El formulario contendrá una variedad de campos para que el usuario los llene y entregue datos como su nombre, edad, dirección de correo electrónico, una explicación de por qué su entrada de blog debería estar en nuestro sitio web, y un área para cargar su entrada de blog.

Quform FormQuform FormQuform Form

Decide qué tipo de formulario crear

Antes de que puedas comenzar a crear un formulario para tu sitio web, necesitarás saber sobre el formulario específico que estés creando y lo que debe incluirse en él. El formulario que desees crear dependerá de tus necesidades específicas.

En primer lugar, analiza qué tipo de información quieres recopilar de tu audiencia y luego escribe cada dato específico que desees recopilar. Esta será tu hoja de ruta para el formulario.

En este ejemplo, voy a crear un formulario que recopile artículos de mi audiencia que serán publicados en mi blog. En este formulario de recopilación de artículos, me gustaría obtener detalles importantes sobre la persona que envió dicho artículo, pedirle que explique por qué piensa que el artículo sería adecuado para mi blog, y tener una sección en la que la persona pueda cargar el artículo en sí.

Creando un formulario y agregando elementos

Para crear un formulario, dirígete al panel de Quform haciendo clic en dashboard (panel) dentro de Q Forms en la barra lateral del lado izquierdo de tu panel de WordPress. Luego, dentro de la sección Forms (Formularios), haz clic en Add New (Agregar nuevo). Asigna un nombre a tu nuevo formulario y haz clic en Add Form (Agregar formulario). Luego serás dirigido al editor de Quform, en donde puedes crear el formulario en sí.

Como hemos mencionado, nos gustaría recopilar tres datos del usuario que envió el artículo. El primer dato es quién es y cómo podemos ponernos en contacto con él. Nos gustaría incluir campos para recopilar su nombre, dirección de correo electrónico y edad.

Con el fin de agregar un campo para que el usuario inserte su nombre, vamos a hacer clic en el icono de persona. Este agregará un campo para que el usuario escriba su nombre y apellido. En el lado izquierdo del editor, verás que se ha agregado un nuevo bloque con el título "Name" ("Nombre"). En el lado derecho del editor puedes ver la apariencia del formulario real. Para agregar el campo de dirección de correo electrónico, haz clic en el icono de correo y el campo de dirección de correo será agregado a tu formulario debajo de los campos de nombre y apellido.

Adding Email Field Adding Email Field Adding Email Field

A continuación, vamos a agregar un campo de texto para que el usuario escriba su edad. Haz clic en el icono de texto en la parte superior del editor, y aparecerá un campo de texto etiquetado "Untitled" ("Sin título"). Para cambiar este título, haz clic en Untitled (Sin título) en el editor de bloques y escribe "age" ("edad").

El siguiente dato que queremos recopilar es una explicación de por qué la persona piensa que el artículo sería adecuado para el blog. Me gustaría tener esta sección en una página separada de los campos de nombre, dirección de correo electrónico y edad. Para hacer esto, podemos hacer clic en el signo + en la parte superior del editor, y una nueva página será creada en el formulario.

Para recopilar una explicación del usuario, agregaremos un área de texto haciendo clic en el icono de alineación a la izquierda en la parte superior del editor. Luego haz clic en Untitled (Sin título) en el área de texto dentro del editor de bloques y escribe "Por favor explica por qué crees que tu artículo sería adecuado para este blog". Esto colocará las instrucciones de lo que el usuario debe escribir en el área de texto del formulario.

Finalmente, necesitamos una sección en la que el usuario pueda cargar su artículo. Nuevamente, me gustará que esta sección estuviera en una página separada, así que haz clic en el signo + de nuevo en la parte superior del editor. Para agregar una opción de carga, haz clic en el icono de descarga en la parte superior del editor y escribe "Carga tu artículo aquí" en el editor del bloque de carga.

También habrás notado que se agregó un bloque de envío al editor de bloques y a la vista previa del formulario cuando creaste tus nuevas páginas. Este permite al usuario enviar el formulario y regresar a las páginas anteriores del mismo. Así es exactamente como queremos que funcione el formulario, por lo que no vamos a hacer ningún cambio.

Siguiendo los pasos anteriores, habrás creado con éxito tu primer formulario en Quform. Para ver el proceso de creación de formularios en acción, por favor revisa el siguiente video:

Please accept preferences cookies to load this content.

Agregando Quform a tu sitio web

Quform hace uso de los códigos abreviados de WordPress para agregar formularios a tu sitio. Antes de que puedas agregar tu formulario a cualquier página o entrada de tu sitio web, necesitarás copiar el código abreviado en tu portapapeles. El código abreviado de Quform se encuentra en el centro de la parte superior del editor de Quform.

Una vez que hayas terminado de editar tu formulario, copia el código abreviado y dirígete a tu entrada o a tu página. En el área de texto de tu nueva entrada o página, introduce este código abreviado, haz clic en Save Draft (Guardar borrador) y luego haz clic en Preview (Vista previa). Ahora puedes ver que tu formulario ha sido agregado a tu sitio web y estás listo para publicar esta página ¡y comenzar a recopilar artículos para tu blog! Consulta el video a continuación para ver de qué manera puedes agregar el formulario a tus páginas y entradas.

Please accept preferences cookies to load this content.

Aprovechando Quform al máximo

La cantidad de funciones que tienes para mostrar en tu formulario hace que Quform sea increíblemente versátil. Este artículo solo trata sobre cómo construir un formulario de envío para tu blog, pero hay muchos otros tipos de formularios que puedes crear. Estos son algunos tipos de formularios populares que puedes crear:

Formulario de contacto

Todo sitio web debería tener un formulario de contacto, para que cualquier visitante del sitio web pueda ponerse en contacto contigo. Quform te permite crear este formulario de contacto simplemente creando un formulario que contiene campos de entrada de texto y un botón de envío.

Encuesta

Las encuestas son una forma muy útil de evaluar cómo están funcionando ciertos aspectos de tu negocio o tu negocio en general. Puedes crear una encuesta con todos los campos de texto o preguntas de opción múltiple que necesites, y agregar esta encuesta a una de tus páginas web. Desde ahí, puedes enviar un correo electrónico a tu lista de correo y publicar un enlace a la encuesta en redes sociales para que tu audiencia la responda. Lo mejor es ofrecer algún tipo de descarga gratuita o incentivo por terminar la encuesta con el fin de alentar a tu audiencia a contestarla.

Formulario de solicitud de empleo

Si tu negocio está contratando, entonces necesitas tener una manera de recopilar solicitudes de empleo en tu sitio web. Todos los diversos campos de entrada y la función de carga te permiten crear un formulario de solicitud de empleo completo para tu negocio. Puedes hacer cualquier pregunta que desees a tus empleados potenciales y pedirles que carguen sus currículos.

Formulario de retroalimentación

Si bien esto es similar a una encuesta, tu audiencia lo interpreta de manera diferente. Un formulario de retroalimentación básica hará una o dos preguntas abiertas sobre un producto o servicio que proporcionas y permitirá que tus usuarios expliquen lo que piensan. Esto permite a tus clientes que den su opinión sobre un producto o servicio específico con sus propias palabras. Este formulario sería perfecto para enviarlo por correo electrónico a cualquier cliente una semana o dos después de que haya realizado una compra.

Conclusión

Los formularios son una herramienta necesaria para que recopiles información de tu audiencia en tu sitio web de WordPress. Muchos de los formularios actuales en el mercado pueden ser bastante costosos y demasiado complejos.

Con Quform puedes crear rápidamente cualquier tipo de formulario que necesites, como se muestra en este artículo, a un precio asequible. Para descargar este complemento de formularios, puedes dirigirte a CodeCanyon y comprar el complemento Quform o echar un vistazo a su vista previa en vivo.

HTML/CSS HTML WordPress Plugin Development
Daniel Strongin By
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.