Cómo usar webhooks con formularios de WordPress

¿Quieres integrar tus formularios de WordPress con diferentes aplicaciones y servicios web?

Si necesitas una forma sencilla de enviar datos a una aplicación web directamente desde tu formulario de WordPress, los webhooks son la solución perfecta. Con un formulario de webhook, no necesitas la ayuda de un conector de terceros como Zapier.

En esta publicación, te mostraremos cómo usar webhooks en tus formularios de WordPress para que puedas enviar fácilmente datos en tiempo real a tus aplicaciones y servicios favoritos.

Pero primero, si eres principiante, cubriremos qué son los webhooks y por qué son importantes. Ten en cuenta que el método que usaremos hoy no requiere que tengas ninguna habilidad de codificación.

¿Qué son los Webhooks?

Los webhooks permiten que dos aplicaciones web se comuniquen entre sí. Por ejemplo, si alguien envía un formulario de pedido en tu sitio web, puedes enviar esos datos a tu canal de Slack para informar a tu equipo de producto que se ha realizado un pedido. También puedes hacer esto cuando recibes un nuevo cliente potencial o suscriptor.

En términos técnicos, los webhooks son devoluciones de llamada HTTP definidas por el usuario que se activan por un evento en un sistema de origen y se envían al sistema de destino.

Esto significa que cuando ocurre un evento o disparador en tu sitio web, se envían mensajes automatizados a un servicio conectado. Un disparador puede ser cualquier cosa, como comentarios de blog, compras de productos, registros de usuarios y envíos de formularios.

Si te preguntas por qué deberías usar webhooks, aquí tienes algunos beneficios:

• Transferir información entre dos servicios/aplicaciones automáticamente
• Automatizar tareas y reducir el tiempo de administración
• Reducir el costo de usar servicios conectores como Zapier y Hubspot para procesar datos en aplicaciones.

Los webhooks son increíblemente útiles para desarrolladores y usuarios de WordPress con conocimientos técnicos.

Con eso, comencemos nuestra guía paso a paso sobre cómo crear un formulario de webhook en WordPress.

Creando un formulario de webhook en WordPress [Método fácil]

Hay muchas maneras en que puedes usar webhooks para enviar las sumisiones de tu formulario de WordPress a otras aplicaciones web.

Usaremos WPForms para este tutorial, ya que ofrece un complemento de Webhooks que es fácil de usar para cualquiera, incluidos los principiantes. No se requiere absolutamente nada de codificación.

WPForms es el mejor plugin constructor de formularios para sitios de WordPress. Y lo que necesitas saber es que ofrece toneladas de plantillas prediseñadas y campos de formulario listos para usar que te permiten crear todo tipo de formularios de WordPress. Esto incluye pedidos de productos, registros, reservas de citas, formularios de contacto sencillos y más.

WPForms viene con un constructor de formularios de arrastrar y soltar que hace que personalizar formularios sea pan comido. Tiene toneladas de complementos e integraciones que puedes usar para conectarte a aplicaciones de correo electrónico, pago y marketing.

Con su Complemento de Webhooks, puedes conectar fácilmente tu WordPress con cualquier servicio o aplicación. Solo se necesitan unos pocos clics para habilitar esta funcionalidad.

Además, WPForms te permite usar reglas condicionales para activar una acción de webhook basada en la respuesta del usuario al formulario. Así, solo si se cumple el valor de un campo, se ejecutará el webhook. Esto te da más control sobre qué datos quieres enviar y a qué aplicación.

Puedes conectarte a toneladas de aplicaciones y servicios. Para este tutorial, te mostraremos cómo conectarte a Slack. Pero recuerda, puedes usar los mismos pasos para conectarte a otras aplicaciones y puntos finales.

Paso 1: Crear una nueva aplicación de Slack

Al conectar tu formulario de webhook a Slack, puedes enviar automáticamente mensajes e información desde tu sitio web a tus canales de Slack. Puedes actualizar a los miembros de tu equipo o departamentos cuando una persona envía un formulario, abandona un formulario y más.

Ahora, para enviar datos de WordPress a otro servicio usando webhooks, necesitarás crear un puente entre las dos aplicaciones. Así que para conectarte a Slack, necesitarás crear una aplicación de Slack (el puente).

Si eres nuevo en esto, no te preocupes, es bastante fácil y te guiaremos paso a paso. Primero, deberás abrir la página de la API de Slack y hacer clic en el botón Crear una aplicación.

En la siguiente ventana emergente, puedes elegir cómo quieres crear una aplicación con Slack. Hay dos opciones:

• Desde cero
• Desde un manifiesto de aplicación.

Aquí, vamos a crear una aplicación de Slack desde cero. Suena a mucho trabajo, pero en realidad solo toma unos pocos clics.

Luego, verás la ventana emergente donde puedes agregar el nombre de la aplicación y elegir tu espacio de trabajo de Slack. Una vez que hayas terminado, haz clic en Crear aplicación.

Esto abre la página de Información básica. Aquí, necesitas hacer clic en la opción Webhooks entrantes.

En la siguiente pantalla, habilita la configuración Activar webhooks entrantes. Esto te permite publicar mensajes en Slack desde servicios externos.

Una vez habilitado, verás la sección URLs de webhooks para tu espacio de trabajo en la página.

Ahora, necesitas crear un nuevo webhook para obtener información de tu formulario de WordPress. Por lo tanto, haz clic en el botón Agregar nuevo webhook a tu espacio de trabajo.

A continuación, puedes ver la ventana emergente donde puedes seleccionar un canal de Slack para publicar las presentaciones de tu formulario.

Después de elegir un canal de Slack, haz clic en Permitir.

Ahora, podrás ver la nueva URL del webhook para tu aplicación de Slack.

Todo lo que tienes que hacer ahora es copiar la URL del webhook. La necesitarás unos pasos más adelante.

Paso 2: Instalar y activar WPForms

Una vez que tengas tu URL de webhook, puedes agregarla a tu formulario de WordPress.

Para empezar, regístrate para obtener una cuenta en el sitio web de WPForms.

Existe una versión gratuita del plugin, pero necesitarás la versión premium para acceder a funciones avanzadas de formularios como los webhooks. WPForms viene con una garantía de devolución de dinero 100% libre de riesgos, para que puedas probar el servicio antes de comprometerte.

Después de registrarte, encontrarás el archivo de descarga del plugin y la clave de licencia en la pestaña Descargas.

Ahora, dirígete a tu panel de WordPress e instala el plugin. Si deseas más detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que instales y actives WPForms en tu sitio, deberás ingresar tu clave de licencia para disfrutar de todas tus funciones y complementos premium.

Antes de empezar a crear tu formulario, necesitas instalar el complemento Webhooks.

Para esto, ve a la pestaña WPForms » Addons y encontrarás muchísimos complementos que te ayudarán a extender la funcionalidad de tus formularios de WordPress. Aquí, haz clic en el botón Instalar complemento para el complemento Webhooks.

Ahora, estás listo para crear tu formulario de webhook en WordPress.

Paso 3: Crear un formulario de webhook

Para crear un nuevo formulario, dirígete a la página WPForms » Añadir nuevo, donde verás una lista de plantillas predefinidas. Estas plantillas vienen precargadas con los campos que necesitarás según el propósito de tu formulario. La biblioteca de plantillas incluye:

• Formulario de contacto simple
• Formulario de solicitud de cotización
• Formulario de donación
• Formulario de facturación/pedido
• Formulario de encuesta
• Formulario de sugerencias

¡...y más! Para este tutorial, elegiremos la plantilla Formulario de sugerencias porque creamos una aplicación de Slack para comentarios de usuarios en el paso anterior. Siéntete libre de elegir una que se adapte mejor a tus necesidades.

Lo único que tienes que hacer es darle un nombre a tu formulario en la parte superior de la página. Luego, elige cualquier plantilla según tus necesidades o puedes elegir la plantilla en blanco para empezar desde cero.

Después de seleccionar una plantilla, verás el constructor de formularios de arrastrar y soltar en la siguiente ventana.

Si deseas agregar más campos, simplemente arrastra y suelta nuevos campos del menú de la izquierda en la vista previa del formulario.

WPForms ofrece muchas opciones de personalización, por lo que puedes hacer clic en cualquier campo para editarlo. Te permite cambiar los nombres de los campos, la descripción y configuraciones más avanzadas.

Una vez que hayas terminado de agregar los campos de tu formulario, haz clic en el botón Guardar.

En el siguiente paso, aprenderemos cómo configurar webhooks para este formulario y conectar tu aplicación de Slack.

Paso 4: Configurar un webhook para Slack

Para que los webhooks funcionen en tu formulario, necesitas navegar a la pestaña Configuración » Webhooks y hacer clic en la opción Habilitar webhooks.

Se creará un nuevo webhook que puedes editar para configurar tu integración con Slack.

Primero, puedes cambiar el nombre del webhook. Esto te ayudará a reconocerlo más tarde.

Ahora, ¿recuerdas la URL del Webhook que copiaste de tu aplicación de Slack en el Paso 1? Necesitarás pegarla aquí en la opción URL de solicitud. Esto te permitirá conectar tu formulario de WordPress con otros servicios como Slack.

Después de esto, verás varias configuraciones para configurar tu webhook. Discutiremos qué hace cada una y qué agregar a estos campos aquí.

• Request Method: It lets you choose what type of connection you want to create with your connected service. There are many types of HTTP methods that you can use based on what type of connection you’re looking to create:
  • GET: Esto obtendrá datos del formulario enviado y enviará los detalles a una aplicación conectada.
  • POST: Esto enviará los datos a un servicio secundario. Usaremos la solicitud HTTP POST ya que necesitamos enviar datos de tu formulario a tu canal de Slack.
  • PUT: Esto te permite actualizar datos cuando se ejecuta tu webhook.
  • PATCH: Esto te permite reemplazar datos cuando se ejecuta tu webhook.
  • DELETE: Esto te permite eliminar información cuando se ejecuta este webhook específico.
• Request Format: This option will show the server which type of content you are sending over. This is a bit technical but basically, there are two different request format types available:
  • JSON: Formatea tus datos en un formato application/json y establecerá el tipo de contenido como charset=utf-8.
  • FORM: Formatea tus datos en un formato application/x-www-form-urlencoded y establecerá el tipo de contenido como charset=utf-8.
• Secreto: Si eres desarrollador y deseas integrar tu propia API para autenticación, puedes usar una clave secreta. Pero para nuestro tutorial, no necesitamos esta opción, así que la dejaremos en blanco.
• Encabezados de solicitud: Esto envía valores específicos cuando la solicitud se envía a la aplicación. Cuando se ejecute el webhook, los campos se generarán automáticamente. Dejaremos este campo en blanco también.
• Cuerpo de la solicitud: Para esta opción, necesitas configurar el tipo de mensaje y seleccionar un campo para publicar mensajes. Como los usuarios ingresarán sugerencias en formato de texto, estableceremos la Clave en Texto. Luego, selecciona el campo donde los usuarios ingresarán su mensaje.

Una vez que hayas terminado con la configuración de la solicitud del webhook, haz clic en el botón Guardar.

Paso 5: Configurar notificaciones del formulario

A continuación, puedes configurar notificaciones por correo electrónico para el formulario de WordPress. Esto te permite enviar correos electrónicos automatizados al administrador, a cualquier miembro del equipo y al cliente/usuario una vez que envíen el formulario.

Para configurar estos flujos de trabajo de correo electrónico, dirígete a la pestaña Configuración » Notificaciones, marca la opción Habilitar notificaciones para ver la configuración predeterminada.

Aquí, puedes personalizar la configuración de notificación y agregar direcciones de correo electrónico de destinatarios.

WPForms también te permite enviar notificaciones por correo electrónico automatizadas a los usuarios del formulario. Para configurar esto, haz clic en el botón Agregar nueva notificación en la esquina superior derecha de la página.

Luego, necesitas usar la opción Mostrar etiquetas inteligentes y seleccionar Correo electrónico. Con esta etiqueta, WPForms detectará automáticamente la dirección de correo electrónico ingresada por el usuario en el formulario.

En la sección Mensaje de correo electrónico, puedes agregar tu mensaje personalizado y usar la etiqueta inteligente {all_fields} para mostrar todos los datos del formulario que el usuario ingresó.

No olvides guardar tu configuración al final.

Paso 6: Personalizar mensaje de confirmación

WPForms también te permite mostrar mensajes de confirmación en el front-end de tu sitio después de que los usuarios envíen el formulario con éxito.

En la pestaña Configuración » Confirmaciones, verá la configuración de confirmación. Por defecto, el Tipo de confirmación está configurado como ‘Mensaje’, pero hay 3 opciones en este menú:

• Mensaje: Agrega un mensaje de confirmación que se muestra en el frontend después de que los clientes envían su pedido. 
• Mostrar página: Redirige a tus usuarios a cualquier página de tu sitio.
• Ir a URL (Redirección): Envía a los usuarios a una URL específica.

Para obtener más información sobre esto, puedes consultar nuestra guía sobre cómo configurar notificaciones y confirmaciones de formularios de la manera correcta.

Una vez que hayas terminado con la configuración, haz clic en el botón Guardar.

También debemos mencionar aquí que WPForms te permite integrarte con tu servicio de correo electrónico preferido como Constant Contact y Mailchimp.

Simplemente necesitas acceder a esto en la pestaña Marketing y seguir las instrucciones en pantalla para conectar tu cuenta de correo electrónico. En la mayoría de los casos, necesitarás proporcionar una clave API que puedes generar con el proveedor de correo electrónico.

Si también deseas conectar formularios en línea a una pasarela de pago, puedes aprender a hacerlo aquí: Cómo crear un formulario de pedido en línea

Todo lo que necesitas hacer ahora es publicar tu formulario webhook en tu sitio de WordPress.

Paso 7: Publicar el formulario Webhooks en tu sitio

Para comenzar a enviar envíos de formularios a servicios externos, primero necesitas publicar el formulario webhook. Con el bloque personalizado de WPForms, puedes agregar tus formularios a cualquier página o publicación en tu sitio de WordPress.

Para este tutorial, agregaremos el formulario a una nueva página en nuestro sitio. Así que navega a la pestaña Páginas » Añadir nueva en tu panel de administración de WP. En la pantalla del editor de bloques, agrega un nuevo bloque y busca 'WPForms'.

Cuando agregues el bloque WPForms a tu página, verás un menú desplegable que te permite seleccionar el formulario webhook que acabas de crear.

Luego, puedes publicar tu página en tu sitio.

Si estás usando el editor clásico de WordPress, puedes agregar el formulario usando el botón Añadir formulario en el editor.

Incluso puedes insertar tu formulario de webhook en un área lista para widgets como un pie de página o una barra lateral. Para hacer esto, dirígete a la pestaña Apariencia » Widgets y arrastra y suelta el widget de WPForms en el menú de la barra lateral o pie de página de la derecha.

Luego, puedes seleccionar el formulario que creaste en el menú desplegable y guardar tus cambios.

Ahora tu formulario de webhooks está publicado en tu sitio. Cuando los usuarios completen y envíen el formulario, recibirás notificaciones de Slack desde tu sitio web.

De esta manera, puedes usar WPForms para conectarte a diferentes aplicaciones usando URLs de webhook. Tienes control total sobre los datos que deseas obtener y enviar a otras aplicaciones.

¡Eso es todo! Esperamos que esta publicación te haya ayudado a aprender cómo usar Webhooks en tus formularios de WordPress. Con WPForms, puedes crear un formulario de webhook y conectarte con un servicio de terceros con facilidad.

También puedes usarlo para crear otros formularios profesionales de WordPress como formularios de pedido, formularios de reserva, formularios de registro y más. También es posible que desees aprender cómo usar WPForms para guardar datos de formularios en tu base de datos de WordPress.

Para tus próximos pasos, puedes consultar estos recursos:

• Cómo agregar la opción 'Guardar y continuar más tarde' a los formularios de WordPress
• Cómo Reducir el Abandono de Formularios y Aumentar las Conversiones
• Las mejores herramientas de captura de correo electrónico y creadores de formularios para WordPress

Estas publicaciones te ayudarán a agregar la funcionalidad de guardar y reanudar más tarde en tus formularios de WordPress y reducir las tasas de abandono de formularios. La última te ayudará a hacer crecer tu lista de marketing por correo electrónico.