Form Integration

Capture referral data in form submissions for lead tracking

Table of Contents

Form Integration

Capture affiliate referral data when visitors submit forms on your site. This enables lead tracking before a purchase occurs.

How It Works

  1. Visitor arrives via affiliate link
  2. Referral ID stored in browser
  3. Visitor submits a form
  4. Referral data automatically injected into form
  5. You receive referral info with form submission

Automatic Injection

Add the data-affiliatebase attribute to your forms:

<form
  action="/submit"
  method="POST"
  data-affiliatebase="true"
>
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

The tracking script automatically adds a hidden field:

<input type="hidden" name="referral_id" value="abc123-referral-id">

Manual Integration

If you prefer explicit control:

<form action="/submit" method="POST" id="my-form">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" placeholder="Email">
  <input type="hidden" name="referral_id" id="referral-field">
  <button type="submit">Submit</button>
</form>

<script>
// Set referral ID when form loads
document.addEventListener('DOMContentLoaded', function() {
  const referralId = window.affiliatebase_referral;
  if (referralId) {
    document.getElementById('referral-field').value = referralId;
  }
});
</script>

JavaScript Form Submissions

For AJAX/fetch form submissions:

document.getElementById('my-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);

  // Add referral ID
  const referralId = window.affiliatebase_referral;
  if (referralId) {
    formData.append('referral_id', referralId);
  }

  const response = await fetch('/api/submit', {
    method: 'POST',
    body: formData,
  });

  // Handle response...
});

React Forms

function ContactForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    // Include referral data
    const referralId = window.affiliatebase_referral;
    if (referralId) {
      formData.append('referral_id', referralId);
    }

    await fetch('/api/contact', {
      method: 'POST',
      body: formData,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" />
      <input type="email" name="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Server-Side Handling

Node.js/Express

app.post('/submit', (req, res) => {
  const { name, email, referral_id } = req.body;

  // Store the referral ID with the lead
  await createLead({
    name,
    email,
    referralId: referral_id,
  });

  // Later, when they purchase, pass referral_id to Stripe
  // for proper attribution
  res.json({ success: true });
});

Using Referral Data Later

Store the referral ID and use it when the lead converts:

// When lead makes a purchase
const lead = await getLead(email);

const session = await stripe.checkout.sessions.create({
  customer_email: email,
  line_items: [{ price: 'price_xxxxx', quantity: 1 }],
  mode: 'payment',
  // Use stored referral ID
  client_reference_id: lead.referralId,
});

Form Builder Integration

Typeform

Use hidden fields to capture referral data:

  1. Create a hidden field named referral_id
  2. Pass via URL: https://form.typeform.com/to/xxxxx?referral_id={{referral}}
  3. Map referral from URL parameter

Tally

Add custom URL parameters that populate hidden fields automatically.

Custom Forms

For any form builder supporting hidden fields:

<!-- Link to form with referral in URL -->
<a href="https://forms.example.com/signup?ref={{referral_id}}">
  Sign Up
</a>

Lead Tracking Flow

Complete Flow Example

// 1. Capture lead with referral
app.post('/signup', async (req, res) => {
  const { email, name, referral_id } = req.body;

  const lead = await db.leads.create({
    email,
    name,
    referralId: referral_id,
    status: 'lead',
  });

  res.json({ success: true });
});

// 2. Later, when lead purchases
app.post('/checkout', async (req, res) => {
  const { email } = req.body;

  // Look up stored referral
  const lead = await db.leads.findByEmail(email);

  const session = await stripe.checkout.sessions.create({
    customer_email: email,
    line_items: [{ price: 'price_xxxxx', quantity: 1 }],
    mode: 'payment',
    // Attribute to original affiliate
    client_reference_id: lead?.referralId,
  });

  res.json({ url: session.url });
});

Multiple Forms

If you have multiple forms, all can use the same pattern:

<!-- Contact form -->
<form action="/contact" method="POST" data-affiliatebase="true">
  ...
</form>

<!-- Newsletter form -->
<form action="/newsletter" method="POST" data-affiliatebase="true">
  ...
</form>

<!-- Demo request form -->
<form action="/demo" method="POST" data-affiliatebase="true">
  ...
</form>

Testing

  1. Click an affiliate link to your site
  2. Verify window.affiliatebase_referral has a value
  3. Submit a form with data-affiliatebase="true"
  4. Check form submission data includes referral_id
  5. Verify referral ID matches the one in browser

Best Practices

Always Store Referral IDs

Even if leads don’t convert immediately, store the referral ID:

  • Associate with user/lead record
  • Use for delayed conversions
  • Track lead quality by affiliate

Handle Missing Referrals

Not all visitors will have a referral:

// Gracefully handle no referral
const referralId = window.affiliatebase_referral || null;

Privacy Considerations

If collecting personal data:

  • Include referral tracking in your privacy policy
  • Only store necessary attribution data
  • Comply with GDPR/CCPA requirements

Troubleshooting

Hidden Field Not Added

  • Verify tracking script is loaded
  • Check data-affiliatebase="true" attribute
  • Ensure referral exists (window.affiliatebase_referral)

Referral Lost After Form Submit

  • Store referral ID before form submission
  • Use server-side sessions to persist data
  • Consider multi-step form handling

Next Steps