How to easily track subscribers and signups in Webflow

How to easily track subscribers and signups in Webflow

Want to know a simple way to see how many people are subscribing to your newsletter or signing up for your site?
Sarwech Shar
Sarwech Shar

Why track form submissions in Webflow?

Forms are a great way to capture interest and Webflow makes it really simple to add forms into your site.

Firstly, let's go over some of the things you can do with forms on your site.

What can users do with a form on your Webflow site?

  • Subscribe to newsletter
  • Sign up to a membership
  • Purchase products from a store
  • Send feedback
  • Provide additional (qualifying) information
  • Get a quote for a service
  • Use it as a contact form

You can use forms as part of the core user journey (for example subscribing to a newsletter) or to help you streamline tasks (such as the contact form).

So why is it useful to track forms?

By tracking form submissions, you can understand how people user your site. Then you can use that information to find ways to improve conversion and even make changes that benefit the user experience.

For example, if you run a newsletter your goal for when people land on your website is going to be to get them to subscribe. By tracking the subscription form, you can see how many users actually subscribe over a period of time. Then you can find ways to help people subscribe more easily or more clearly demonstrate the value of subscribing.

Another example is with tracking membership signups. The goal here is quite similar except you want people to sign up so they can get access to special content for members (or be part of a community). If you're making changes without tracking how it affects signups, you won't know if what you're doing is having a positive impact on conversion or not.

How to track form submissions in Webflow

Tracking form submissions in Webflow is really simple when you use Nocodelytics.

1. Decide what you want to track

To start with, think of an important form on your site that you want to track. It might be a newsletter form, a signup form or something else entirely. Once you know which form you want to track, it's time to track it.

Let's run through an example.

In this case, we have this website which is a directory of space startups. In the hero section, there's a newsletter form for people who want to subscribe. Although the main content is the directory and interviews that exist on the site, the newsletter is also an important way to share this content.

Let's track this form so we can how many people subscribe to the newsletter.

So now that we know what we want to track, let's set it up in Nocodelytics.

2. Track the form in Nocodelytics

Now let's go to the dashboard in Nocodelytics, click "New metric" and select the "Form" metric option. We'll need the ID of the form we want to track.

How do you find this ID in Webflow? It's simple!

  1. Go to the Designer and select the "Settings" tab in the Right Side Panel.
  2. Below "Form Settings" you'll see an ID field. Copy this field.

If you don't see any value in the ID field, this means an ID does not exist yet. No problem! Just enter a new ID here. Use something that is both unique and descriptive.

Give your new metric a name so you know what it's for then hit "Save to dashboard".

Haven't added your site yet? No problem, just follow the instructions on your dashboard. It's a simple 30 second process!

3. See results

Once you've saved your metric, you'll see it added to your dashboard.

We've set up the metric for this form! Bonus: because this form already had an ID and was being tracked by Nocodelytics, we can immediately start seeing how many people viewed, interacted and submitted the form.

That's it! (No need to waste time testing if tags are being triggered here.)

More from the Blog

Thumbnail for blog post

What is Webflow University and why should you use it?

Learn all about what Webflow University is and how it helps you make beautiful websites.

Read Story
Thumbnail for blog post

How to build live search (autocomplete) in Webflow

Build a search with autocomplete (Google style) using Webflow and Jetboost.

Read Story
Thumbnail for blog post

An update on the new and improved version of Nocodelytics

Why we decided to rebuild Nocodelytics and a sneak peak at the new version!

Read Story

Follow along.

Get new tutorials, tips and monthly product updates sent to your inbox.
We will never share your email address with third parties.