Lección 04
Formularios en WordPress
- Actualizado: julio/2020
- Versión: 5.5.x
- Nivel: Medio
- No hay comentarios
Los formularios es otro de los elementos importantes que componen un sitio web. Su función principal es hacer que los usuarios entren en contacto ya sea para solicitar información, comprar productos o registrarse entre muchas de las funciones que estos ofrecen.
Existen cientos de formas de crear formularios en WordPress: ya sea manualmente mediante HTML o mediante plugins gratuitos y de pago que ofrecen esta función.
1. WPForms: crea formularios mediante bloques
WPForms es uno de los plugins para formularios en WordPress más utilizados. Con +3 millones de instalaciones se ha convertido en uno de los favoritos de los usuarios.
Es compatible con casi el 100% de temas del mercado incluyendo Astra: el tema que estamos utilizando en el desarrollo de este curso de WordPress.
En ediciones anteriores de este curso de WordPress, hablamos de Contact Form 7: uno de los mejores plugins para formularios en WordPress.
A partir de ahora vamos a trabajar con WPForms ya que este plugin ofrece una interfaz de diseño, mediante bloques de arrastrar y soltar, mucho más sencillo de utilizar.
1.1 Instalación de WPForms
El plugin WPForms es un plugin FREEMIUM (es gratis = FREE con opciones básicas de diseño y ofrece una versión PREMIUM de pago). La versión gratis (Lite) se puede instalar desde el repositorio de plugins de WordPress.
Para instalar el plugin:
- Dirígete al apartado Plugins >> Añadir nuevo.
- En el campo de búsqueda escribe WPForms.
- Haz clic en Instalar ahora y seguidamente en Activar.
1.2 Creación de un formulario en WordPress con WPForms
Una vez instalemos y activemos el plugin, el sistema nos enviará a una página de bienvenida, con varias opciones, para empezar a crear nuestro primer formulario. Puedes comenzar a crear tu primer formulario haciendo clic en Crea tu primer formulario.
También puedes comenzar a crear formularios desde el apartado WPForms >> Añadir nuevo.
I. Configuración
En esta primera ventana vamos a darle un nombre a nuestro formulario y a seleccionar una de las plantillas que viene por defecto con el plugin. Por ejemplo: Formulario en blanco.
II. Campos
En esta ventana es donde vamos a confeccionar nuestro formulario de contacto. En la versión Lite, solo se incluyen los Campos estándar. Los campos elegantes y de pago solo están disponibles en la versión PRO de WPForms.
Como puedes apreciar en la imagen, los campos estándar incluyen campos básicos para la creación de un formulario. Para este ejemplo, vamos a crear un formulario de contacto simple.
Lo que tenemos que hacer es seleccionar el campo que queremos y, sin soltar el ratón, lo arrastramos a la derecha de la pantalla.
- Nombre: este campo, por defecto, incluye la opción para indicar el nombre y apellidos.
- Correo electrónico: este campo está configurado para indicar correos electrónicos e incluye un filtro de seguridad si el correo no se escribe en el formato correcto.
- Texto del párrafo: este campo es lo que se conoce comúnmente como Área de texto y es para escribir párrafos más largos.
III. Ajustes
En esta pestaña vamos a configurar los ajustes generales y de envío del formulario.
-
General
Se encuentran las opciones generales como nombre y descripción del formularios, clases CSS y forma de envío.
-
Avisos
Aquí es donde indicamos los datos de envío del formulario. Los campos son muy intuitivos por lo que no tendrás problemas configurando estas opciones.
-
Confirmaciones
Este campo es muy interesante ya que podemos configurar lo que va a hacer el formulario después de que alguien lo envíe.
- Mensaje: podemos indicar un mensaje de agradecimiento que aparecerá abajo del formulario una vez que se envíe.
- Mostrar la página: con esta opción el usuario será redirigido a la página que le indiquemos. Para usar esta opción es necesario tener la página creada.
- Ir a la URL (redireccionar): con esta opción el usuario será redirigido al sitio que le indiquemos (por ejemplo, otro sitio web).
Estas últimas 2 opciones son muy útiles para crear campañas de marketing. Una vez que el usuario envíe el formulario, lo podemos redirigir a una página donde ofrezcamos un servicio o producto que queremos promocionar o simplemente a una página de gracias personalizada.
Para finalizar haz clic en Guardar y luego en la X para salir.
1.3 Puesta en marcha de WPForms
I. Insertar WPForms en Gutenberg
Para añadir el formulario que hemos creado en una página usando Gutenberg, dirígete al apartado Páginas y accede a la página donde quieres añadir el formulario.
Haz clic en el Añadir un bloque y, en el campo Buscar un bloque, escribe WPForms.
WPForms ha creado un bloque del tipo widget que se integra con Gutenberg. Haz clic en el bloque para añadirlo a la página.
Selecciona el formulario que quieras añadir del bloque WPForms y haz clic en Actualizar.
Abre la página en el navegador para visualizar los cambios.
Como puedes apreciar en la imagen, el formulario no ha quedado muy simétrico. Los campos Nombre y Correo electrónico no tienen la misma longitud que el campo Texto del párrafo.
Para solucionarlo haremos lo siguiente:
- Dirígete al apartado WPForms y accede al formulario que quieres modificar.
- Selecciona el campo Nombre. Verás como se activa la pestaña Opciones de campo.
- En la subpestaña Opciones avanzadas, selecciona Grande en Tamaño del campo.
- Repite el mismo procedimiento para el campo Correo electrónico.
- El campo Texto del párrafo no tiene sentido que se llame así. Podemos asignar otro nombre como por ejemplo Mensaje, Deja tu mensaje, ¿En qué podemos ayudarte? o cualquier cosa que tenga sentido para el usuario. Modifica el nombre en el campo Etiqueta.
- Haz clic en Guardar.
Si actualizamos la página donde hemos añadido el formulario, veremos que ahora los campos del formulario tienen la misma longitud y estéticamente se ve mucho mejor.
II. Insertar WPForms en Elementor
Si has seguido todo el curso desde el inicio, sabrás que estamos trabajando con el editor de contenidos Elementor.
Si aun no conoces Elementor, en la lección instalación y configuración de Elementor, puedes encontrar una reseña de este fantástico editor de contenidos para WordPress.
Veamos cómo sería el procedimiento para añadir un formulario de contacto en Elementor.
- Dirígete al apartado WPForms. En el listado de formularios verás una columna llamada Shortcode. Copia el valor del shortcode del formulario ya que lo vamos a necesitar en Elementor.
- Dirígete al apartado Páginas y accede a la página donde quieres añadir el formulario.
- Haz clic en Editar con Elementor.
- En la pestaña General, busca el widget Shortcode. Selecciónalo y arrástralo al cuerpo del contenido.
- Pega el shortcode del formulario de contacto en el campo Introduce tu shortcode.
- Haz clic en APLICAR.
- Haz clic en Publicar o Actualizar, según sea el caso.
Abre la página en el navegador para visualizar los cambios.
Anuncio publicitario
2. Filtrar el SPAM con WPForms
Los formularios son uno de los principales focos de SPAM en Internet. Existen robots cada vez más inteligentes dedicados a rellenar formularios automáticamente por donde quiera que pasan.
Para luchar contra estos intrusos, se han creado y perfeccionado sistemas anti SPAM como reCAPTCHA que verifican si es una persona o un robot el que envía un formulario.
reCAPTCHA es un servicio gratuito que ofrece Google para combatir con el SPAM en Internet. Solo hace falta tener una cuenta en Google y listo.
Lo primero que tenemos que hacer es registrar un nuevo sitio web en Google reCAPTCHA.
- Dirígete a https://www.google.com/recaptcha/intro/v3.html y haz clic en Admin console.
- Inicia sesión en tu cuenta de Google.
- Haz clic en el icono para registrar un sitio web.
-
Etiqueta
Indica un nombre al reCAPTCHA que vas a crear. Intenta que sea descriptivo según el uso que le vas a dar. -
Tipo de reCAPTCHA
WPForms solo recomienda el reCAPTCHA v3 para uso avanzado. En este caso vamos a seleccionar reCAPTCHA v2 Invisible. Si tienes dudas, puedes encontrar más información en este enlace (en inglés). -
Dominios
Indica el dominio donde vas a utilizar el servicio.
- Acepta las condiciones del servicio y haz clic en Enviar.
El servicio generará 2 claves: clave de sitio web y clave secreta. Cópialas en un lugar seguro y regresa a WordPress.
- Dirígete al apartado WPForms >> Ajustes >> reCAPTCHA.
- Selecciona el tipo de reCAPTCHA, ingresa las claves y haz clic en Guardar los ajustes.
Últimos pasos:
- Dirígete al apartado WPForms y accede nuevamente al formulario.
- En la pestaña Ajustes, marca la casilla Activar Google reCAPTCHA v2 invisible.
- Haz clic en Guardar.
Y eso es todo. Como podrás observar, el formulario no sufre ninguna alteración ya que el servicio reCAPTCHA v2 invisible no añade el típico cuadro de verificación que estamos acostumbrados a ver.
En su lugar, se mostrará el icono de reCAPTCHA en el lateral derecho del sitio web indicando que el formulario de contacto está protegido por este sistema anti SPAM.
Anuncio publicitario
3. Conclusión
Básicamente esta sería la forma más sencilla de crear un formulario en WordPress con el plugin WPForms.
Aunque es un plugin sencillo de utilizar, ofrece muchas opciones de configuración que te ayudarán a diseñar cualquier tipo de formulario para tu sitio web.
¿Te ha gustado?
Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.
(11 votos, promedio: 4.9 de 5)
Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.
Suscríbete y aprende WordPress desde cero.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Comparte tu experiencia
Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.