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 plugin 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.
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
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.
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:
- 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 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.
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 end 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.
Tengo mi correo corporativo como info@nombrecompany.com como hago para configurarlo en la version gratuita de wpforms con elementor?
Hola Juanma, sabes como puedo meter una opción en el formulario para que el que lo cubra pueda adjuntar un archivo, tengo la versión gratuita. Muchas gracias
Una pregunta en la version gratuita donde veo la informacion del formulario? o debo pagar para verla
Hola Tony! Efectivamente, la versión gratuita NO almacena los datos de los formularios enviados en la base de datos, sólo se envían por correo electrónico. Para tener esa opción, debes pasar a una versión de pago. Saludos!
Hola hola!
Tengo el formulario en inglés, pero cuando no pones un campo obligatorio, te sale un mensaje de «*este campo es obligatorio». He buscado la manera de cambiar este texto en español en inglés, pero no he sido capaz. Me mirado tutoriales, incluso mirando código HTML, y pienso que tiene que ser más fácil que eso. Sabéis cómo puedo modificarlo?
Muchas gracias
Hola! Muchas gracias por el tutorial. Mi consulta es ? en que lugar de la raiz se guardan los addon? uso version pro pero necesito borrar algunos que no uso por espacio.
quiero ingresar por FTP y eliminar aquellos que no uso pero no logro encontrarlos dentro de mi carpeta,
gracias!
Juanma hola, gracias por tu contenido 🙂 Utilizo el plug en su versión gratuita para ver si funcionaba bien y adquirirlo. Me han llegado solicitudes al formulario de clientes y ahora, aunque actualice a la versión de pago, ¿he perdido esos leads? Con la versión gratuita no tengo acceso a los datos y me informan en un mensaje de que actualice a pro para ver los datos futuros de solicitudes de clientes. Un abrazo y gracias por tu ayuda.
Hola María!
Efectivamente, los datos que ya hayan enviado antes, con la versión gratuita, te habrán llegado únicamente al email que has puesto al configurar el formulario, pero NO se quedan almacenados en la base de datos y, por lo tanto, no puedes recuperarlos.
Un saludo!
hola… En el apartado fecha como puedo cambiar el calendario a español y el primer día de la semana sea lunes. gracia
Hola Jose Carlos.
Wpforms toma estos datos directamente de la configuración actual de tu WordPress, por lo que deberás cambiarlo desde tu panel de administración > Ajustes > Generales.
Un saludo!
hola juanma… en ajustes generales de wordpress.. esta en español y el día de la semana…
Buenos días Juanma,
Una consulta: cómo se llama la carpeta del directorio de wordpress en donde se almacenan los archivos que se puedan enviar a través del formulario? Tengo q borrar algunos ya que tengo prácticamente lleno el disco. Uso la versión pro.
Muchas gracias y un saludo
Hola
Tengo una pregunta. Porqué mi formulario de contacto me llega al correo de administración de WP y el de suscripción a mi blogue al otro que cree vinculado a mi dominio. Quisiera que todos me llegaran a este segundo.
Puedes ayudarme?
Gracias
Hola Diana!
Puedes personalizar el email en el que recibes las notificaciones de WPforms desde el apartado de ajustes.
Ajustes > Notificaciones > Enviar a la dirección de email
Ahí borras la etiqueta que hay y escribes la dirección en la que quieres recibirlo.
Un saludo!
Buenos días.
Las notificaciones que llegan a mi correo no traen los acentos , es decir: si un usuario me escribe Panamá , en la notificación a mi correo llega Panam&*.
Como podría solucionar eso ?
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.
Cual es valor del plan en pesos Colombianos. Ya que la pagina no me muestra la moneda de compra. Gracias
Hola Leonardo!
Aunque el cambio exacto dependerá del banco emisor de tu tarjeta o de PayPal u otra pasarela que utilices, puedes conocer una aproximación utilizando cualquier conversor de monedas online.
Un saludo!
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
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.
Lo he instalado con el tema zerif lite pero necesito que los campos estén en francés. ¿Sabrías indicarme como hacerlo? Gracias
Hola Carlos! En este caso lo único que tendrías que hacer es cambiar las etiquetas de los campos.
Un saludo!
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 CSS no quiero liarme a cambiar tamaños de fuentes, etc… tal vez ponerle mas separación entre campos pueda ser más sencillo.
no admite la letra ñ. como puedo solucionarlo
Hola Domingo! El plugin 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.
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!
Hola Angélica!
El formulario lo puedes insertar mediante el shortcode o directamente como un bloque del editor de WordPress llamado WPForms.
Un saludo!
Hola Buenos dias a donde se edita el correo al cual quiero que lleguen los mensajes
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
Gracias por el post, lo que no se como cambiar es el correo electrónico de admin que viene por defecto?
cómo envío los datos del formulario a más de 1 correo electrónico?
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!
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!
Buenas. Hice eso Mismo, pero no me llegan los mails a la casilla de correo señalada . Por qué será esto ?
hola, hemos seguido tu tutorial pero no conseguimos que los correos nos lleguen a la dirección establecida, no sabemos qué hacemos mal.
Gracias
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 plugin para ver si con eso se soluciona tu incidencia: Easy WP SMTP
Un saludo!
Hola, queria saber como puedo modificar el tamaño de fuente o color de la misma en el formulario. Gracias!
Hola Ignacio!
En principio este plugin 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 CSS y modificar el style…
Un saludo y gracias por pasarte por mi blog.
Hola ignacio!
Eso tendrías que hacerlo a través de CSS, creando una clase personalizada y asignándola en la pantalla de ajustes generales.
Saludos.
Un tutorial Genial! muchas Gracias!
Gracias a ti por pasarte por mi blog, Gerardo! Me alegro que te haya resultado de interés. 1 abrazo!