DEV Community

Cover image for How to Build a Lead Qualification Form in Framer (with Slack Routing)
CodePerfect Studio
CodePerfect Studio

Posted on • Edited on • Originally published at codeperfect.studio

How to Build a Lead Qualification Form in Framer (with Slack Routing)

#framer #tutorial #webdev #nocode

Most Framer sites ship a simple "Contact us" form that treats every submission the same.

That's fine when you're just starting — but once you get any real traffic, your inbox becomes a mix of spam, low-intent inquiries, and high-intent leads that deserve a fast reply.

This guide covers:

  1. Evidence-backed best practices for lead forms (so you don't accidentally tank conversion)
  2. A DIY Framer workflow to qualify + route leads to Slack/email without a backend
  3. An optional turnkey implementation with a Framer plugin if you want fewer moving parts

Part 1 — What "good" lead forms do

Keep the form short (then qualify later)

More fields = more friction. HubSpot research consistently shows certain fields (phone number, long free-text, etc.) hurt conversion. A good starting point is 3–5 fields, then qualify later via routing logic or a follow-up step.

Use progressive disclosure (multi-step) when you need more info

If you need more than a few inputs, split the form into steps. Multi-step forms often outperform long single-page forms because they reduce abandonment.

Optimize for speed-to-lead

If a lead fills out your form and you reply hours later, you're usually competing with whoever replied first. A widely cited study (InsideSales/MIT) found that contacting leads quickly dramatically increases qualification odds.

Practical takeaway: route high-intent leads to Slack so you see them immediately.

Part 2 — What we're building (DIY version)

A lead qualification form that:

  • asks 3–5 qualifying questions
  • uses a simple rule like "Budget = $20k+ AND Timeline = This month"
  • routes high-intent to Slack
  • routes everything else to a fallback email

No custom backend required.

Part 3 — DIY: implement this in Framer

Framer handles the form UI. The routing happens via email (simple) or webhooks + automation (recommended).

Option A — Email-first (simplest)

In Framer

  1. Insert a Form (Insert → Forms → Form).
  2. Add inputs and keep them tight: Name, Email, Budget (dropdown), Timeline (dropdown), 1-sentence project description.
  3. In the right sidebar → Send To → Add… → Email.
  4. Enter your email address.
  5. Publish and submit two tests.

In your email inbox

  1. Create a filter: if body contains Budget: $20k+ AND Timeline: This month → label "Hot Leads". Else → "General".

Option B — Slack + Email routing via webhooks (recommended)

Step 1 — Create a webhook trigger

Zapier: New Zap → Webhooks by Zapier → Catch Hook → copy the URL.

Make: New Scenario → Webhooks → Custom webhook → Add → copy the URL.

Step 2 — Connect your Framer form

  1. Select your Form on the Framer canvas.
  2. Right sidebar → Send To → Add… → Webhook.
  3. Paste the webhook URL.
  4. Publish and submit a test.

Framer webhook settings

Step 3 — Add routing logic

Zapier

  1. Add Filter by Zapier: budget equals $20k+ AND timeline equals This month
  2. If passes → Slack → Send Message to #inbound-leads
  3. Fallback path → Email by Zapier → your inbox

Make

  1. After webhook, add a Router
  2. Route 1 filter: budget = $20k+ AND timeline = This month → Slack → Create a Message in #inbound-leads
  3. Route 2 (fallback) → Email/Gmail → your fallback inbox

Part 3b — Setting up Slack and Discord for routing

Once you have a webhook URL from Zapier or Make, you still need the destination webhook URLs. Here's how to get them.

How to set up a Slack incoming webhook

Slack incoming webhooks are per-channel URLs that accept a JSON POST and display a formatted message — no bot token required.

  1. Go to api.slack.com/apps and click Create New App → From scratch.
  2. Give it a name (e.g. "Lead Routing") and select your workspace.
  3. In the left sidebar under Features, click Incoming Webhooks.
  4. Toggle Activate Incoming Webhooks to On. Slack app settings — Incoming Webhooks toggle turned on
  5. Click Add New Webhook to Workspace at the bottom.
  6. Choose the channel you want to post to (e.g. #inbound-leads) and click Allow.
  7. Copy the generated Webhook URL — it looks like: https://hooks.slack.com/services/T.../B.../xxx...

Slack webhook URL ready to copy

Paste this URL into:

  • Zapier: the "Webhook URL" field in the Slack → Send Channel Message action (or use Zapier's native Slack integration)
  • Make: HTTP Request → URL field (method: POST, body: JSON with text key)
  • Lead Form plugin: the "Slack Webhook URL" property in Framer

Security: treat your Slack webhook URL like a password. It bypasses all login — anyone with the URL can post to your channel.

How to set up Discord channel notifications

Discord supports incoming webhooks per channel. The setup takes about 60 seconds.

  1. Open Discord and navigate to the channel you want notifications in (e.g. #leads).
  2. Click the Edit Channel (gear icon) next to the channel name.
  3. In the left sidebar, click Integrations → Webhooks.
  4. Click New Webhook, give it a name (e.g. "Lead Form"), and optionally set an avatar.

Discord channel Integrations → Webhooks → New Webhook

  1. Click Copy Webhook URL — it looks like: https://discord.com/api/webhooks/{id}/{token}

Discord webhook URL ready to copy

Sending a message via Zapier or Make:

Discord webhooks accept a JSON POST with a content key for plain text, or embeds for rich cards.

Zapier:

  1. Add a Webhooks by Zapier action → POST.
  2. URL: your Discord webhook URL.
  3. Data: set Payload Type to JSON, add key content with value like: New lead (score: {{score}}) — {{email}}

Make:

  1. Add an HTTP → Make a request module.
  2. Method: POST, URL: your Discord webhook URL.
  3. Body type: Raw, Content type: application/json.
  4. Body: 
{
  "embeds": [{
    "title": "New Lead Submission",
    "color": 6553855,
    "fields": [
      { "name": "Score", "value": "{{score}}", "inline": true },
      { "name": "Email", "value": "{{answers[1].value}}", "inline": true }
    ]
  }]
}
Enter fullscreen mode Exit fullscreen mode

Lead Form plugin: once Discord delivery is added to the plugin (coming soon), paste the webhook URL into the "Discord Webhook URL" property in Framer.

Security notes (don't skip this)

  • Treat webhook URLs like passwords. Anyone with the URL can post data into your automation.
  • Use https:// webhooks only.
  • Minimize PII — don't ask for phone numbers unless you truly need them.
  • Framer supports signature verification with a secret so you can confirm requests are genuine: Framer webhook docs
  • Add basic anti-spam measures (honeypot field, rate limiting) if you start getting abused.

Part 4 — The faster path (optional): Lead Form plugin

If you want the same result with fewer moving parts, Lead Form is a turnkey option:

  • Multi-step form builder
  • Conditional questions
  • Routing rules
  • Slack + Webhook delivery

Lead Form plugin routing UI

Lead Form on Gumroad ($9/month)

Suggested qualification questions

  1. What best describes you? (Freelancer / Small agency / In-house team / Enterprise)
  2. Approx budget? (Under $5k / $5k–$20k / $20k+ / Not sure)
  3. Timeline? (This month / Next quarter / Just exploring)
  4. One sentence about the project

Before you publish

✅ 3–5 fields max on the first step

✅ One clear CTA (not "Submit" — be specific)

✅ Mobile-friendly spacing

✅ Slack routing for high-intent leads

✅ Email fallback for everything else

Top comments (0)