Lección 04

Formularios en WordPress

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.

Índice del contenido
    Add a header to begin generating the table of contents

    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:

    1. Dirígete al apartado Plugins >> Añadir nuevo.
    2. En el campo de búsqueda escribe WPForms.
    3. 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.

    Creando un formulario en WordPress con WPForms
    Creando un formulario en WordPress con WPForms

    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.

    Creando un formulario en WordPress con WPForms
    Creando un formulario en WordPress con 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.

    Creando un formulario en WordPress con WPForms
    Creando un formulario en WordPress con WPForms
    • 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.
    Adicionalmente, si hacemos clic sobre cualquier campo, se activará la pestaña Opciones de campo donde podemos configurar otras opciones adicionales en cada campo.
    Creando un formulario en WordPress con WPForms
    Creando un formulario en WordPress con WPForms

    III. Ajustes

    En esta pestaña vamos a configurar los ajustes generales y de envío del formulario.

    Ajustes generales en WPForms
    Ajustes generales en WPForms
    Ajustes de avisos en WPForms
    Ajustes de avisos en WPForms
    Ajustes de confirmaciones en WPForms
    Ajustes de confirmaciones en WPForms
    • 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.

    Insertando WPForms en Gutenberg
    Insertando WPForms en Gutenberg

    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.

    Seleccionando el formulario de WPForms en Gutenberg
    Seleccionando el formulario de WPForms en Gutenberg

    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.

    Vista del formulario en un sitio web
    Vista del formulario en un sitio web

    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:

    1. Dirígete al apartado WPForms y accede al formulario que quieres modificar.
    2. Selecciona el campo Nombre. Verás como se activa la pestaña Opciones de campo.
    3. En la subpestaña Opciones avanzadas, selecciona Grande en Tamaño del campo.
    Edición de un formulario en WPForms
    Edición de un formulario en WPForms
    1. Repite el mismo procedimiento para el campo Correo electrónico.
    2. 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.
    3. Haz clic en Guardar.
    Edición de un formulario en WPForms
    Edición de un formulario en WPForms

    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.

    Vista del formulario en un sitio web
    Vista del formulario en un sitio web

    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.

    Curso de WordPress

    Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.

    Veamos cómo sería el procedimiento para añadir un formulario de contacto en Elementor.

    1. 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.
    Shortcode de un formulario en WPForms
    Shortcode de un formulario en WPForms
    1. Dirígete al apartado Páginas y accede a la página donde quieres añadir el formulario.
    2. Haz clic en Editar con Elementor.
    3. En la pestaña General, busca el widget Shortcode. Selecciónalo y arrástralo al cuerpo del contenido.
    4. Pega el shortcode del formulario de contacto en el campo Introduce tu shortcode.
    5. Haz clic en APLICAR.
    Insertando un shortcode en Elementor
    Insertando un shortcode en Elementor
    1. Haz clic en Publicar o Actualizar, según sea el caso.

    Abre la página en el navegador para visualizar los cambios.

    Vista del formulario en un sitio web
    Vista del formulario en un sitio web

    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.

    1. Dirígete a https://www.google.com/recaptcha/intro/v3.html y haz clic en Admin console.
    2. Inicia sesión en tu cuenta de Google.
    3. Haz clic en el icono para registrar un sitio web.
    Registrando un sitio web en Google reCAPTCHA
    Registrando un sitio web en Google reCAPTCHA
    1. 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.

    Claves de Google reCAPTCHA para configurar WPForms
    Claves de Google reCAPTCHA para configurar WPForms
    1. Dirígete al apartado WPForms >> Ajustes >> reCAPTCHA.
    2. Selecciona el tipo de reCAPTCHA, ingresa las claves y haz clic en Guardar los ajustes.
    Configurando Google reCAPTCHA en WPForms
    Configurando Google reCAPTCHA en WPForms

    Últimos pasos:

    1. Dirígete al apartado WPForms y accede nuevamente al formulario.
    2. En la pestaña Ajustes, marca la casilla Activar Google reCAPTCHA v2 invisible.
    3. Haz clic en Guardar.
    Configurando Google reCAPTCHA en WPForms
    Configurando Google reCAPTCHA en WPForms

    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.

    Etiqueta de Google reCAPTCHA en un sitio web
    Etiqueta de Google reCAPTCHA en un sitio web

    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.

    (9 votos, promedio: 4.9 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    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.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.