Resumen de IA
¿Te gustaría enviar datos de tus formularios de WordPress a una aplicación o complemento de terceros? Con el complemento Webhooks de WPForms, puedes conectar tus formularios a un servicio secundario.
Este tutorial te mostrará cómo instalar y usar el complemento Webhooks con WPForms.
Requisitos:
- Necesitarás un nivel de licencia Élite para acceder al complemento Webhooks
- Asegúrate de haber instalado la última versión de WPForms para cumplir con la versión mínima requerida para el complemento Webhooks
¿Qué son los Webhooks?
Un webhook te permite enviar automáticamente información de tu formulario a algún otro servicio o herramienta fuera de tu sitio de WordPress. Esto es especialmente útil si necesitas una integración, pero aún no hay un complemento disponible para ella.
La forma más sencilla para principiantes de configurar un webhook es a través de nuestro complemento Zapier. Zapier es genial para todos los niveles de usuario porque utiliza una configuración tipo asistente, que te guía a través de cada paso necesario para conectar tus formularios a un servicio separado.
Otra opción es nuestra integración con Uncanny Automator. Esta función te permite establecer conexiones entre aplicaciones y servicios compatibles.
Para usuarios más avanzados, el complemento Webhooks ofrece capacidades similares sin ningún servicio conector. Sin embargo, como contrapartida, el proceso de configuración es más técnico.
Instalación del complemento Webhooks
Antes de empezar, primero deberás asegurarte de que WPForms esté instalado y activado en tu sitio de WordPress.
Una vez que WPForms esté instalado y tu licencia sea verificada, podrás instalar y activar rápidamente el complemento Webhooks.
Configuración de un Webhook
Una vez completado el proceso de instalación, estarás listo para configurar tu webhook. Para empezar, necesitarás crear un nuevo formulario o editar uno existente.
Después de abrir el constructor de formularios, puedes habilitar los webhooks en Ajustes » Webhooks. Desde aquí, activa la opción Habilitar Webhooks.
Esto abrirá más ajustes que puedes configurar, incluido el nombre de tu webhook.
Por defecto, los nuevos webhooks no tendrán nombre. Si deseas editar o añadir un nombre a tu webhook, haz clic en el icono del lápiz.
Además, si deseas añadir más webhooks, puedes hacer clic en el botón etiquetado como Añadir Nuevo Webhook y completar los ajustes para cada conexión adicional.
Debajo del nombre de tu webhook, verás todos los ajustes disponibles para esta conexión. Hemos descrito lo que hace cada uno de ellos a continuación.
URL de Solicitud
La URL de Solicitud se utilizará para conectar WPForms a una aplicación secundaria. Normalmente puedes obtener esta URL de la API del servicio o herramienta después de configurar una conexión básica.
Método de Solicitud
El Método de Solicitud te permite seleccionar el método HTTP que deseas utilizar cuando se ejecute tu solicitud de webhook.
Hay varios métodos diferentes para elegir, según el tipo de conexión que desee crear:
- GET: El método GET obtendrá información de un formulario enviado y enviará los detalles a una aplicación conectada.
- POST: El método POST tomará la información enviada a través de WPForms y la enviará a un servicio secundario.
- PUT: El método PUT le permite actualizar datos cuando se ejecuta su webhook.
- PATCH: El método PATCH le permite reemplazar datos cuando se ejecuta su webhook.
- DELETE: El método DELETE le permite eliminar información cuando se ejecuta este webhook específico.
Formato de solicitud
El Formato de solicitud comunicará a su servidor qué tipo de datos se envían a través de su webhook. Esto también establecerá el valor del encabezado Content-Type para sus datos.
Hay dos tipos de formato de solicitud disponibles:
- JSON: El método JSON formateará sus datos en un formato
application/jsony establecerá el tipo de contenido comocharset=utf-8. - FORM: El método FORM formateará sus datos en un formato
application/x-www-form-urlencodedy establecerá el tipo de contenido comocharset=utf-8.
Nota: Los datos se envían típicamente en formato JSON, ya que esto facilitará los cambios en el lado del servidor (incluyendo cambios de validación, formato y saneamiento).
Secreto
La clave Secreta generará un hash (o ID único) para cada solicitud completada. Esto actúa como una firma para verificar el origen de su solicitud HTTP, y siempre se proporcionará en el Encabezado de solicitud.
Nota: En la mayoría de los casos, si está integrando sus formularios con un servicio de terceros, no necesita completar la configuración Secreta. La configuración Secreta está destinada a los desarrolladores que se integran con sus propias API como una forma de verificar el origen de una solicitud.
Encabezados de solicitud
Los Encabezados de solicitud le permiten definir la(s) clave(s) y el(los) valor(es) del encabezado HTTP que se enviarán con su solicitud de webhook.
Nota: Esta configuración es especialmente útil si está intentando pasar una clave API en su encabezado HTTP para solicitudes autenticadas. Puede introducir su propia clave API utilizando el Campo oculto de WPForms.
Cuerpo de la solicitud
De manera similar a los Encabezados de solicitud, la configuración del Cuerpo de la solicitud le permite definir la(s) clave(s) y el(los) valor(es) que se enviarán en el cuerpo de la solicitud de su webhook.
Nota: Para separar varios valores en campos como Dirección, Menú desplegable, Casillas de verificación, etc., WPForms utiliza dos barras verticales (así: ||).
Ejemplo: Uso de Webhooks para conectar WPForms con Slack
Nota: Para una integración de Slack más fácil de usar, recomendamos usar nuestro complemento dedicado de Slack, que ofrece una configuración más sencilla y más funciones. Consulte nuestra guía del complemento de Slack para obtener más detalles.
Como ejemplo, le mostraremos cómo conectar WPForms a su cuenta de Slack utilizando un webhook.
Nota: Este ejemplo explica cómo enviar un solo campo de formulario a Slack. Si deseas enviar varios campos a Slack, asegúrate de consultar nuestra documentación para desarrolladores para obtener más detalles.
Creación de tu aplicación de Slack
Primero, deberás navegar a la página de la API de Slack. Luego, haz clic en el botón Crear una aplicación.
Esto abrirá una superposición donde deberás seleccionar cómo deseas configurar tu aplicación. Elige la opción Desde cero.
A continuación, podrás nombrar tu aplicación y seleccionar a qué espacio de trabajo deseas enviar los datos del formulario. Para nuestro ejemplo, nombraremos nuestra aplicación Contact Sullie. Haz clic en el botón Crear aplicación para continuar.
Esto te llevará a una página con información básica sobre tu aplicación. Desplázate hacia abajo hasta la configuración Agregar características y funcionalidades y habilita la opción Webhooks entrantes.
Una vez que hayas habilitado la configuración de Webhooks entrantes, activa la opción Activar Webhooks entrantes a Activado. Esto abrirá más detalles más abajo en la página.
Debajo de la sección URLs de Webhook para tu espacio de trabajo, haz clic en el botón Agregar nuevo Webhook al espacio de trabajo.
Esto te redirigirá a otra superposición donde deberás seleccionar un canal de Slack al que enviar tus mensajes. Elige un canal del menú desplegable y haz clic en Permitir.
Esto te devolverá a la página anterior. Verás una nueva URL en la sección URLs de Webhook para tu espacio de trabajo. Copia esta URL, ya que la usarás en el siguiente paso.
Asegúrate de mantener esta pestaña o ventana del navegador abierta, ya que necesitarás la información de esta área más adelante.
Agregar tu Webhook de Slack a un formulario
A continuación, deberás abrir el formulario en el que usarás tu webhook. Si aún no lo has hecho, asegúrate de configurar tu complemento de Webhooks en WPForms.
Una vez que hayas activado los webhooks para tu formulario, pega la URL que copiaste de Slack en el campo URL de solicitud para conectar tu formulario con la API de Slack.
A continuación, configura el resto de los ajustes del webhook. Hemos detallado todos nuestros ajustes configurados para este ejemplo a continuación:
- Método de solicitud: Dado que buscaremos enviar datos de nuestros formularios a Slack, estableceremos el Método de solicitud en la opción POST.
- Formato de solicitud: Estableceremos el Formato de solicitud en JSON estándar.
- Secreto: Para nuestro ejemplo, dejaremos el campo Secreto en blanco y permitiremos que se genere automáticamente cuando se ejecute nuestro webhook. Si eres desarrollador y deseas ingresar tu propio valor de Secreto, puedes hacerlo aquí.
- Encabezados de solicitud: No tenemos ningún valor específico que necesitemos enviar con nuestra solicitud, por lo que dejaremos la configuración de Encabezados de solicitud en blanco. Cuando se ejecute el webhook, el Secreto generado automáticamente se colocará aquí.
- Cuerpo de la solicitud:
- Clave: Introduzca texto en el campo de clave del parámetro Cuerpo de la solicitud, ya que el formulario enviará la información en texto plano. Si no introduce texto como valor para este campo, es probable que se produzca un error en su conexión.
- Seleccionar campo: El ajuste de Campo de selección será el nombre del campo cuyos datos desea enviar. Para nuestro ejemplo, enviaremos los datos del campo Comentario o mensaje a Slack.
Recuerde guardar sus cambios antes de salir del creador de formularios. También recomendamos probar su formulario para asegurarse de que su webhook funciona correctamente una vez que lo haya configurado.
Añadir lógica condicional (Opcional)
La lógica condicional le permite elegir si se realiza o no una acción basándose en las selecciones de un usuario en su formulario.
Como ejemplo, le mostraremos cómo puede usar la lógica condicional para enviar un mensaje a Slack si un usuario envía una entrada a nuestro formulario de contacto con un mensaje que contiene la palabra "Ayuda".
Para configurar esto, deberá asegurarse de que su formulario tenga un campo de Texto de una sola línea o Texto de párrafo. Para nuestro ejemplo, agregaremos un campo de Texto de párrafo.
Luego, deberá ajustar la etiqueta del campo de entrada del mensaje. Para nuestro ejemplo, agregaremos la etiqueta Comentario o mensaje.
A continuación, deberá configurar su lógica condicional. En la parte inferior de la configuración de su webhook de Slack, active la opción etiquetada Habilitar lógica condicional para revelar los menús desplegables para crear su regla.
Luego, agregue la regla para su lógica condicional. Para nuestro ejemplo, configuraremos los menús desplegables para que digan: Enviar este webhook si Comentario o mensaje contiene ayuda.
Nota: ¿Necesitas ayuda para configurar tu regla de lógica condicional? Nuestro tutorial para principiantes sobre cómo usar la lógica condicional en WPForms tiene todos los detalles.
Como siempre, recuerde guardar su formulario antes de salir del creador.
Preguntas frecuentes
Estas son algunas de las preguntas más frecuentes relacionadas con el complemento Webhooks.
¿Cómo puedo usar las etiquetas inteligentes en la cabecera de solicitud y el cuerpo de solicitud?
Las etiquetas inteligentes se pueden usar para insertar dinámicamente información en la cabecera de solicitud y el cuerpo de solicitud de su formulario.
Para usar las etiquetas inteligentes, seleccione Añadir valor personalizado en el menú desplegable Cabeceras de solicitud de la configuración de su webhook, luego agregue la etiqueta inteligente como clave del parámetro. Puede repetir el mismo paso para el ajuste del Cuerpo de solicitud.
Para obtener una lista completa de las etiquetas inteligentes que se pueden usar, asegúrese de consultar todas las etiquetas inteligentes disponibles en WPForms.
¡Eso es todo! Ahora sabe cómo configurar el complemento Webhooks para WPForms.
¿A continuación, busca una forma de transferir fácilmente sus WPForms de un sitio a otro? Consulte nuestro tutorial sobre cómo importar y exportar sus formularios.