Quickstart

Before you start

Nothing to install. AnimationFunnel runs entirely in the browser — no CLI, no SDK, no server to configure to get your first form online. You will need:

• A modern browser (Chrome, Safari, Firefox, or Edge; updated within the last two years).
• An email address — or a Google account for one-click sign-in.
• 5 minutes of uninterrupted time. Grab a coffee.
• Optional:the URL of a website you'd like to embed the form on, if you plan to do step 9.

No credit card is required. The free plan supports up to 500 submissions per month, unlimited forms, and every feature documented in these docs — including AI scoring (subject to per-workspace cost caps).

Step 1: Create an account

Head to animationfunnel.com/register and sign up with email or Google. Google sign-in is recommended — it skips email verification and gets you into the dashboard instantly.

On first sign-in, you'll be prompted to:

1. Name your first workspace (e.g. Acme Marketing). You can create more workspaces later.
2. Pick your primary use case (lead capture, customer feedback, application forms, other). This pre-populates the template gallery with relevant starting points — you can skip it if you prefer to start from scratch.
3. Optionally invite teammates by email. Skip this if you're solo.

You land on the Formsview. It's empty. That's the next step.

Step 2: Create a new form

Click New formin the top-right of the Forms view. You'll see three starting options:

• Blank form — you build every step from scratch. Best when you know exactly what you want.
• Template— starts from a pre-built form (lead capture, NPS, contact, patient intake, etc.) which you then customize. Fastest path to "something reasonable".
• AI generate— describe your form in plain language ("Customer satisfaction survey with NPS and three follow-up questions based on the NPS score") and AnimationFunnel scaffolds it for you via the OpenRouter integration.

For this quickstart, pick the Lead capture template. It ships with four steps (contact info, company details, timeline, thank-you) and gets you to something real-world quickly.

Step 3: Add fields

The editor opens with the template's fields already on the canvas. You'll see three panels:

• Left— the field library, grouped by category (basic, choice, date & time, rating, advanced).
• Center — a live render of the current step. Click any field to select it. Drag to reorder.
• Right — the inspector, showing settings for the selected field or the step itself when nothing is selected.

Edit the template's fields by clicking each one. The inspector lets you change:

• Label — the visible question. Click the question on the canvas to edit inline.
• Key — the stable identifier used in logic, webhooks, and exports (e.g. email, team_size). Default is generated from the label; override for predictability.
• Required — toggle. Required fields block step advance until filled.
• Help text— secondary copy rendered below the label. Use it for hints ("we'll never share this") or format guidance.
• Validation — type-specific rules (email format, min/max length, regex for ZIP codes, accepted file types).
• Default value — pre-fills the field. Overridable via URL parameters for prefill campaigns.

Drag a field from the left library onto the canvas to add a new one. To insert between two existing fields, hover between them — an insertion indicator appears.

The most common fields for a first form

If you're building from scratch instead of a template, these five field types cover 80% of forms in the wild:

1. Short text — for names, company names, job titles.
2. Email — with built-in RFC validation.
3. Phone — with country-code selector and format validation.
4. Dropdown / Multiple choice — for anything with a finite answer set (industry, role, budget band).
5. Long text — for free-form descriptions. Use sparingly — every long-text field is a step where visitors drop off.

Step 4: Configure the form

Before logic and publishing, take 30 seconds to configure the form itself. Open the Settingstab in the editor's top bar:

• Name & slug — rename the form to something descriptive (Lead capture — paid search) and pick a URL-friendly slug (paid-search-lead).
• Language — the canonical language. Add translations now or later.
• Notifications — your email for real-time notifications, or turn on a daily digest.
• Theme (Design tab) — accent color, button radius, background. Match your brand.

Step 5: Add conditional logic

Conditional logic makes the form responsive to what the visitor has already answered — a hallmark of high-converting funnels. Select any field and open the Logic tab in the inspector to add a rule.

A quick example

Say your template asks for company size with options Solo, Small (1–10), Mid-market (10–100), Enterprise (100+). You want enterprise leads to skip straight to a Sales contact step, while smaller leads see a self-serve onboarding step.

# Jump rule on the "company_size" field
when: "company_size = 'Enterprise (100+)'"
action: jump
to:     "sales-contact-step"

All four kinds of logic are available:

• Visibility — show or hide a field based on previous answers.
• Jump — skip to a specific step.
• Calculation — compute a value (score, total, risk) from previous fields.
• Routing — pick which ending screen the visitor lands on.

See the conditional logic guide for the full expression syntax.

Step 6: Add lead scoring (optional)

If this form is lead-gen, take another 60 seconds to wire up scoring. Open Logic → Scoring and add a handful of rules that reflect your ideal customer:

rules:
  - when: "company_size = 'Enterprise (100+)'"
    points: 30
    reason: "Enterprise fit"
  - when: "timeline in ['this month', 'this quarter']"
    points: 20
    reason: "Immediate timeline"
  - when: "email ends_with 'gmail.com'"
    points: -15
    reason: "Personal email"

Three rules is enough for a starter model. You can iterate later — and add AI scoring on top once you have real submissions to replay against.

See the lead scoring guide for the complete setup (rules, AI, hybrid, routing by tier). Skip this step entirely if the form isn't sales-related.

Step 7: Preview

Before publishing, preview the form end-to-end. Click the Preview button in the top-right. A new tab opens with the current draft.

Fill it out as a visitor would. Try every branch:

• Go through once with "Enterprise" to confirm the jump to the sales step works.
• Go through once as a small business to confirm the self-serve path.
• Leave required fields blank and confirm the error messages.
• Submit. Confirm the ending screen you expected shows, with the right copy.

Step 8: Publish

Click Publish in the top bar. The first publish creates version v1 of your form. The share dialog opens showing your live URL:

https://animationfunnel.com/f/paid-search-lead

Anyone with the link can now fill out the form. Ongoing edits go into a new draft; the next publish creates v2, and so on. Old versions remain restorable from the form's Version history tab — rolling back is one click.

You can rename the slug from Settings → Name & slug at any time; old URLs auto-redirect. On Pro+ plans, attach a custom domain (forms.yoursite.com) from the workspace settings.

Step 9: Embed on your site

Click Sharein the editor's top bar and switch to the Embed tab. You get three embed flavors:

• Inline — the form renders directly in the page.
• Popup — opens in a modal on button click.
• Slide-in — slides in from a corner after a delay or scroll trigger.

Inline embed example

<div id="af-form"></div>
<script
  src="https://animationfunnel.com/embed.js"
  data-form="paid-search-lead"
  data-target="#af-form"
  async
></script>

Popup embed example

<button data-af-popup="paid-search-lead">
  Request a demo
</button>
<script
  src="https://animationfunnel.com/embed.js"
  async
></script>

The embed script is ~20 KB gzipped and loads asynchronously, so it never blocks your page render. It honors your site's CSP and doesn't inject any global styles.

Share the hosted link

If you don't want to embed, just share the public URL in email, social, or ads — paste it as-is. The hosted page renders fast, is mobile-optimized, and preserves UTM parameters for attribution.

A QR code is also generated in the Share tab — useful for print, posters, or in-person events.

Step 10: View submissions

As visitors fill out the form, submissions appear in real-time under Dashboard → Forms → your form → Submissions. Each row is clickable; the detail drawer shows everything the product knows about the submission (answers, score, journey, metadata, integration log).

From the submissions view you can:

• Filter by date, completion status, tier, language, UTM.
• Save views ("Hot leads, last 7 days").
• Export to CSV, Excel, JSON, or stream to Google Sheets.
• Bulk re-score, replay integrations, add tags.
• Jump to the analytics view for funnel & scoring charts.

Step 11: Connect an integration

Most real-world forms don't end at the submissions view — they route data somewhere else. Open the Integrations tab inside the form to wire one up. Common first integrations:

Troubleshooting

The Publish button is grayed out

Every form must have at least one field and at least one ending before it can be published. The button tooltip shows what's missing. Fix the error and it enables.

The embed doesn't render on my site

• Check your site's Content Security Policy — it needs to allow script-src https://animationfunnel.com and frame-src https://animationfunnel.com.
• Make sure the <div id="af-form"> exists in the DOM beforethe embed script runs, or the script won't find its mount point.
• Open your browser's console — the embed logs loud errors on failure.

I published but see no submissions

• Make sure you're looking at the Submissions tab, not Preview. Preview submissions are segregated.
• Test the live URL yourself in an incognito window — preview cookies can mask the issue.
• If you have an ad blocker, it may be stopping the submit. Test with extensions disabled.

My integration log shows "failed"

Open the submission detail and check the Integration log tab. Each dispatch shows the request, response, and error. Most failures are auth (incorrect API key), schema (missing required field in Pipedrive), or rate limiting. Fix and click Replay on the dispatch to retry.

What's next?

You have a live form. Here's where to go from here, depending on what you want to build: