How to Map a Vine Form to a Third-Party Form

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:

1. 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 :


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.

2. In the form settings select Map to existing form. (This will hide all the form settings not supported for mapped forms.)

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.

3. From the Use on: list please select the pages where you want the mapping to work:
• 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.

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).


• All Pages But. You need to specify pages where you do not want the mapping to work.
4. Select and configure the other available form settings.
5. Click OK to close the settings panel.
6. Now you need to map individual form fields to the corresponding fields of your non-Vine form. Click a Vine field you want to map and use Field name to enter the name of the corresponding field in HTML:


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".


7. Map all the other fields you want to map one by one. You can leave some fields unmapped if needed.
8. Click Save for the form and then click Publish if you want to activate the mapping now.

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: