Ⓦ Tutorial WPForms en Español

Aprende a crear fantásticos sitios web
con nuestros Cursos de WordPress en Vídeo
Ver todos los cursos

Actualizado el

Muchas veces, algo tan sencillo como instalar un formulario de contacto en tu blog, puede convertirse en una tarea un tanto pesada si no sabes algo de programación o si no tienes un pluginPlugin Complemento que se añade a la instalación de WordPress para dotarla de más funciones. Existe un repositorio oficial con miles de completos disponibles para instalar. que haga el trabajo por ti de forma sencilla. Hoy te traigo un el Tutorial WPForms en Español

Los Formularios de Contacto

Ya te expliqué en otro de mis artículos cómo insertar un formulario de contacto en tu blog, y lo importante que es que lo tengas instalado, ya que a veces es la única forma de contacto que tendrás con tus lectores.

Seguramente hayas escuchado hablar de Contact Form 7, y de hecho es el más utilizado por  muchos bloggers dado que es muy liviano y fácil de integrar con muchos otros plugins o incluso con algunos themes que ya vienen preparados para insertar los formularios con él de una forma sencilla.

Sin embargo, hoy quiero hablarte de otro que es casi igual de conocido y se llama WPForms. Seguro que aunque no recuerdes su nombre, si que habrás encontrado en muchos sitios su peculiar logotipo: un osito con un formulario en la mano.

Este fantástico plugin, basado en el “Drag & Drop” (arrastrar y soltar), te ofrece diversas posibilidades para instalar un formulario en tu blog: no sólo formularios de contacto, sino también formularios de suscripción a Newsletter, formularios de sugerencias, etc.

Cuenta con más de 90.000 instalaciones activas y tiene una valoración de los usuarios de 4,8/5 estrellas en el repositorio de WordPress, y ahí puedes encontrar la versión gratuita WPForms Lite  con la que he hecho este tutorial.

Crear formularios con WPForms

Lo primero que te encuentras cuando instalas y activas WPForms, es una pantalla de bienvenida donde te invita a utilizar una de sus plantillas para crear un formulario con WordPress.

Traducir WPForms al Español

Antes de comenzar a trabajar con WPForms, recuerda que está disponible en varios idiomas. En el caso de que al instalar el plugin no detecte automáticamente tu idioma y lo continúes viendo en Inglés, deberás instalar LocoTranslate y traducir WPForms al español.

Elige una plantilla

Por defecto, la versión gratuita de WPForms te permite escoger entre una de las plantillas que trae predefinidas o partir de cero, con una pantalla en blanco.

Tengo que avisarte de que el plugin no permite la personalización de colores, fuentes, tamaños… pero sí otras muchas variables.

Las plantillas prediseñadas de WPforms son:

  • Formulario de contacto simple
  • Formulario de suscripción a un boletin
  • Formulario de sugerencias

Si quieres crear un formulario más personalizado tienes la opción de elegir una plantilla en blanco y comenzar a trabajar sobre ella.

La estructura de cualquier plantilla que elijas es la misma:

  • A la izquierda aparecen los botones con los campos que puedes arrastrar y soltar en el lienzo.
  • A la derecha se mostrará el formulario tal cual lo vayas construyendo.

Elegir los campos

Una vez que has elegido la plantlla base de WPForms con la que trabajar, el siguiente paso consiste en elegir los campos que necesites para poder crear tu formulario en WordPress.

Simplemente arrastra y suelta de la parte de la izquierda a la parte de la derecha. Si quieres cambiar la posición de algún campo después de haberlo soltado, simplemente vuelve a arrastrarlo a la posición correcta.

tutorial-wpforms-español
Pantalla de diseño de formulario de WPForms

Los tipos de campo que tienes disponibles en WPForms Lite son:

  • Texto de una sola línea
  • Párrafo de Texto
  • Desplegable
  • Casilla de Verificación
  • Números
  • Nombre
  • Email

Utilizando de forma correcta estos campos puedes conseguir distintos tipos de formulario para insertar en tu blog. Aquí ya la imaginación de cada uno jugará un papel muy importante.

Opciones de campos en WPForms

Cada campo tiene opciones personalizables. Dependiendo del tipo de campo, podrás personalizar unas cosas u otras.

Para ello, bastará con hacer clic sobre el campo que quieras personalizar en la parte de la derecha y realizar los ajustes en la parte de la izquierda.

tutorial-wpforms-español
Personalización de campos en WPForms

En este ejemplo, para modificar el campo “Nombre”, pinchas sobre él en la parte derecha de la pantalla y vas cambiando las opciones en la parte de la izquierda. Este mismo ejemplo es válido para todos los campos que quieras modificar.

Ajustes de un Formulario con WPForms

Una vez añadidos y personalizados los campos al formulario, tienes que hacer una serie de ajustes, en cuanto a confirmaciones, notificaciones, título, etc.

Para acceder a ellos, tienes que hacer clic sobre el tercer icono que hay a la izquierda, debajo del icono de la mascota de WPForms.

Con la versión gratuita, te aparecerá una pantalla como esta, donde puedes configurar los siguientes parámetros:

tutorial-wpforms-español
Pantalla de ajustes de WPForms
  • General. Aquí puedes poner el título de tu formulario y una descripción, personalizar los textos del botón de enviar, e incluso establercer una clase CSSCSS Lenguaje de hojas de estilo utilizado para definir la apariencia visual y el formato de los documentos HTML. En WordPress, se almacena en el archivo style.css si quieres que se aplique al formulario. Desde aquí también puedes decidir si quieres que se active el honeypot para evitar el SPAM.
  • Notificaciones. Desde este apartado estableces la(s) dirección(es) de correo electrónico donde llegarán los avisos de que alguien te envía un formulario así como el texto del asunto y cuerpo que llevará el email. Normalmente se suelen configurar dos notificaciones: una para el administrador de la web y otro como acuse de recibo para el usuario que nos envió el formulario. (Puedes utilizar las etiquetas inteligentes para personalizar más los mensajes)
  • Confirmación. En esta opción personalizarás el texto que le aparecerá en la pantalla al usuario una vez que el formulario ha sido enviado. Normalmente suele ser un agradecimiento. También puedes elegir si prefieres mostrarle una página de tu sitio web o incluso redirigirlo a una web externa.

Insertar un Formulario de WPForms en una página o artículo

Una vez que has creado el formulario y lo tienes completo, debes pinchar en el botón “Guardar” arriba a la derecha de la pantalla y, posteriormente, seleccionar el botón “Incrustar” justo al lado.

Al pinchar aquí se te abrirá una ventana nueva donde WPForms te facilitará un shortcode único que debes copiar y pegar en la página o el artículo donde quieres insertar el formulario.

firmar-contratos-wordpress-wpforms-2

Si por cualquier motivo, se te olvidó copiar y pegar el shortcode, para que no tengas que volver hasta las opciones de los formularios, verás que tienes un bloque nuevo en el editor, llamado del mismo modo «WPForms».

Lo único que debes hacer es insertar este bloque y seleccionar en el desplegable el formulario que quieras incrustar en tu documento.

Editar formularios creados con WPForms

También existe la posibilidad de trabajar con formularios creados anteriormente: modificarlos, duplicarlos, borrarlos… o incluso ver una vista previa del aspecto del formulario.

Para ello, simplemente debes ir hasta el menú de administración lateral del back endBack end Panel de administración de WordPress desde donde se gestiona toda la instalación. Esta parte sólo es visible para los usuarios con rol de Administrador. de WordPress > WPForms > Todos los formularios.

De esta forma te aparecerá un listado completo de formularios creados con WPForms y al pasar el ratón por encima del título del formulario, se te mostrarán debajo las opciones que te acabo de explicar.

Ver registro de envíos con WPForms

Hay ocasiones en que WordPress no envía los emails porque podemos tener algo mal configurado. En ese caso no nos llegarán las notificaciones al email que hemos programado al crear el formulario y no nos enteraremos de que alguien nos lo ha enviado.

Sin embargo, si tienes la versión PRO del plugin, puedes ver el registro de formularios enviados desde WPForms en tu sitio web, desde el menú de administración > WPForms > Entradas.

Además, podrás añadir notas, imprimirlas, exportarlas, reenviarlas, o ver los datos de geolocalización del remitente.

En otro artículo te contaré cómo personalizar las plantillas de envío de emails desde tu WordPress utilizando WPForms o incluso cómo traspasar formularios de un plugin a otro… ¡y cómo utilizar WPForms para firmar contratos online!

Conclusión

Como ves, WPForms es uno de los plugins más completos y utilizados para la creación de formularios, en constante desarrollo y con muy buena aceptación en la comunidad.

Entre otras ventajas, este formulario es totalmente responsive, optimizado para SEO y ultra rápido, por lo que se adapta a cualquier pantalla de dispositivo móvil con una carga casi inmediata.

Además, los formularios cuentan con un sistema antispam que puedes utilizar llamado “Honeypot”. Para ello bastará con marcar la casilla correspondiente en los ajustes del formulario.

Espero que este Tutorial WPForms haya sido de tu interés y, como sé que en la mayoría de los casos vas a preferir verlo en vivo que leer el texto, te invito a que veas el vídeo que he incluido en mi Canal Youtube WordPress Para Novatos, donde te enseño un ejemplo del funcionamiento de este plugin.

También debes saber que si necesitas utilizar los Servicios Premium de WPForms, deberás actualizar la versión y contratar el plan que incluya las opciones que te van a ser ítules.

¿Y tú que plugin usas? ¿Conocías WPForms? ¿Lo has utilizado alguna vez? ¿Qué opinión tienes de él? Espero tus comentarios! Nos leemos la próxima semana.

Juanma

Implementador y Formador especializado en WordPress, Coorganizador del grupo de Meetup WordPress Madrid. Colaborador en el equipo de traducción de WordPress España. Podcaster, YouTuber y fundador del blog WPnovatos.com

25 comentarios

  • Buenas noches, necesitamos un formulario de inscripción de actividades (imaginemos yoga) que se acapaz según la fecha de nacimiento, que aparecieran solamente las opciones según fecha de nacimiento que hemos introducido, vamos que tenga muchos condiciones!!1
    Crees que este sería el adecuado? en caso afirmativo sabrías decirme qué opción de pago coger para no tener ningún problemas con los condiciones?
    Mil gracias, un saludo desde España.

    Responder
  • Cual es valor del plan en pesos Colombianos. Ya que la pagina no me muestra la moneda de compra. Gracias

    Responder
  • Hola Juanma, saludos desde Guatemala. Llegué aquí precisamente porque estoy por relanzar mi sitio web, soy artista. wpform me llego por defecto en un tema que compré, y bueno estoy decidiendo que sistema me conviene usar, para mi email marketing, he usado en el paso aweber y Mailchimp, pero tambien me gusta la idea de Hubspot. Pero no se si wpform funciona como Hubspot, o son diferentes o se complementan. Te agradecería si me puedes dar tu consejo.

    Gracias

    Responder
  • Antes de decidir utilizar WPForms quisiera saber si puede integrarse con ESPOCRM, tiene alguna API PHP disponible, para crear clientes potenciales?.

    Actualmente utilizo contact form 7, y puede integrase a ESPOCRM.

    Responder
  • Lo he instalado con el tema zerif lite pero necesito que los campos estén en francés. ¿Sabrías indicarme como hacerlo? Gracias

    Responder
    • Hola Carlos! En este caso lo único que tendrías que hacer es cambiar las etiquetas de los campos.
      Un saludo!

      Responder
  • Como puedo dejar más separación entre cada campo a rellenar del formulario?
    Lo digo porque los textos de descripción me los hace al mismo tamaño que el resto y como no se demasiado de programación CSSCSS Lenguaje de hojas de estilo utilizado para definir la apariencia visual y el formato de los documentos HTML. En WordPress, se almacena en el archivo style.css no quiero liarme a cambiar tamaños de fuentes, etc… tal vez ponerle mas separación entre campos pueda ser más sencillo.

    Responder
    • Hola Domingo! El pluginPlugin Complemento que se añade a la instalación de WordPress para dotarla de más funciones. Existe un repositorio oficial con miles de completos disponibles para instalar. no está disponible en español, por lo que es lógico que no admita la letra Ñ. De todas formas, te recomiendo que contactes con el desarrollador para que lo tenga en cuenta de cara a una próxima actualización.

      Saludos.

      Responder
  • Hola! El formulario no se muestra en mi página, revise el código y está bien incrustado. Pero no lo muestra en la página.
    Gracias!

    Responder
    • Hola Angélica!
      El formulario lo puedes insertar mediante el shortcode o directamente como un bloque del editor de WordPress llamado WPForms.
      Un saludo!

      Responder
    • Hola Lyli!
      Este dato tienes que introducirlo en la pestaña Ajustes > Notificaciones.
      Por defecto WPForms enviará la notificación al email del administrador. Si quieres modificarlo, borra la etiqueta inteligente e introduce el que desees.
      Saludos

      Responder
      • Hola Beto!
        Esto tienes que hacerlo en la pestaña de Ajustes > Notificaciones.
        Ahí tienes un botón en la parte superior derecha que pone “Añadir”
        Un saludo!

        Responder
    • Hola Roger!
      En este caso lo único que tienes que hacer es borrar la etiqueta inteligente que trae por defecto {email} y escribir manualmente el email al que quieras que envíe las notificaciones.
      Un saludo!

      Responder
  • hola, hemos seguido tu tutorial pero no conseguimos que los correos nos lleguen a la dirección establecida, no sabemos qué hacemos mal.
    Gracias

    Responder
    • Hola Jose Luis!

      En ocasiones, los servidores de nuestro hosting no permiten el envío de correo electrónico utilizando el PHP de WordPress. Se me ocurre que intentes probar a instalar este pluginPlugin Complemento que se añade a la instalación de WordPress para dotarla de más funciones. Existe un repositorio oficial con miles de completos disponibles para instalar. para ver si con eso se soluciona tu incidencia: Easy WP SMTP

      Un saludo!

      Responder
  • Hola, queria saber como puedo modificar el tamaño de fuente o color de la misma en el formulario. Gracias!

    Responder
    • Hola Ignacio!

      En principio este pluginPlugin Complemento que se añade a la instalación de WordPress para dotarla de más funciones. Existe un repositorio oficial con miles de completos disponibles para instalar. está diseñado para coger la configuración de la hoja de estilos de tu theme (style.css), por lo que le asignará las mismas fuentes y los mismos colores con los que tengas configurada tu plantilla o theme.

      ¿Es imposible hacerlo? No, pero es complicado. Tendrías que saber algo de programación CSSCSS Lenguaje de hojas de estilo utilizado para definir la apariencia visual y el formato de los documentos HTML. En WordPress, se almacena en el archivo style.css y modificar el style…

      Un saludo y gracias por pasarte por mi blog.

      Responder
    • Hola ignacio!
      Eso tendrías que hacerlo a través de CSSCSS Lenguaje de hojas de estilo utilizado para definir la apariencia visual y el formato de los documentos HTML. En WordPress, se almacena en el archivo style.css, creando una clase personalizada y asignándola en la pantalla de ajustes generales.
      Saludos.

      Responder
    • Gracias a ti por pasarte por mi blog, Gerardo! Me alegro que te haya resultado de interés. 1 abrazo!

      Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos

El responsable del proceso es Juanma Aranda | Tus datos serán tratados para gestionar y moderar tus comentarios | La legitimación del tratamiento es por consentimiento del interesado | No se transferirá ningún dato a terceros, salvo obligación legal | Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.

 

commodo felis diam Praesent Aliquam ipsum Donec ut mattis consequat. non vulputate, Vuelve al inicio

WordPress en Directo

wplive-logo

Actualidad, entrevistas, comunidad, eventos…

Cada semana emitimos un nuevo programa en abierto a través de nuestro Canal de YouTube.