Cómo crear fácilmente formularios de contacto en WordPress

Publicada en WordPress.

Cuando navegas por cualquier web buscando información o algún producto, más de una vez te habrás quedado con las ganas de saber más o preguntar información adicional. Si quieres evitar que esto ocurra en tu web, asegúrate de que ofreces todas las facilidades para que cualquier visitante pueda contactar contigo en tu web.

¿Por qué necesito un formulario de contacto en mi web?

Ya seas una empresa pequeña o una tienda online o un blog de información, tarde o temprano querrás que tus visitantes puedan ponerse en contacto contigo. La solución más rápida y sencilla que podrías pensar es la de poner en la web un email para que contacten contigo, pero mucho me temo que no es una buena idea: recibirás un montón de spam, cuando recibas un email no sabrás su origen (si vienen porque han visto la dirección en la web o en cualquier otro sitio) y seguramente en el email que recibas te faltará cierta información que te gustaría conocer.

Ejemplo de un formulario de contacto
Ejemplo de un formulario de contacto creado con Nelio Forms.

Los formularios de contacto te permiten que recibas información de forma estructurada y poderla así almacenar correctamente como mejor te interese. Además, tienen muchas otras ventajas, ya que puedes, por ejemplo:

  • Definir formularios distintos en páginas, entradas, widgets.
  • Indicar qué información quieres que rellenen obligatoriamente.
  • Mostrar mensajes de confirmación o error cuando se rellena el formulario.
  • Indicar dónde quieres que te llegue la información del formulario debidamente rellenado.
  • Almacenar los datos de contacto cumpliendo con la RGPD.
  • Conocer el origen de la información recibida.
  • Controlar el spam.
  • Enviar la información a múltiples usuarios.
  • Integrarlos con otras plataformas, etc.

Veamos cómo podemos crear formularios de contacto gratuitos en nuestra web de forma rápida y sencilla. Como bien sabes, WordPress recién instalado no te incluye la opción de crear formularios de contacto personalizados. Si quieres crear formularios personalizados y utilizarlos con las ventajas comentadas anteriormente, necesitarás, o bien instalar un tema que incluya formularios de contacto, o bien, hacer uso de algún plugin. De hecho, existen un montón de plugins a los que recurrir. Uno de los plugins más populares de formularios de contacto, Contact Form 7 es sencillo de utilizar pero no dispone de un editor visual para crear los formularios y debes aprender el código específico de Contact Form 7. La alternativa que ofrecen la mayoría de plugins, como WPForms, Fomidable Form Builder, HubSpot o Ninja Forms, entre otros, es añadir un framework en WordPress con un panel de control desde el que diseñar los formularios de contacto.

En esta entrada te queremos hablar de un plugin de formularios de contacto distinto a los anteriores, Nelio Forms.

El plugin Nelio Forms

El plugin Nelio Forms es un plugin que acabamos de lanzar. Tienes su versión gratuita disponible en el Directorio de plugins de WordPress.

El plugin de Nelio Forms en WordPress.org
El plugin de Nelio Forms en WordPress.org.

¿Por qué hemos sacado al mercado un nuevo plugin de formularios de contacto, si ya hay otros disponibles? Porque llevamos tiempo usando otros plugins para crear formularios y nuestra experiencia no ha sido la que hubiéramos deseado. Nelio Forms es un plugin que, en vez de añadir un framework a tu WordPress para el diseño de los formularios, se integra en el editor de bloques de WordPress con todas las ventajas que ello comporta.

Veamos qué pasos debes seguir para crear fácilmente formularios de contacto con Nelio Forms.

Instala el plugin de Nelio Forms

Nelio Forms se instala como cualquier otro plugin. Desde el escritorio de WordPress, haz clic en «Nuevo Plugin» y en el buscador, escribe «Nelio Forms», selecciónalo para que se instale y una vez instalado asegúrate de que lo has activado.

Instala y activa el plugin Nelio Forms
Instala y activa el plugin Nelio Forms.

Crea tu primer formulario

Una vez instalado y activado, en la barra lateral del menú, encontrarás las opciones de Nelio Forms. Haz clic en «Añadir nuevo».

Añade un nuevo formulario de contacto con Nelio Forms
Añade un nuevo formulario de contacto con Nelio Forms.

Se te abrirá el editor de bloques que tendrá un aspecto muy parecido al editor de entradas y páginas, pero en este caso te muestra la información mínima que debes incluir en cualquier formulario: el nombre del formulario para poderlo identificar, un campo (por defecto te muestra un campo de texto) para rellenar y un botón de envío del formulario.

Crea un nuevo formulario de contacto con Nelio Forms
Creando un nuevo formulario de contacto con Nelio Forms.

Edita el formulario de contacto

Tras añadirle un título para identificar el formulario, a cada campo del formulario deberás añadirle una etiqueta descriptiva pero fíjate que tienes la opción de que dicha etiqueta se muestre o no en el formulario.

Cada campo debe incluir una etiqueta descriptiva
Cada campo debe incluir una etiqueta descriptiva.

En la barra lateral, podrás ver las propiedades del bloque que estás editando. Así, por ejemplo, cuando editas el campo de entrada de texto, aparte de la etiqueta descriptiva y la opción de añadirle un placeholder, verás que tambien puedes indicar si ese campo es obligatorio para que se pueda enviar el formulario y si se quiere mostrar o no la etiqueta descriptiva.

De la misma forma que añades cualquier nuevo bloque en el editor de bloques de WordPress, puedes editar el formulario modificando su diseño y añadiendo los distintos bloques que tienes disponibles.

Bloques disponibles para añadir a un formulario
Bloques disponibles para añadir a un formulario.

Como puedes ver en la imagen anterior, aparte del bloque de tipo párrafo que ya conoces, los formularios los puedes diseñar en columnas y dispones de un conjunto de bloques específicos de formularios de contacto:

  • Un campo de entrada de texto,
  • Un campo de área de texto,
  • Un campo de correo,
  • Un campo de teléfono,
  • Un campo de contraseña,
  • Un campo de casilla de verificación,
  • Un campo de número, y
  • Un campo URL

Para cada uno de ellos, aparte de la etiqueta descriptiva, puedes añadirle un placeholder (una etiqueta de texto colocada dentro del campo) y puedes indicar si es un campo obligatorio de rellenar y si quieres que se muestre la etiqueta descriptiva.

Campos de un formulario de contacto en Nelio Forms
Campos de un formulario de contacto en Nelio Forms.

Además, en el caso de un campo de número, también puedes indicar el rango mínimo y máximo y el número de cada escalón entre el mínimo y el máximo.

Propiedades de un campo de número en Nelio Forms
Propiedades de un campo de número en Nelio Forms.

Y en el caso de una casilla de verificación puedes indicar si este está marcado o no por defecto.

Propiedades de un checkbox en Nelio Forms
Propiedades de un checkbox en Nelio Forms.

Finalmente, puedes editar el botón de enviar como cualquier otro botón, cambiar su estilo, color, borde, ancho, tipografía, dimensiones, añadirle una URL o anclaje de tu web para que se vaya allí tras hacer clic en el botón y añadirle clases de CSS adicionales.

Propiedades del botón de envío de un formulario de contacto
Propiedades del botón de envío de un formulario de contacto.

Como ves, crear un formulario como el que ves en la primera imagen de esta entrada es igual de fácil que escribir una entrada en el editor de bloques.

Edición del formulario de contacto de Nelio Forms
Edición del formulario de contacto de Nelio Forms.

Indica dónde enviar el formulario rellenado

Tras crear el formulario, debes indicar dónde querrás que llegue el formulario una vez rellenado y enviado. Para ello, en las propiedades de la barra lateral derecha del formulario, deberás añadir una «Acción de envío».

Añadir una acción de envío en un formulario de contacto
Añadir una acción de envío en un formulario de contacto.

En la versión gratuita del plugin puedes añadir que la información se envíe por correo. Cuando seleccionas que la notificación se envíe por correo, debes indicar la direcciones de correo de a quién debe enviarse, quien lo envía, la dirección de correo de respuesta, el asunto del correo y qué quieres que incluya el mensaje del correo. Para las direcciones de correo, puedes escribir cualquier dirección válida, seleccionar el campo de correo rellenado en el formulario, o la dirección de correo del administrador del sitio.

Edición de la acción de envío de email en Nelio Forms
Edición de la acción de envío de email en Nelio Forms.

Y en el mensaje del correo puedes escribir el texto que quieras, añadir todos o algunos de los campos incluidos en el formulario, información adicional del formulario (el identificador o el título del mismo), la URL del formulario o la dirección de correo del administrador del sitio.

Campos que puedes añadir en el mensaje del correo enviado desde un formulario de contacto
Campos que puedes añadir en el mensaje del correo enviado desde un formulario de contacto

Una vez añadida la información, ya tienes tu formulario de contacto completo. De forma similar, puedes ir creando tantos formularios de contacto distintos como quieras y todos ellos estarán disponibles para su edición desde la opción «Todos los formularios» del menú de Nelio Forms.

Listado de formularios creados con Nelio Forms
Listado de formularios creados con Nelio Forms.

Añade el formulario a tus páginas y entradas

Una vez creado tu formulario, sólo queda añadirlo donde quieres que se muestre en tu web. Para ello, desde el editor de cualquier página, debes añadir un bloque de tipo «Formulario».

Añadir un bloque de tipo formulario de contacto
Añadir un bloque de tipo formulario de contacto.

Desde la propia página, al añadir un bloque de tipo formulario, tienes la opción de crear directamente un nuevo formulario exactamente de la misma forma comentada anteriormente o, por el contrario, añadir uno de los formulario que hayas creado previamente.

Opciones de añadir un nuevo formulario de Nelio Forms
Opciones de añadir un nuevo formulario de Nelio Forms.

Una vez insertado, una de las grandes ventajas de Nelio Forms, es que puedes modificar el formulario directamente mientras editas la página como cualquier otro bloque. Al modificarlo, verás que en el botón de «Actualizar» te aparece un punto blanco a la izquierda de la palabra (de forma similar a la actualización de plantillas) indicándote si querrás que los cambios que estés realizando en el propio formulario también se guarden.

De esta forma, puedes añadir, editar y visualizar los formularios en tus páginas de la misma forma en que lo haces con cualquier otro bloque de los que tienes disponibles.

Edición de la página de Nelio Forms
Edición de la página de Nelio Forms.

Recibe las solicitudes de contacto de tus visitantes

¡Ya está! Solo nos queda publicar la página o entrada que contiene el formulario creado. Si algún visitante rellena el formulario incorrectamente, se le avisará de que revise bien la información rellenada.

Aviso de errores del formulario rellenado
Aviso de errores del formulario rellenado.

Muy pronto recibirás las notificaciones con la información rellenada por tus visitantes de la forma en que hayas indicado en el formulario.

Ejemplo de un correo recibido desde el formulario de contacto de la página en inglés de Nelio Popups
Ejemplo de un correo recibido desde el formulario de contacto de la página en inglés de Nelio Popups.

De esta forma, cuando recibas un correo de contacto, sabrás de dónde te llega, tendrás toda la información que habrás indicado como requerida y podrás evitar spam.

Conclusión

Ya hemos visto que crear formularios de contacto con Nelio Forms, gracias a su integración con el editor de WordPress, es tan fácil como la creación de cualquier página o entrada.

De momento, la versión gratuita es muy sencilla pero incluye todo aquello que necesitas para crear los formularios de contacto que necesita tu web. Todos los formularios de contacto que encontrarás en esta web están creados con Nelio Forms.

Para la versión premium esperamos disponer de muchas mas funcionalidades que encontrarás descritas en la página de Nelio Forms. Por supuesto, si crees que necesitas alguna funcionalidad adicional y/o estás interesado en la versión premium, te invitamos a que rellenes el formulario de dicha página y nos pondremos en contacto contigo.

No dudes en instalarte y probar el plugin de Nelio Forms (recuerda, ¡es gratis!) y compartir aquí qué impresión te ha causado.

Imagen destacada de Brooke Cagle on Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.