Optimising web forms is crucial for improving user experience and increasing conversion rates. While Zoho CRM Webforms do not currently offer built-in functionality for pre-filling fields dynamically, we can enhance Zoho crm webforms by modifying the supplied code.
This article will explore three powerful techniques to achieve this by using URL parameters, adding IP address geolocation and Browser/Device geolocation. We'll dive into the code and explain how each method works, along with their pros and cons, providing you with custom solutions to implement in your Zoho CRM Webforms.
Getting the webform code
In Zoho CRM head to Settings > Channels > Webforms
Click on elipsis (...) next to the webform you want to enhance
Click Publish Options
Ensure Publishing Format is source code and click copy
You can open this code inside a text editor to modify it.
1. Pre filling Webforms with URL Parameters
URL parameters are a simple yet effective way to pass information to your web form. This method is particularly useful when you want to pre-populate fields based on data from external sources or previous user interactions.
It starts with locating the field HTML element IDs within the webform. Most of the Zoho CRM system created fields have the ID that matches the API Name however if you have custom fields in the webform they will have a different ID.
In this below example snippet from the Zoho CRM Webform we are wanting to locate the id attribute within the HTML for the fields we want to pre-fill.
Country (System field) has the id of "Country"
Product (Custom field) has the id of "LEADCF8"
Adding to your Zoho CRM provided webform code.
At the bottom of your webform code just before the closing script tag </script> we want to add in the following code snippet that incorporates two functions. One that will perform the pre-filling action and another that will trigger when the window is loaded to call the function to pre-fill the fields.
Inside the code you can update the paramToFieldMap object with what the parameter is and the ID of the field you are searching for in the form. e.g. In the example we have "source" and "Lead_Source".
In the example URL above the Lead Source field will be pre-filled with "Website" and the Product field will be pre-filled with "Product Code".
Pros:
Easy to implement and customise
Works well with marketing campaigns and external links
No additional API calls required
Cons:
Limited to information that can be passed through the URL
URL parameters are visible to the user, which may not be suitable for sensitive information
2. Pre-filling Country based on IP Address
Now that we know how to pre-fill the field values we can expand this to learning more about the user submitting the form. One that always comes to mind is location, where is the user submitting the form located.
By using a free location api service Free IP API service (https://freeipapi.com/) we can get the country or other location data such as State and Postcode based on their IP address.
Using the below code snippet and installing the same way as the above pre-filling function we can pre-fill the country field.
Pros:
No user interaction required
Generally accurate at the country level
No browser permissions needed
Cons:
Less accurate than Browser geolocation API
May not be accurate if the user is using a VPN
3. Pre-filling Country based on browser geolocation
For more accurate location data, you can use the browser's Geolocation API to get the user's browser geolocation and then reverse geocode them to determine the country. The browser geolocation uses an array of sources such as IP, Cell Tower Triangulation, Wifi-Positioning and Bluetooth Beacons/Signals to provide a highly accurate location especial if the user is using a mobile device!
We can then use the free Open Street Map reverse geocode API to get address based on the Latitude and Longitude returned.
When using the Geolocation API in a browser it will popup and ask the user if they give permission for your website to access your location.
Pros:
More accurate location data
Can provide more detailed location information if needed such as street, city & state.
Cons:
Requires user permission, which may be declined
May take longer to retrieve the location
Bonus: Combining Location Methods
For the best user experience, you can combine these methods. Start with the IP-based location and then attempt to refine it with the browser geolocation data if the user allows it.
Here's an updated function that implements this approach.
This combined approach ensures that you always have some location data (from the IP address) while still providing the option for more accurate geolocation based location if the user allows it.
Important Note
If you are combining the Pre-fill via URL Parameters and Country location functions into your CRM Webform code you only need to include a single function to trigger both of these functions on loading of the page by adding the function name like below. Also ensure that this function is at the bottom of the webform code right before the closing script tag </script>.
window.onload = function () {
prefillUrlParams();
setCountryBasedOnLocation();
};Summary
By implementing these techniques into your webforms you can create smarter, more user-friendly forms that reduce friction and boost conversions as fields that are pre-filled can be hidden from the user.
Whether you find these implementations too technical or you're looking for a bespoke form enhancement tailored to your specific requirements, our team of experts is ready to assist. Contact us and we can help you implement these solutions or create custom enhancements that perfectly align with your business processes and user experience goals.
Comentários