Form Integration
AutoID created a way for clients to code to our solution within their custom forms so that we can report on their form activity within our platform.
AI Form Info
The ai script has had to deal with scraping form data from web sites that confirm to no specific standard even within the same domain. While there is still a lot of domain specific form data within the ai script, there is newer catch all code that contains a lot of the logic to pull form data using multiple techniques.
We are now in a position where customers can start coding to our standards which will simplify capturing form data when the customers use our expected class names in their form elements.
Form name
Autoid requires a form to have a name for reporting purposes. If no name is found for the form, the script will not capture form data. The ai script currently looks for a form name using multiple techniques. By adding a specific data attribute to the form element, the ai script can find the form name in an expected manner.
<form data-autoid-form-name="my_form_name">
The form name is displayed in the autoid reporting dashboard for the end user to help them understand/see which forms are being submitted by visitors. If a form name cannot be located, the script gives up on processing form data since it cannot be associated with a specific form.
Form fields
Adding the expected class names to forms simplifies the logic needed by the ai script to capture your form data. Listed here are the input fields the ai script attempts to capture data from upon a form submission:
Input field for the visitor's full name.
Input field for the visitor's first name.
Input field for the visitor's last name.
Input field for the visitor's email address.
Input field for the visitor's phone number.
Text area field for the visitor's comment.
Notes A form is required to have either a full name field or both first and last name fields. A phone number or email address input is required to be added to the form otherwise data is not saved.
Class names for form fields.
Class name autoid-first-name for the input field for the visitor's first name. Class name autoid-last-name for the input field for the visitor's last name. Class name autoid-full-name for the input field for the visitor's full name. Class name autoid-email for the input field for the visitor's email address. Class name autoid-phone for the input field for the visitor's phone number. Class name autoid-comment for the text area field for the visitor's comment.
Examples
Form using autoid class names with first and last name input fields.
<form id="test_form" class="autoid-form" data-autoid-form-name="my_ai_form_name">
<label>First Name</label> <input type="text" class="autoid-first-name" placeholder="Enter your first name"><br/>
<label>LastName</label> <input type="text" class="autoid-last-name" placeholder="Enter your last name"><br/>
<label>Email Address</label> <input type="text" class="autoid-email" placeholder="Enter your email address"><br/>
<label>Phone Number</label> <input type="text" class="autoid-phone" placeholder="Enter your phone number"><br/>
<label>Comment</label> <textarea class="autoid-comment" placeholder="Enter your comment"></textarea>
<input type="submit" value="Submit">
</form>
Upon form submission, in the autoid dashboard, you will see this form data in the WebForm Details report. The form name will display the value found in the data-autoid-form-name attribute.
Form using autoid class names with a full name input field.
<form data-autoid-form-name="my_ai_form_name_full_name"> <label>Full Name</label> <input type="text" class="autoid-full-name" placeholder="Enter your full name"><br/>
<label>Email Address</label> <input type="text" class="autoid-email" placeholder="Enter your email address"><br/>
<label>Phone Number</label> <input type="text" class="autoid-phone" placeholder="Enter your phone number"><br/>
<label>Comment</label> <textarea class="autoid-comment" placeholder="Enter your comment"></textarea>
<input type="submit" value="Submit">
</form>
Upon form submission, in the autoid dashboard, you will see this form data in the WebForm Details report. The form name will display the value found in the data-autoid-form-name attribute.
Last updated