How to Map a Vine Form to a Third-Party Form
If you have already added the Vine script to your site, then you can attach Vine forms to your already existing non-Vine forms in order to collect required data for tracking. You can, for example, attach a login/registration form to a Vine form and get the user identity for tracking.
To attach a Vine form to an existing non-Vine form on your site:
- Click Forms in the left menu and then click New Form on the Forms page to create a new form for mapping. When creating a form for mapping, please note that only the following fields can be mapped to fields of a non-Vine form :
- In the form settings select Map to existing form. (This will hide all the form settings not supported for mapped forms.)
- From the Use on: list please select the pages where you want the mapping to work:
There is no need to map all the fields of a non-Vine form, so you should map only the fields which data you need in Vine and you can leave the other fields unmapped.
For Vine to be able to identify the non-Vine form you need to provide its CSS selector. If you do not know how to select the form you can always find that by inspecting the form using the developer tools of your browser.
For example, you can inspect the following Chronoform form by right-clicking any field in it and selecting Inspect
That will open a panel with the HTML code of the field your clicked in. You need to browse up the code page and find the first FORM field above and use its ID:
In the sample form above, the form id="contact-form-chrono.start_page" and we will use the id CSS selector as follows:
Please note the important difference between the hash symbol ("#") CSS selector used to target an element by ID and the dot (".") CSS selector used to target elements by their class. If needed, you can find more information in an external article about CSS selectors.
One more related detail for this specific sample form is that you need to use "\." to escape "." as otherwise it will be treated as the start of a class selector.
- All Pages. The form mapping will work on all tracked pages.
- These Pages. You need to specify pages where you want the mapping to work.
- All Pages But. You need to specify pages where you do not want the mapping to work.
You can use the full web address or skip the protocol and domain part. For example, "/registration/" can be used instead of "http://acme.firm/registration/". An empty string can be used to specify the root page. You can use wildcards at the end of web address. For example, "/registration*" can be used to specify all pages which web address (after the domain part) start from "/registration".
Click the +/- to add or remove a page.
For example, the following setting consisting of two page rows will allow form mapping on the root domain page and on any page that starts from "/registration" (after the domain part).
Again, if you do not know the name of the non-Vine form field you can inspect the form field using the developer tools of your browser. For example, in this sample you map the Last Name in your Vine form to the Last name field in the non-Vine form which in HTML has the name of "last_name".
Once you publish a mapped form, you can verify if the mapping works by checking form submits. For each submit of the mapped non-Vine form you should see the corresponding submit record for your Vine form:
Please sign in to leave a comment.