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
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 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!
Go to the Designer and select the "Settings" tab in the Right Side Panel.
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".
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 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>
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.