Advanced form configuration allows you to collect data only from specific forms, and gives you the ability to configure forms where the submit action is not triggered, or in cases where the forms are dynamic. This method is more flexible, as it allows you to manually configure the capture of any forms on your website.
Activating the integration
To proceed with the setup, select the section "App Marketplace" — "CMS/Site builders" — "Forms on your site".
When setting up the forms for the first time, select the option: “Advanced configuration (connect each form separately)”:
If you have already set up a different type of integration previously, then you need to switch to this:
Make sure to confirm the integration switch by clicking on "Yes" (this way the simple form setup will stop working, and you will need to set up all forms separately when using the advanced method):
Setting up a form in the advanced mode consists of 6 main steps:
Form title
You can enter any name here, it's best to enter the name of the form or the page where the form is located. For example, the form is located in the header of the website on the home page.
You can name this form (for example) "Start now — header main". This way, it's clear that the form is located in the header on the home page, and the name of the form itself.
Pages on which the form appears
If you want only certain forms to be tracked, then add a list of pages where the integration will activate tracking for this form.
By default, in this field the regular expression - * (asterisk) is set, which means that the search for the form occurs on all pages of the website.
Form submit button XPath
In this field, you need to specify the path to the button that is responsible for submitting the form. Similar to the XPath settings in a script — there is an option to choose searching for the element by id, class, text (in which case the integration will generate the XPath itself) or to choose manual mode and enter the final XPath manually.
-The button's ID can be found in the website code;
-The button can be of type "button" as well as a simple "input";
-The button may not have a submit action;
-The XPath (path to the element) must be created similarly to XPaths for the insertion, the main difference being that instead of single quotes, there should be double quotes, so the XPath will look like not like this //ul[@id='new_list'], but //ul[@id="new_list"].
-The XPath must be 100% unique for the element on the page, if there are two or more identical forms on your page, you will need to make adjustments to the button code on your side to make the form unique.
Form Checkboxes
The form appears on the site dynamically — you need to check this, when the form is not embedded in the source website code and appears on the site by event
IMPORTANT! This works only in conjunction with "observeDOM": true (section Call Tracking - Script Settings)
Manually send form data to Ringostat — This configuration option is for advanced users. In cases where the standard settings do not allow the integration to work correctly with forms, the client's website developer needs to make changes to the code.
In order to enable the collection of data from the forms, the developer of your website will need to include the following code implementation in their codebase:
window.ringostatAPI.sendFormDataToRingostat('form_id', e);
Where:
-'form_id' — you can find this on the page with the list of forms:
-e — this is the event object that is available for each button and input. In 99% of cases, you can just write "e". In the remaining cases, instead of "e" you can write "event".
IMPORTANT! Without modifications from the developer of your website, the tracking will NOT be activated.
Where exactly to include this code is decided by the developer. It is important that the code runs after all form events, but before the form is submitted or navigates to another page.
Form actions configuration
In this section, you can configure additional actions to be performed after the form is filled out. If no options are selected here, the integration will only transfer the form data to the CRM.
Callback the client after sending the form — this option allows initiating a callback call to the client immediately after the client fills out the form on the website.
Callback client's number only during project's working hours — the system will initiate the callback during business hours. This checkbox serves as an additional setting for the previous option, i.e. you cannot simply check "Callback client's number only during project's working hours" without first activating the "Callback the client after sending the form" checkbox.
Reload the page after sending form — this allows reloading the page after the form is submitted. This can be used, for example, to show the user that something happened after they filled out and submitted the form (for example, a message saying "form submitted successfully" appears, and the form is sent).
Form fields which will be sent to Ringostat
In this section, you will need to set up the list of fields that you would like to receive data from in the CRM.
1. From the dropdown list, you need to select the field type (First name, Last name, Patronymic, Full Name, Phone, Email, Other).
When setting up the form, you can only add fields of each of these types once. In other words, you can add fields like Name, Last name, and so on simultaneously, but you can only have one Name field, one Last name field, etc., within one form.
The "Other" field type allows you to create up to 10 fields of this type for one form. This means you can create 10 fields with the "Other" type if you need to transfer data not only from standard fields but also, for example, from the Comments field or any other custom fields you have.
Additionally, you can choose to mark fields such as Name, Last name, Patronymic, Full Name, Email, Phone, and Other as "Required". If a user doesn't fill in a required field, the integration will highlight it in red and won't let them submit the form.
Additionally, for the Phone and Email fields, you can enable validation.
This means that for the Phone field, a plugin for validating phone numbers (similar to the one used in our Callback feature) will be activated, and a country code dropdown will be provided for the client to select from.
For the Email field with this setup, when the client fills out the field, the integration will check if the email they entered is valid.
2. Next, you need to specify the path to the form field. Just like how we specified XPath for the form submission button, we'll do the same for this field.
The form setup is complete, and it will be displayed like this:
The following step involves additional form configuration and integration check