Getting Started With Form Events
Follow this document to get set up using form events in your application, This feature is still experimental and we are constantly improving the performance
A small example on how to configure
This is a small example on how to setup a click event within your project instance, click bellow to see how to setup:
Start tracking form submissions
This section shows how to set up your form instance. Below you can find a code snippet that you can copy:
Install the client into app
Once successfully Creating a project you can now start with creating your click event to track any button on your site
Possible use cases:
- Allows teams to track form submissions in your app
- Tracks the form back to the origin of campaign/ad/promotion.
- Even though we do not support A/B testing yet, it could also be used for this purpose.
Important Note:
In order to get started make sure You have the initial script mentioned in the introduction and the OSS Client, make sure that both of these scripts are embedded into your app, this will allow you to track way more accurately
We Recommend That:
To ensure accurate tracking and performance attribution, we strongly recommend using URL PARAMETERS in your campaign links. This helps attribute clicks precisely back to the original source. For implementation details, please refer to the tracking parameters guide.
Here are some examples
1<!-- Wordpress, Webflow, Shopify and Framer example -->
2<form
3 id="project-form" <!-- mandatory to reference your form name space to your id -->
4 data-form-namespace="project-form" <!-- mandatory to name your field -->
5 data-form-event-id="YOUR_FORM_ID"
6>
7 <label for="user_email">Email</label>
8 <input
9 type="email"
10 name="user_email" <!-- built in field from flowgrid -->
11 id="user_email" <!-- make sure reference your input name -->
12 required
13 />
14
15 <label for="data_user_message">Message</label>
16 <textarea
17 name="data_user_message" <!-- Flowgrid built in field -->
18 id="data_user_message" <!-- make sure reference your input name -->
19 ></textarea>
20
21 <input
22 type="checkbox"
23 name="agree_to_terms"
24 id="agree_to_terms"
25 />
26 <label for="agree_to_terms">I have read the terms</label>
27
28 <button type="submit">Contact sales</button>
29</form>
30
31 Form properties
data-form-namespace- Initializes the form, it basically tells the flowgrid script that there is a valid form elementdata-form-event-id- This is where you will have to copy and paste you form id, so you can send data to the dashboard and the team can be notifiedname='user_email'- Built in field WE RECOMMEND YOU USE IT to track user emails this field helps you detect spam emails.name='data_user_message'- Built in field that conforms to flowgrid's default form schemaname='agree_to_terms'- This a Custom field, you can use just make sure to use the _ for spacing, for examplename='who_recommended_you'- Flowgrid's custom form event accepts any amount of fields as long as it remains withing the tag
<form></form>
Take Note of:
It is only recommended to use you form ID once, create another instance of the form if needed, this data, cannot be edited too, remember to replace YOUR_FORM_ID with your actual form id
Verify Installation
Within projects dashboard click on event logs, this will navigate you to the dashboard tracking one unified instance. Hit the refresh button in the dashboard to see if data is being collected.