99:I[473921,["$7","$8","$9","$a","$b","$c","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$6b","$6f","$8b","$8c","$8d","$73","$8e","$8f","$71","$75","$90","$91","$76","$77","$92","$74","$93"],"PostDetailCard"] 9a:T1f9b,

# ChatFormPro

A conversational form for Framer. Your visitors chat with a friendly bot instead of staring at a long page of fields. Drop it in, paste your Formspree ID, and you're collecting answers in minutes — no code, no plugins, no backend.

---

## Why You'll Like It

- No code, no setup nightmare. Connect Formspree in 30 seconds and you're done.

- Two modes in one component. Use it inline as a section, or as a floating chat widget on the bottom-right of your site.

- Conversations beat forms. Showing one question at a time with a typing-bot rhythm dramatically lifts completion rates compared to traditional multi-step cards.

- Endlessly extensible. Add as many questions as you need, mix input types, branch your messaging — every step is just an item in a list.

- Designer-friendly out of the box. Three visual presets (iMessage, Slack, Minimal) that already look polished. Tweak colors, fonts, and animations to match any brand.

- Works for any backend. Formspree for simple email/dashboard delivery, or your own webhook URL if you want data piped to Zapier, Make, n8n, Notion, Airtable, your CRM, anywhere that accepts a POST.

- Built-in privacy gate. Optional Accept/Decline confirmation step before anything is sent — handy for GDPR, internal forwarding policies, or just being polite.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL. To bring it into Framer:

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page automatically. From there it behaves like any other component — drag it, resize it, and configure it from the right-side property panel.

---

## Setup in 30 Seconds

1. Drop the component on your canvas (see Install above).

2. Open the property panel and replace the sample questions with your own.

3. Go to Submission and pick Formspree.

4. Sign up at https://formspree.io (free tier covers 50/month), create a form, copy the form ID from the URL.

5. Paste the ID into the Formspree ID field.

That's it. Publish and your first submission lands in your inbox.

---

## Two Display Modes

### Inline

The chat fills your component frame. Use it as a contact section, an embedded widget, a hero CTA, or anywhere a static form would live.

### Popup

A floating button (logo, label, or default chat icon) sits at the corner of every page. Click → chat opens. Click again → chat closes. Perfect as a site-wide help/sales widget. The floating button is fully customizable — circle, rounded square, or pill with a text label, your colors, your logo.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — pick a look in one click (iMessage / Slack / Minimal / Custom).

- Steps — your questions, in order. Each one has its own input type and message.

- Submission — where the answers go (Formspree, Webhook, or none for demos), plus the success and error messaging.

- Consent Gate — turn on if you want a final "is this OK to send?" question with Accept and Decline buttons.

- Bot Persona — name, role, avatar, online dot — so the chat has a face.

- Bubble Style — bubble colors, shape, fonts, padding, tail, shadow.

- Avatar — bot avatar size and shape.

- Header — top bar styling.

- Input Field — text input + send button styling.

- Choice Buttons — pill button colors, including selected state for multi-select.

- Animation — typing speed, entrance style, pacing between questions.

- Behavior — auto-focus, submit-on-Enter, progress bar.

- Container — wrapper background, border, radius.

- Popup Mode — floating button shape/size/color/logo/label/position, popup panel size, optional dimmed backdrop.

You don't need to touch most of these. Pick a preset, add your questions, ship.

---

## Question Types

Eight input types, all switchable per step:

- Text / Email / Phone / Number / URL — single-line inputs with the right keyboard on mobile and basic format checks.

- Long Text — a textarea for detailed messages.

- Single Choice — pill buttons. The user taps one and the form auto-advances.

- Multi Choice — toggle buttons. The user selects any number, then taps Send.

Mix and match freely. A typical lead form might be Text → Email → Single Choice (topic) → Multi Choice (interests) → Long Text.

---

## Where Your Data Goes

When the user finishes (and accepts the consent gate, if enabled), the component sends a JSON `POST` request to your endpoint.

### Formspree

Endpoint: `https://formspree.io/f/{your-form-id}`

You only paste the ID. The component handles the rest. Submissions arrive as emails, show up in your Formspree dashboard, and can be exported as CSV.

### Custom Webhook (POST)

Set Send To to Webhook and paste any URL that accepts a `POST` with a JSON body. Useful for:

- Zapier / Make / n8n catch hooks

- Your own server endpoint

- Notion / Airtable / Google Sheets via integration platforms

- Slack incoming webhooks (with light tweaking)

### Payload Shape

Both Formspree and Webhook receive the same structure. Field keys come from each step's Field ID, and the values are whatever the user entered.

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"topic": "New project",

"interests": "Web design, Motion",

"message": "Hi! I'd love to chat about a redesign...",

"_subject": "New chat form submission"

}

```

Notes:

- Multi Choice answers are joined into a single string with the separator you choose (default `", "`).

- The optional `_subject` field is a Formspree convention used as the email subject.

- Headers sent: `Content-Type: application/json`, `Accept: application/json`.

If your endpoint replies with a non-2xx status, the component shows an error message in the chat with a Retry button.

---

## Great For

- Landing-page lead capture and contact forms

- Beta / waitlist signups

- Onboarding quizzes that segment new users

- Job application intake

- Newsletter signup with topic preferences

- GDPR-aware contact forms (turn on the Consent Gate)

- Site-wide help widget (use Popup mode)

---

## A Few Tips

- Keep questions short and conversational — "What should I call you?" beats "Full Name ".

- Mix typing times. A long thoughtful question can use a longer Bot Typing Time, a quick reply can use 0.3s. The pacing is what makes it feel human.

- For Popup mode, leave the FAB on a Master/Page section so it shows on every page.

- Use Multi Choice for "what are you interested in?" style questions — it converts way better than a free-text version.

- Test once with Send To = None before plugging in your real Formspree ID.

---

## Need Help?

If a submission isn't arriving, check that:

- The Formspree ID is just the ID (e.g. `xnqklbpr`), not the full URL.

- Formspree has confirmed your sender email (they email you once after the first submission).

- Your webhook (if using one) responds with a 2xx status.

Everything else works out of the box.

96:[["$","$L99",null,{"post":{"id":"019e2717-7392-795c-87ef-52f39bd8c99e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tXixFGgh5puMdogcHKGi","resolved":true,"title":"ChatFormPro","body":"$9a","bodyJson":null,"introduction":"Turn forms into friendly chats.","slug":"chatformpro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/tXixFGgh5puMdogcHKGi/chatformpro-Dp33WYquZsgBZeqoL2eIyBaSqW2XOM","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-09T05:52:25.406Z","updatedAt":"2026-05-14T13:37:15.055Z","publishedAt":"2026-05-14T15:25:08.882Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://positive-priority-878544.framer.app/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_DtXecUcEPp0tHxBtObWfRLhg8oQS15HMsJS7P3ohvlM","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"ZJiNIUXWYH8zbUK9vf4H","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T15:25:08.882Z","updatedAt":"2026-05-14T15:25:08.882Z","reported":false,"type":"post"}}],"$L9b"]