Building Advanced Forms and Custom Interactions with Velo: A How-To Guide

Have you ever done an online survey or ever wanted a custom online form?

Maybe you wanted custom interactions even. Chances are you may have used many free resources such as Google Forms or Microsoft Forms and they would have been enough most of the time.

But there comes a time when you require something more than just a simple flow of questions. Maybe you want custom logic that affects a user's interaction with your form or you want the form to be multilingual by design or both.

I am not saying that the free form tools don't have these in some form or another. I am saying that these functionalities are rudimentary or workarounds in the free tools or paywalled at relatively high prices at the likes of Typeform or JotForm (With both being worth the price in some cases I might add because of their processing capabilities after data collection).

However, with a little bit of playing around with Velo which is an advanced IDE within Wix and Wix's custom input elements, you can make extremely sophisticated forms that can do almost anything you can imagine. That too, at an extremely low cost thanks to the free and otherwise reasonable website hosting plans of Wix.

In addition to advanced forms, you can also create custom interactions on your website using Velo APIs.

I will demonstrate both, an advanced form and custom web interactions, by means of an actual project I did for an NGO with CSR funding from a leading corporate group in India.

Advanced Form:

The custom form was essential because of the requirements of the CSR project. As sequential access was a must for data collection requirements in the sense that no person should be able to download the next activity without having downloaded the previous ones as well.

This form, known as the Activity Downloads Form, controls the free activity downloads by a network of nature educators or anyone for that matter to be in a sequential manner.

This is achieved by a set of random and unique codes (aka. Activity Access Codes) which I generated and mapped to a field in the collection or database table which contains the download links for the various activities.

Then I connected a text field in a hidden state of the multistate box on the side of the form (Downloads Box) to these activity access codes which got filtered by the activity selection dropdown.

Access Control for sequential access was then implemented by the following method:

1. I made it so that when the selected activity was not equal to 1 then a custom validation was set on the input field of the access code.

This validation was set to make the input field invalid if the input was not equal to the text field value in the downloads box (refer to the infographic above and image below).

2. I set conditions for submission of the form by selecting the form submission button using the $w('element') selection mechanism within Velo and then making the downloads box display the download link only when required elements were valid.

Obviously, when you are giving free downloads you won't ask for previous activity feedback or even the sequential access code for the first activity.

This can be seen in the validation being set only for subsequent activities and not the first. Also, note that the access code for subsequent activity is given in the previous activity.

Now, another issue was that the form had to be multilingual. This was relatively easy with Wix Multilingual app.

Except that the dropdown for themes had to be dynamic and only the relevant translations of themes had to be inserted into the dropdown from a database collection. I implemented this using the Multilingual API, with the following code:

Custom Interactions

The curriculum linkages section is where I have mapped the activities made by the NGO to the coursework prescribed by the Central Board of Secondary Education in India.

Now, I could have used a repeater and some drop-downs for the same but I had to ensure that the process is easy to understand and the design clutter-free (although I used the dropdown as well but for the mobile view, more on this later).

This meant having custom interactions to support design freedom. This meant that If I could implement custom logic, I should have been able to have a virtual chalkboard with relevant book chapter numbers displayed as buttons with the selected chapter staying highlighted. Even though this functionality was not available as a ready-made component.

But from the advanced form section, it can be seen that Velo gives you complete freedom in interacting with site elements via JavaScript code.

This functionality of having a full-fledged Integrated Development Environment (IDE) within a drag and drop editor is perhaps why I was able to implement the custom interaction as easily and as fast as I did.

I was able to assign states using a MultiStateBox to connect a bunch of disconnected chapter buttons and influence their color based on user interaction of a click. (Refer to the 3 images below)

I not only was able to create the custom interaction but also build the backend via a Velo Database Collection so that the NGO would not have to open the design editor to update content in the curriculum linkages section.

Instead, all the NGO team has to do is enter data in some tables in the relational database backend, an easy process with substantially lower (almost nil) redundancy.

There was one additional thing left and that was designed for the mobile view. Although the chapter buttons made the desktop view work well, they made the mobile view cluttered.

To solve this, I hide the chapter buttons in the mobile view while revealing a dropdown using the formFactor API which I had hid by default.

I hope this article helped you. Follow the inline references in the article above for more details on the Velo API. The references combined with this article will surely help you build advanced forms and custom interactions using Velo by Wix.

All images used are original.

API Used: WixData [WixDataQuery, WixDataFilter], Wix Site Elements APIs [Button, Dropdown, Text, WixDataset], WixWindow [Multilingual and formFactor APIs].

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix.