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?
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.
Tracking form submissions in Webflow is really simple when you use Nocodelytics.
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.
.png)
So now that we know what we want to track, let's set it up in Nocodelytics.
Now let's go to the dashboard in Nocodelytics and add a new "Form" metric. We'll need the ID of the form we want to track.
How do you find this ID in Webflow? It's simple!
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".
Haven't added your site yet? No problem, just follow the instructions on your dashboard. It's a simple 30 second process!
Once you've saved your metric, you'll see it added to your dashboard.
We've set up the metric for this form and we can immediately start seeing how many people subscribed. Bonus! We can see historical data because this particular button had an ID already.
That's it! (No need to waste time testing if tags are being triggered here.)
When you've set up your metric in Nocodelytics, you'll see a chart like the one below in your dashboard.
Now, every time any user submits the form in your Webflow site, you'll see it visualized in this chart.
Try it yourself! Complete the form and watch the chart below update.
<div class="w-form"><form id="trackConversionsDemoForm" name="email-form" data-name="Email Form" action="#" class="form-2"><input type="email" class="form-input w-input" maxlength="256" name="email-2" data-name="Email 2" placeholder="e.g. Enter a fake email" id="email-2" required=""><input type="submit" value="Join the fake waitlist" data-wait="Please wait..." class="submit-button-6 w-button"></form><div class="w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div>
<canvas id="trackConversionsChart" width="1000" height="600"></canvas>
