Conecte el formulario de su web a Cold Leads: HTML, WordPress y Webflow

Antes de empezar

1. En Ajustes → Claves de API, cree una clave de sitio web (lk_…) y defina como sitio web permitido la dirección de su sitio, por ejemplo https://www.example.com.
2. Elija la fase, las etiquetas y la lista por defecto de la clave. Las etiquetas que envíe con el formulario se añaden a las de la clave.
3. Tome nota de los nombres de campo que lee el endpoint: email (obligatorio), name, company, phone, message, tag, stage (solo se acepta lead), redirect y el campo trampa website.

HTML simple

Apunte el action del formulario al endpoint y ponga la clave en un campo oculto. Los nombres de campo deben coincidir con la lista anterior.

<form action="https://coldleads.app/api/hooks/lead" method="POST">
  <input type="hidden" name="_key" value="lk_your_website_key">
  <input type="hidden" name="redirect" value="https://www.example.com/thanks">
  <input type="hidden" name="tag" value="contact-page">
  <label>E-mail <input name="email" type="email" required></label>
  <label>Name <input name="name"></label>
  <label>Company <input name="company"></label>
  <label>Phone <input name="phone"></label>
  <label>Message <textarea name="message"></textarea></label>
  <input name="website" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
</form>

WordPress: WPForms

WPForms envía webhooks con su complemento Webhooks, que requiere una licencia WPForms Elite.

1. Instale y active el complemento Webhooks (WPForms → Addons).
2. Abra su formulario en el editor, vaya a Settings → Webhooks y active Enable Webhooks.
3. Defina Request URL como https://coldleads.app/api/hooks/lead, Request Method como POST y Request Format como JSON.
4. En Request Headers, añada x-api-key con su clave de sitio web.
5. En Request Body, asigne email, name, company, phone y message a los campos de su formulario, y añada tag con un valor fijo como wpforms.
6. Guarde y envíe el formulario una vez con su propia dirección; el contacto aparece en Cold Leads.

WordPress: Contact Form 7

Contact Form 7 no tiene ajuste de webhooks, pero ejecuta una acción de WordPress después de enviar su correo. Guarde esto como wp-content/mu-plugins/coldleads-cf7.php (un plugin de uso obligatorio) y ajuste los nombres de campo si su formulario no usa los predeterminados your-email, your-name y your-message.

<?php
// Sends every Contact Form 7 submission to Cold Leads.
add_action('wpcf7_mail_sent', function ($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) {
        return;
    }
    $data = $submission->get_posted_data();
    wp_remote_post('https://coldleads.app/api/hooks/lead', [
        'timeout' => 10,
        'headers' => [
            'Content-Type' => 'application/json',
            'x-api-key'    => 'lk_your_website_key',
        ],
        'body' => wp_json_encode([
            'email'   => $data['your-email'] ?? '',
            'name'    => $data['your-name'] ?? '',
            'message' => $data['your-message'] ?? '',
            'tag'     => 'cf7',
        ]),
    ]);
});

infoEl visitante sigue viendo el mensaje de éxito propio de Contact Form 7 y usted sigue recibiendo su correo; Cold Leads recibe una copia del envío.

Webflow

El webhook de formularios propio de Webflow envía los campos anidados en payload.data, que el endpoint de leads no lee. Use en su lugar una acción de formulario personalizada.

1. En el Designer, seleccione el Form Block y abra su configuración.
2. Defina Action como https://coldleads.app/api/hooks/lead?key=lk_your_website_key y Method como POST.
3. Dé a cada campo el nombre que espera el endpoint (email, name, company, phone, message).
4. Añada dentro del formulario un elemento Embed con campos ocultos: <input type="hidden" name="redirect" value="https://www.example.com/thanks"> y <input type="hidden" name="tag" value="webflow">.
5. Publique y pruebe. Con una acción personalizada, Webflow no muestra su propio mensaje de éxito ni guarda el envío en Webflow, así que es el campo redirect el que devuelve al visitante a su sitio.

Preguntas frecuentes