Turn Any Web Form into a Voice Form

Quick code example

Want to see how you can easily build a form that supports voice data entry? See our editable Codepen example here. To build something like that yourself, sign up to Speechly and learn from the code or contact us.

Speechly voice forms

Speechly is a tool for building voice user interfaces on any app or platform. It has been used to build VR environments, mobile applications, voice search experiences in eCommerce, warehouses and games.

Now one of our users had a web form in eCommerce domain that required a lot of clicking through and selecting. You know these forms that ask for date, category, gender, location, rating, job title, country, state and what not. Of course all in different input fields.

After you've filled them all you are presented with a captcha that you can never solve and you can't even speak of accessiblity.

Most websites have a HTML form or several forms. The information that needs to be input to these forms needs to be accurate and sometimes these forms need to be filled several times per session. This is the case for instance in search filters and many professional application, such as CRMs.

He had an idea whether that could be replaced by a voice form. And of course it can!

We spent a few hours and built the first demo by using our Browser Client Libraray and we were a bit shocked on how well it worked.

Demo of a voice form

Multimodal Spoken Language Understanding works great for this kind of use case, because seeing the form gives user information on what kind of data they are expected to fill and the real-time feedback gives them information on whether they are being understood correctly. In case of an error, it's easy to correct with either natural language or by editing the form with touch.

Especially on mobile forms with many input forms are not that great to use. Selecting the correct field is hard, autocomplete Javascript libraries often work badly and scrolling through endless list to find your country is not that fun. All these problems are easily solved by voice forms.

Voice also improves accessibility, enables use on-the-go and while driving.

Another example of our voice form solution is a demo for CRM data input. Professional applications are a great use case for voice user interfaces, because there's no need for onboarding and the language used by users is accurate and exact.

In this demo, a sales professional has a typical CRM task of filling information for a prospect. As with most CRMs, they fill email, phone number, sales status and deal value along with some tasks and notes about the last contact they've had.

On the other hand, even if you have never used the form, it's easy to control it by voice. After all, you see the questions on your screen so you already know exactly what information the form needs.

Speechly supports various standard entity types such as dates, phone numbers, product codes and email addresses to make it simple to input often used data types.

And even if you have data that is hard to fill by voice, the user can use voice to fill the parts of the form that are easiest to fill by voice and type the parts that are easier to type. Or if they make a mistake, it can be corrected by clicking and typing.

It also reduces spam automatically. If someone actually filled a part of the form by using voice, you can be pretty sure it's not a bot. This improves accessibility further, because captchas can be very difficult to fill for differently abled people.

The best part is that it requires no breaking changes to your existing form. We used a web form from an airlines website for this demo and still managed to do this in just a few hours. If someone still wants to use your form like they have used to, that's totally fine. It'll just add a new, easier way for filling your forms.

And did I mention it's pretty easy to do? Well it is. You create a configuration with our SAL language and use our client library to map the correct intents and entities to your form and you are good to go. For integrating Speechly to your application, you can refer to this code example.

For best practices on building amazing voice experiences, refer to our Design Guidelines

If you are interested in making your web forms voice-enabled, contact us!

Benefits of a voice form built with Speechly

• Fast to integrate
• Works on any web form
• Full support for web standards
• Users can use natural language to fill the form
• Supports most common data types out of the box: email, dates, phone numbers, product codes etc
• Minimizes spam; if someone uses voice to fill your form, you can safely skip Captchas
• Is multi-modal; user can switch between using touch, typing and voice based on the task