Before completing this you will need to add the v3 tracking script to your site.
In most cases your form can be located and mapped via the platform automatically but in certain cases the form will not be automatically located for various reasons.
In these cases when trying to find the form using add external form section you will see the following 'No forms found on the page' or potentially some forms but not the ones you wish to capture.
In this example the form will need to be manually mapped - this will require some steps:
1. Finding the forms CSS selector
2. Adding the forms fields
3. Finding the Input/ fields name attribute
4. Mapping your fields to Force24 fields
Finding the forms CSS selector
To find this you will need to open the page the form resides on (for this example we are using https://landing-support.force24.co.uk/ninja-forms-test/) and right click on the form (usually best to do this on the first input of the form) and then click inspect you will then be shown a window of the HTML of your webpage which will look something like below.
From this we will need to find the <form> element
In this example you can see the form element has no attributes to target it (ID, Class). In this case (Ninja Forms - A Wordpress plugin) the unique ID of the form resides on a <div> element before the <form> element so we will need to use this to target the form.
Ideally you always want to use an ID attribute to do this as it will be unique to this form and will enable the same form to be captured across your website.
So in this case to target the form we will need the following CSS selector :
#nf-form-1-cont form
With the '#' standing for ID. If it was a class you were targeting you would use '.' (full stop).
The 'nf-form-1-cont' is the id's value
And the 'form' being the form nested inside the element with the ID.
We can now use this CSS selector to successfully target this form on any page on your site it resides
Adding the forms fields
With the CSS selector set and the other inputs filled in the platform you can move on to mapping the fields
When seeing this screen the first thing you need to do is click the Add below 'Available fields'
You will then be presented with two boxes to fill out:
Name - This is the name attribute on the input you wish to capture
Display Name - This can be anything you want but should be something related to the input you are capturing.
Finding the Input/ fields name attribute
To find the fields name attribute you will again need to open the webpage of the form in question then right click on the field you wish to capture and click 'Inspect' this will then show you the HTML for this field such as below
In this example we can see that this inputs name attribute is set to 'nf-field-1' so this is what we will need to put in the name section in the platform.
We can also set the display name at this point and click 'Add'. You can also add Validation which will check if the data submitted by the form hits certain criteria such as is a phone number, an email address etc... and also make it required for the data to be added to the platform.
Once added you can repeat this process for all the other fields you wish to capture.
Mapping your fields to Force24 fields
Now all you fields have been added you can then map them to their relevant Force24 fields.
Simply click the + icon in the Mapping > Form Field section, this will give you a drop down of the fields you added in the previous section. Click on the field you wish to map and it will be added to this section then click the drop in Force24 Field to associate this field with the relevant Force24 field.
Complete this for all the fields you have added and you will then just need to click create:
Repeat this process for all the forms you wish to capture and then click Push changes to set the form capture(s) live.
You can now if you wish go to your site and submit your form and you should see it added (can take a few minutes) to the submission count in the forms section.
If you need any help please do not hesitate to contact us via the Chat function on your Force24 Platform.