Connecting Forms

500 Leads works with any form tool that supports webhooks and with any HTML form on your website. The fastest way to start capturing leads from your own website is the JavaScript snippet.

JavaScript snippet (recommended for your website)

This is the simplest way to capture leads from any HTML form. Two steps:

Step 1. Add the script tag to your page (once, anywhere):

<script src="https://leads.500rockets.io/capture.js" data-source="YOUR_SOURCE_TOKEN"></script>

Step 2. Add data-500leads to any form you want to capture:

<form data-500leads>
  <input name="email" type="email" required />
  <input name="firstName" type="text" />
  <button type="submit">Get in touch</button>
</form>

That’s it. When the form is submitted, the snippet sends the data to 500 Leads, prevents duplicate submits while a request is in flight, and includes attribution metadata automatically.

Success and error feedback

By default, the snippet handles feedback automatically:

• On success: the form resets and the submit button is disabled in a submitted state
• On error: the button returns to its original state so the user can retry
• Network timeout and offline failures are handled as errors (default timeout is 12 seconds)

You can customize this behavior:

Option A — Redirect to a thank-you page:

<form data-500leads>
  <!-- form fields -->
</form>

Option B — Custom success/error elements:

<form data-500leads data-redirect="/thank-you">
  <div data-success style="display:none">
    <p>Thanks! We'll be in touch shortly.</p>
  </div>
  <input name="email" type="email" required />
  <button type="submit">Submit</button>
</form>
<div data-error style="display:none">
  <p>Something went wrong. Please try again.</p>
</div>

When the form submits successfully, the snippet hides the form fields and shows the [data-success] element. On error, it shows [data-error].
[data-success] can live inside the form. If [data-error] is outside the form, keep it in the same parent container (or mark a wrapper with data-500leads-container).

Option C — JavaScript events (for developers):

document.querySelector("form").addEventListener("500leads:success", function(e) {
  console.log("Lead captured!", e.detail);
  // Show your own success UI
});

document.querySelector("form").addEventListener("500leads:error", function(e) {
  console.log("Capture failed", e.detail.status);
  console.log("Failure reason", e.detail.reason); // http_error | network_error | timeout
  // Show your own error UI
});

JavaScript API

For programmatic use (e.g., capturing data from custom UIs, not forms):

window.FiveHundredLeads.capture({
  email: "[email protected]",
  firstName: "Jane",
  company: "Acme Corp"
}, function(ok, status) {
  if (ok) console.log("Captured!");
  else console.log("Failed with status", status);
});

UTM and attribution tracking

The snippet automatically captures:

• UTM parameters from the current page URL (utm_source, utm_medium, utm_campaign, utm_term, utm_content)
• The referring page URL
• The page URL where the form was submitted

These are attached to the lead and visible in the dashboard.

---

Typeform

1. Open your Typeform and go to Connect > Webhooks
2. Click Add a webhook
3. Paste your 500 Leads source webhook URL
4. Click Save

Typeform sends form responses as JSON. You may need to set up field mappings in your source settings to map Typeform’s field IDs to standard lead fields.

Tip: In your source’s Field Mappings, map fields like answers[0].text to email, answers[1].text to firstName, etc.

Tally

1. Open your Tally form and go to Integrations
2. Click Webhooks
3. Paste your 500 Leads source webhook URL
4. Save

Tally sends clean JSON with field labels as keys, so field mappings are usually straightforward.

Jotform

1. Open your form in Jotform
2. Go to Settings > Integrations
3. Search for Webhooks
4. Add your 500 Leads source webhook URL

Google Forms (via Apps Script)

Google Forms does not have native webhook support, but you can use a simple Apps Script:

1. Open your Google Form
2. Click the three-dot menu > Script editor
3. Add this script:

function onFormSubmit(e) {
  var responses = e.response.getItemResponses();
  var data = {};
  responses.forEach(function(r) {
    data[r.getItem().getTitle()] = r.getResponse();
  });

  UrlFetchApp.fetch("https://leads.500rockets.io/api/webhooks/YOUR_TOKEN", {
    method: "post",
    contentType: "application/json",
    payload: JSON.stringify(data)
  });
}

4. Set up a trigger: Triggers > Add Trigger > onFormSubmit > On form submit

Zapier / Make

If you have an API key, you can also use Zapier or Make to connect any form tool:

1. Set up a Zap/Scenario triggered by your form
2. Add an HTTP action pointing to POST https://leads.500rockets.io/api/leads
3. Set the header X-API-Key: <your-api-key>
4. Map form fields to the JSON body

See the API Reference for details on API key authentication.

Custom HTML forms (direct webhook)

If you prefer not to use the JavaScript snippet, you can send data directly to the webhook endpoint. See the Webhooks API reference for the full endpoint specification.

Testing your connection

After setting up, submit a test entry through your form and check your 500 Leads dashboard. The lead should appear within a few seconds. If it does not show up, check the Webhook Logs section in your source detail page for error details.