Home/Form fields/Progress Bar

Progress Bar for Framer forms

Live completion bar for Framer forms

Show visitors how much of your native Framer form is done, such as "60% complete", as a bar or steps that fill up live as they answer.

Count required fields or all fields. Hidden fields, spam traps and fields hidden by Conditional Fields are left out.

Available right now inside FramerSend Fields (our all-in-one Marketplace plugin). Free for 14 days, no card, then from $5/month.

Show how far along they are

What your form receives

Nothing extra: your form receives exactly the same fields as before.

Example submission
{
  "Name": "Amelia Hart",
  "Email": "amelia@studio.co"
}

How it works

No code, right inside Framer

1

Select your form

Select your Form on the Framer canvas.

2

Insert the field

Open Progress Bar and click Insert progress bar. It is added at the top of the form.

3

Set it up

In the right panel, pick required or all fields and bar or steps.

Add it in one click
Counts only what visitors can fill in

Options

  • Required fields or all fields
  • Bar or steps
  • Text such as {percent}% complete
  • Sticky at the top
  • Whole form or the current Multi-Step step
  • Colors, height and font

Written into your project as a code component. No external scripts, no network requests on your site.

Frequently asked questions

Does it work with Multi-Step Form?

Yes. Show the progress of the whole form or of the current step.

Which fields count?

Required fields by default, or all visible fields. Fields hidden by Conditional Fields, hidden inputs and spam traps never count.

Does it slow down my site?

The field is a code component written into your project. It loads no external scripts and makes no network requests on your site.

How much does Progress Bar cost?

Progress Bar is included in every FramerSend plan, together with the other field plugins and every connector. It is free for 14 days with no card, then from $5/month, $39/year or $89 one-time.

How do I sign in to the plugin?

With your FramerSend account. The plugin opens framersend.com/plugin/connect, you approve, and it signs in by itself.