Підключіть форму сайту до Cold Leads: HTML, WordPress і Webflow

Перед початком

1. У Налаштування → API-ключі створіть ключ сайту (lk_…) і вкажіть адресу свого сайту як його дозволений сайт, наприклад https://www.example.com.
2. Оберіть для ключа стадію, теги й список за замовчуванням. Теги, які ви надсилаєте з формою, додаються до тегів ключа.
3. Запам’ятайте назви полів, які читає ендпоінт: email (обов’язкове), name, company, phone, message, tag, stage (приймається лише lead), redirect і поле-пастка website.

Звичайний HTML

Спрямуйте action форми на ендпоінт і покладіть ключ у приховане поле. Назви полів мають збігатися зі списком вище.

<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 надсилає вебхуки через аддон Webhooks, для якого потрібна ліцензія WPForms Elite.

1. Установіть і активуйте аддон Webhooks (WPForms → Addons).
2. Відкрийте форму в конструкторі, перейдіть у Settings → Webhooks і ввімкніть Enable Webhooks.
3. Укажіть Request URL https://coldleads.app/api/hooks/lead, Request Method POST і Request Format JSON.
4. У Request Headers додайте x-api-key зі своїм ключем сайту.
5. У Request Body зіставте email, name, company, phone і message з полями своєї форми та додайте tag із фіксованим значенням, наприклад wpforms.
6. Збережіть і надішліть форму один раз зі своєю адресою; контакт з’явиться в Cold Leads.

WordPress: Contact Form 7

Contact Form 7 не має налаштування вебхуків, але після надсилання свого листа запускає дію WordPress. Збережіть цей код як wp-content/mu-plugins/coldleads-cf7.php (обов’язковий плагін, must-use) і змініть назви полів, якщо ваша форма не використовує стандартні your-email, your-name і 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',
        ]),
    ]);
});

infoВідвідувач і далі бачить власне повідомлення про успіх Contact Form 7, а ви й далі отримуєте її лист; Cold Leads отримує копію надісланих даних.

Webflow

Власний вебхук форм Webflow надсилає поля вкладеними в payload.data, а ендпоінт лідів їх звідти не читає. Натомість використайте власну дію форми.

1. У Designer виберіть Form Block і відкрийте його налаштування.
2. Укажіть Action https://coldleads.app/api/hooks/lead?key=lk_your_website_key і Method POST.
3. Дайте кожному полю назву, яку очікує ендпоінт (email, name, company, phone, message).
4. Додайте всередину форми елемент Embed із прихованими полями: <input type="hidden" name="redirect" value="https://www.example.com/thanks"> і <input type="hidden" name="tag" value="webflow">.
5. Опублікуйте й протестуйте. З власною дією Webflow не показує своє повідомлення про успіх і не зберігає надіслані дані у Webflow, тож саме поле redirect повертає відвідувача на ваш сайт.

Питання