Hopinfotech Order Form

Hopinfotech is a business that was set up in 2020 to resell cybersecurity and backup products in South Africa after signing up as a vendor with Acronis International.

Acronis International GmbH, simply referred to as Acronis, is a Swiss technology company with its corporate headquarters in Schaffhausen, Switzerland and global headquarters in Singapore.

Hopinfotech's customers are primarily medium to large companies looking to safeguard their intellectual property and sensitive information on their corporate platforms.

Hopinfotech already had a website which was a work in progress, but they were looking for the creation of an order form to help them drive more sales.

The form should allow a user to select a package and then tailor the number of individual specific units within that package depending on what their business needs are.

The order form should also generate a cost estimate in real-time and display that to the customer as a summarised total before they submit the form.

Hopinfotech was a zero budget project, so we had to find the path of absolute least resistance to get it done.

Cost structures of Acronis products is complex, especially when chaining them together into a package which will make running calculations in the form's backend tricky and computationally expensive.

There are a high number of options and having all of them on the same form would render it intimidating and unapproachable.

We leveraged a very powerful and well known contributed module called Webform for Drupal to do most of the heavy lifting and save us a lot of time.

To conceal most of the options, we created a series of collapsible field sets that a user could expand and close as they were progressing through the form.

At first we were thinking a multi-step form would do the trick, and it probably would have too, but the client wanted the whole form visible at once.

We added a compute field to the form and then set up a series of 12 mathematical equations that will run in the background as the user interacts with the form and inputs data through the various radio buttons, checkboxes and range sliders.

With a total of 12 radio buttons, 12 range sliders, a checkbox, three user personal detail fields and supporting information on how to use each section, and an intro, the form only measures ~900px in height. The form is also 100% responsive and works great on mobile too.

The form functions extremely well and displays the cost estimate with immediate updates as the inputs are being interacted with.

It was launched on the live site and the client was very happy, mentioning that it has helped to increase their sales.