¿Cómo enviar datos de formularios de WordPress a cualquier API con Webhooks?

WPForms tiene un complemento para unos cuarenta servicios. Mailchimp, Salesforce, Stripe, Google Sheets y el resto de la pila habitual están a una pantalla de configuración. El sistema de reservas interno de tu cliente no lo está.

El complemento Webhooks cubre esa brecha. Toma un envío de formulario y lo envía como una solicitud HTTP a cualquier URL que le indiques, en el formato que espera la API receptora. Este tutorial detalla la configuración: obtener los detalles del endpoint, mapear tus campos, añadir autenticación y probarlo antes de que dependa de él un envío real.

Crea tu formulario de WordPress ahora

¿Cómo enviar datos de formularios de WordPress a cualquier API con Webhooks?

Un visitante envía tu formulario. WPForms da forma a las respuestas en una solicitud HTTP como la quiere tu API, añade tu encabezado de autenticación y la envía. Tu entrada se guarda en WordPress de cualquier manera.

Cuándo un Webhook es la Herramienta Adecuada

Busca primero un complemento nativo. Mailchimp, Salesforce, Google Sheets, Notion, Airtable y otros cuarenta se conectan en unos pocos clics, y esas conexiones son más profundas. Zapier, Make y n8n cubren la cola larga de aplicaciones SaaS, con un coste por tarea y una cuenta más en la cadena.

Las webhooks son para el resto: un sistema interno propietario, un servicio regional, el backend personalizado de un cliente, un punto final que usted mismo escribió. Tampoco tienen un límite de transferencia, por lo que un formulario que reciba 4000 envíos al mes cuesta lo mismo que uno que reciba 40.

Lo que necesitarás

• WPForms Elite (el complemento Webhooks está incluido en este nivel de licencia)
• Un formulario en su sitio
• La documentación de la API receptora

No escribirá ningún código. Todo esto sucede en el creador de formularios.

Paso 1: Obtén los Detalles de la API

Omitir este paso es la razón por la que la mayoría de las webhooks fallan en el primer intento. De la documentación de la API, anote:

1. La URL del punto final, como https://api.example.com/v1/deliveries
2. El método de solicitud, generalmente POST para crear un registro
3. El método de autenticación, generalmente una clave en una cabecera como Authorization: Bearer SU_CLAVE
4. Los nombres exactos de los parámetros. Si la API espera customer_email y usted envía email, la solicitud tendrá éxito y el valor desaparecerá.

Ejemplo práctico: un cliente florista cuyo sistema de envío de entregas recibe nuevos pedidos en ese punto final a través de POST y espera customer_name, customer_email, customer_phone, arrangement, quantity y order_total. No existe ningún plugin de WordPress para ello, que es exactamente cuando se recurre a una webhook.

Paso 2: Instala el Complemento y Actívalo

Vaya a WPForms » Complementos, busque Webhooks y haga clic en Instalar complemento. Se activa solo.

Luego abra su formulario, haga clic en Ajustes » Webhooks y active Habilitar Webhooks.

Haga clic en el icono del lápiz para renombrarlo con algo que reconocerá más tarde, como "API de envío".

Paso 3: Configura la URL de Solicitud, el Método y el Formato

A continuación, configure estos ajustes:

URL de solicitud. Pegue el punto final. Preste atención al segmento de la versión, ya que /v1/ y /v2/ son fáciles de confundir.

Método de solicitud. GET, POST, PUT, PATCH o DELETE. POST crea un nuevo registro y cubre la mayoría de las configuraciones.

Formato de solicitud. JSON envía application/json y se adapta a la mayoría de las APIs modernas. FORM envía application/x-www-form-urlencoded, así que úselo solo cuando la documentación lo pida. En caso de duda, JSON.

Paso 4: Añade tus Encabezados de Autenticación

Finalmente, agregue sus cabeceras de autenticación.

Cabeceras de solicitud acepta pares de clave/valor. Para un token de portador, use Authorization como clave y Bearer SU_TOKEN como valor. Para una cabecera personalizada, use el nombre que le den en la documentación, como X-API-Key. Agregue tantas filas como necesite.

El campo Secreto funciona al revés, y WPForms lo rellena por usted. Firma cada solicitud saliente para que el servidor receptor pueda confirmar que los datos realmente provienen de su sitio. Úselo cuando controle el punto final y pueda verificar la firma; la mayoría de las APIs de terceros lo ignoran.

Trate el valor de la cabecera como la credencial que es. Cualquiera con acceso al creador puede leerlo, así que limite las claves API de los clientes y rotelas cuando alguien deje el proyecto.

Crea tu formulario de WordPress ahora

Paso 5: Mapea tus Campos del Formulario

El Cuerpo de la Solicitud es donde el formulario se encuentra con la API. Cada fila empareja un nombre de parámetro que escribes con un campo de formulario que eliges:

• customer_name → Nombre
• customer_email → Correo electrónico
• customer_phone → Número de teléfono
• arrangement → Arreglo
• quantity → Cantidad
• order_total → Total

Copia los nombres de las claves directamente de la documentación. Las mayúsculas y los guiones bajos importan, y una discrepancia te da una solicitud que tiene éxito mientras descarta el valor.

Las casillas de verificación, las selecciones múltiples y los campos de dirección envían valores separados por una barra doble (||), así que divide esa cadena en el servidor si la API espera una matriz.

Elige Añadir valor personalizado para enviar algo que no sea un campo de formulario, como un parámetro source estático o una etiqueta inteligente para el ID de entrada.

Paso 6: Añade Lógica Condicional (Opcional)

Activa Habilitar lógica condicional para controlar cuándo se activa la webhook. Podrías enviar solo un tipo de arreglo a la API de envío, o retener pedidos que no necesiten entrega. Para dos destinos, haz clic en Añadir nueva webhook y dale a cada una su propia regla.

Paso 7: Prueba Antes de Lanzarte

Prueba en dos pasadas.

Primero, envía a un inspector de solicitudes. Webhook.site y RequestBin generan una URL temporal que muestra exactamente lo que llegó. Pégala en URL de solicitud, guarda y envía el formulario. Tus encabezados y carga útil aparecen inmediatamente, lo que te dice si los nombres de las claves son correctos.

Luego cambia al punto final real, envía de nuevo y confirma que el registro aterrizó. Revisa también WPForms » Entradas.

Si estás atascado, ve a WPForms » Herramientas » Registros, activa Habilitar registros y revisa Proveedores y Errores en Tipos de registro. Envía de nuevo y el registro muestra la respuesta de la API. Desactiva el registro después, ya que esas entradas pueden contener datos que no quieres que permanezcan en el servidor.

Errores Comunes de Webhook

• 401 o 403. Autenticación: clave incorrecta, clave caducada, falta el prefijo Bearer, o nombre de encabezado incorrecto.
• 404. La URL: error tipográfico, segmento de versión faltante, o una barra final que la API rechaza.
• 400 o 422. La API recibió la solicitud y rechazó el contenido, generalmente un parámetro requerido faltante o una fecha no interpretable.
• 200 pero nada aparece. Discrepancia en el nombre de la clave: la API aceptó la solicitud e ignoró los campos que no reconoció.
• Nada se activa. Revisa la lógica condicional: en formularios de varias páginas, la webhook se ejecuta una vez, después del envío final.

Preguntas Frecuentes sobre el Envío de Datos de Formularios de WordPress a una API

¿Qué plan de WPForms incluye el complemento Webhooks?

Élite. Ese nivel también cubre Salesforce, Authorize.Net, ActiveCampaign y Airtable, que es por lo que es donde las agencias que hacen trabajos de integración personalizados suelen aterrizar.

¿Necesito saber programar para usar webhooks?

No. Todo sucede en el constructor de WPForms. Solo necesitas leer la documentación de la API lo suficientemente bien como para encontrar su URL, método de autenticación y nombres de parámetros.

¿Cuál es la diferencia entre webhooks y los complementos Zapier o Make?

Zapier y Make se sitúan entre tu formulario y el destino, ofreciéndote flujos de trabajo de varios pasos y un gran catálogo de conexiones por un coste por tarea. Una webhook va directamente al punto final, funciona con cualquier API y no mide las envíos.

¿Puede un formulario enviar datos a más de una API?

Sí. Haz clic en Añadir nuevo webhook y configura la segunda conexión con su propia URL, encabezados y mapeo. Cada una puede tener su propia lógica condicional.

¿Cómo envío una clave API con los datos de mi formulario?

Añádela en Encabezados de solicitud como un par clave/valor. La mayoría de las API quieren Authorization y Bearer TU_CLAVE, aunque algunas usan un nombre personalizado como X-API-Key.

¿Qué sucede si la API no está disponible cuando alguien envía mi formulario?

El envío se completa de todos modos y tu entrada y notificaciones se procesan, ya que el webhook es una solicitud separada. Solo falla el webhook, así que añade monitorización en el extremo receptor para cualquier cosa de importancia crítica para el negocio.

A continuación, dirige tus envíos al lugar correcto automáticamente

Con la conexión API funcionando, la siguiente pieza es el enrutamiento alrededor de ella, para que las solicitudes de presupuesto, las preguntas de soporte y las suscripciones al boletín de noticias vayan a un lugar diferente por sí solas. Cómo enrutar envíos de formularios a diferentes listas y herramientas según las respuestas tiene el tutorial.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.