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 or and they would have been enough most of the time. Google Forms Microsoft Forms 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 or (With both being worth the price in some cases I might add because of their processing capabilities after data collection). Typeform JotForm However, with a little bit of playing around with which is an advanced IDE within Wix and Wix's , 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. Velo custom input elements 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 I did for an with CSR funding from a leading corporate group in India. project NGO 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 on the side of the form (Downloads Box) to these activity access codes which got filtered by the activity selection dropdown. multistate box for sequential access was then implemented by the following method: Access Control 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 selection mechanism within and then making the downloads box display the download link only when required elements were valid. $w('element') Velo 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 app. Wix Multilingual 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 , with the following code: Multilingual API Custom Interactions The is where I have mapped the activities made by the NGO to the prescribed by the in India. curriculum linkages section coursework Central Board of Secondary Education 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 gives you complete freedom in interacting with site elements via JavaScript code. Velo 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 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) MultiStateBox I not only was able to create the custom interaction but also build the backend via a so that the NGO would not have to open the design editor to update content in the curriculum linkages section. Velo Database Collection 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 [ , ], Wix Site Elements APIs [ , , , ], WixWindow [ and APIs]. WixDataQuery WixDataFilter Button Dropdown Text WixDataset Multilingual formFactor This article is part of a writing contest hosted by Hacker Noon in partnership with Wix.

Flow

BUNCH

Funding

Google

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Building a Heritage Trees Registry with Velo

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Building a Heritage Trees Registry with Velo

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps