Development and transfer of the complex form, optimization for google page speed, rejection of jQuery technology

As it is said in the title, in common words the job can be described as follows:

  • Development and transfer of the form to the domain of the main site
  • Optimization for google page speed
  • Rejection of jQuery technology

After we did the initial development of the project, the work for enhancements is keep on going. Client came to us with several quite interesting tasks. The essence of the whole form is that users from all over the world choose a convenient day and time to book a call with a service representative. For the convenience of choosing the time, there is a list of time zones, the value of which is automatically substituted, depending on the geolocation of the visitor.

The first task was related to the global update of the list of time zones. There are too many of them for the average user. Indeed, in fact, there are not 24, but much more. There are time zones, with an offset of 15 minutes, 20, 30. This is not a frequent occurrence, but it happens. And the moment.js library, which was responsible for building this list, calculating the timing for each time zone and subsequent calculations, handled it well. But all this looked too complicated, and even, probably, untidy.

The client sent a list of time zones that he wants to see on the site and the names that need to be assigned to them. The names, it should be noted, partly differed from the real names of the time zones. This was done in favor of the convenience of the visitors.

I realized that moment.js, no matter how convenient it is, should be abandoned, since the work is going in a more customized direction.

We need to create our own base of time zones, set the necessary parameters for them, such as the offset from UTC, the official name of the time zone, the official ISO character code and a couple of others for internal technical use.

Since everything is based on Bitrix24 CRM, without thinking twice, I created a highload infoblock, entered all the necessary information there and brought this case to the front-end in the form the client wanted.

It looked, of course, good, but it did not work as we would like yet. I had to refactor a lot of code both in js, which collects and slightly processes the data of the entire form, and on the server, where the same form is sent.


Very important note, that originally the form was developed elsewhere on another domain, and client wanted to use this source and move and make it work on this wordpress site which we previously developed.
Here, the fun has begun on the server. As I was able to find out, the previous developers left several bugs, due to which the requests for calls, which should be displayed on the site as “booked” time, were displayed in reverse order. For example, the range of free hours starts at 10 am and ends at 11 pm. And if you select the time 10 am, then after the automatic processing of the application, it will be displayed as 11 pm, that is, from the end.

The difficulty of debugging was only aggravated by the fact that in part, the time is displayed in the American twelve-hour format. And this is often confusing.

Also, in CRM, from previous developers, there are several separate fields for the date of the call, the time of the call, the date and time of the call, and all this separately for each time, “our” time and the time of the client. Personally, it seems to me that this is difficult and unnecessary. You can leave only for the field, date and time in both zones. But, if the customer wanted it that way, then he needs it for something.

When I nevertheless figured out where and how all this is counted and entered into the database, and also, which is not unimportant, is again displayed on the site in the form of an already booked time, when everything was developed and checked, a new task came from the customer: the days off should be inactive to reserve the call time.

To be honest, along with the usual tasks, such as adding a new discount for a group of products, or putting together a new information page, this work looked much more interesting. And it brought me a lot of pleasure to think over and implement this functionality.

When everything had already been completed, the form was correctly submitted, the results were entered into Bitrix24, the leads were created, in general, there was nowhere better, the customer decided to transfer this form to the domain of the main site, which, in principle, is logical.

But, the form was made on Bitrx24, and the main site is on WordPress. And to combine these two CMS on the same server and on the same domain is not so easy, and even unreasonable. It turned out to be faster and easier to recreate the frontend of this form on WordPress, and send its results to Bitrix.

The transfer itself was successful and did not take much time, but at the same time, the customer asked to optimize the form for google page speed.

Basically, our team did the page speed optimization many times and it shouldn’t be a problem. But, due to the complexity of the form, because in addition to choosing the date and time, there are many solutions there, such as custom inputs, sliders, select. And absolutely everything was done using ready-made jQuery libraries. And jQuery and the abundance of connected libraries is definitely not a favorable scenario for site optimization.

In a couple of days and in a few people, we managed to completely abandon jQuery, rewrite everything in pure javascript, optimize styles, optimize scripts and achieve good performance in speed.

The site was already up and running, everything seemed to be going well, but one day the client sent a comment that after the user submits the form, a link to ZOOM, which was previously created, is not created on the CRM side. Previously, this worked well, and no one crawled into this part of the code, because there were no comments on it.

After spending, probably, about an hour, we managed to understand that the link was generated by one of the Bitrix modules, which was configured through the Bitrix24 business processes, and it stopped working simultaneously with the end of the paid license support period.

The customer had a choice. Or renew the license, or rewrite the method of generating the zoom conference.

I did not often work with Bitrix24 business processes development, therefore, such work seemed interesting to me too. Quickly enough, I found the place where the link to zoom was generated, carefully all the automation “robots” responsible for zoom were taken out of the stream, and I started integrating with zoom directly through their API.

There is nothing difficult here. There weren’t even any “extraordinary” situations. Everything was done and tested in the shortest possible time and launched live.

So far, the site is live, it brings profit to the customer, and I feel satisfaction from a job well done.

This job can be categorised as custom wordpress development.

CONTACTS

Do you want to ask us about anything?

If you’re searching for talented tech minds who are dedicated to their work, we are a perfect fit. We are a cool software development company.