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 +5 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.

    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.

    Elementor Page Builder

    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 entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (13 votos, promedio: 4.9 de 5)

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

    驴Me invitas un caf茅?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo ser谩 pero, mantenerlo, requiere de muchos caf茅s y muuuuchas horas . Si te gusta mi trabajo y te est谩 ayudando, considera invitarme un caf茅 para apoyarme y apoyar este proyecto. 隆Te invito 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
    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    Aroa

    En primer lugar muchas gracias por el curso de wordpress estoy empezando de cero para hacer mi sitio y me esta ayudando mucho porque no tenia ni idea de esto.

    Me gustar铆a pedirte un favor por si me puedes ayudar. Estoy intentando crear un formulario con respuestas preconfiguradas en funci贸n de respuestas anteriores y necesito guardar las respuestas para luego generar un anuncio. Como una p谩gina de contactos que te hacen un formulario y en funci贸n de una respuesta condicionas la siguiente y luego guardas los datos para crear el anuncio de la persona no se si me explico. Sabes c贸mo podr铆a hacer algo as铆, si existe algun plugging o algo que pueda usar?

    Mil gracias de nuevo

    Gian Oliveira

    Hola Aroa, existen muchos plugins para formularios que te podr铆an ayudar con lo que necesitas. Uno de ellos es Gravity Forms. Es un plugin de pago pero vale la pena la inversi贸n. Plugins gratis para formularios que hagan lo que buscas, creo que no los vas a encontrar. Un saludo!

    2
    0
    驴Dejas un comentario? Gracias!x
    ()
    x
    Search
    Generic filters

    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@cursowordpress.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.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podr谩s ejercer tus derechos de acceso, rectificaci贸n, limitaci贸n y suprimir los datos en legal@cursowordpress.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.