HGV Recruitment Centre – Dynamic JavaScript Maps

Let us help you grow your business through the web

 

Complex eform with requirement for dynamic population of fields from Google Maps based on UI, but delivered to make it as easy as possible for the user.

The solution consists of 2 contact forms. The process is 2 step. The first step is for the user to confirm if they're an employer or a driver. In the screenshot above the user as confirmed they're a driver and so the standard contact form is presented.
This contact form does not require interaction with the map. If the user confirms they're an employer, step 2 will involve the user selecting a driver from the map that is relevant to them, by clicking or tapping on a map pointer. The resulting driver details are then copied into the applicable eform fields.
The driver then only has to populate the remaining fields. Thus mitigating against risks of user frustration, typos, inputting incorrect details and the process of landing on the page to submitting the form is much quicker.  This also minimises avoidable contact.
This is the contact form that employers see. Clicking on a map pointer in a map on the left will populate the customer number, the driver's first name, the test date booked on, and license type, into the eform on the left. Benefits can be noticed for both user and the client in terms of quicker contact time, reduced frustration and more likelihood of the user actually submitted the form. SEO benefits were also realised with lower bounce rate and higher Google Tag Manager goal completion.
 

Challenge

The main challenge with this project was to dynamic populate the applicable contact form entries with the relevant Google Maps marker pointers - as initiated by the user.

Solution

This was achieved using client-side JavaScript. One of the benefits of this is a better user experience, meaning that user interaction can change another element of the web page with no requirement for the web page to be completely refreshed. The requirements are complex but needed a simple solution that users would find easy to use. The user chooses whether to fill out the form as an driver or employer. The driver form is standard where they need to fill out the fields but the employer form is dynamic content driven where they populate some of the fields from one of the maps to the left hand side when on larger screens. On mobile screens map and contact form placement was much more challenging due to limited screen "real estate" - testing showed that placing map above contact form was more usable than below.

Results

Separating employer and driver contact forms and providing the step by step instruction to form usage meant that the user knows how the eform should work almost instantly. It's very easy to use and straightforward, which has resulted in more targeted enquiries using this communication channel. There's noticeably less need for avoidable contact with the user - i.e. less clarification contact is required. With SSL and HTTPS setup on the website, security and GDPR compliance for the eform is improved.

0.09% CTR

20% less CPA

110% ROI

From the client

This is our second successful project with Michael Greenwood and Internet Marketing Platinum Ltd. We're really pleased with the results and how our requirements have been realised. Happy to pass more work your way.