Throughout the last couple of months, we’ve been looking into conversational interfaces as the next big revolution, asking ourselves how design is being transformed by things we cannot see, and looking into how different countries approach messaging. Today, we want to take a step closer to the action with a little experiment.

We started by asking ourselves, which interfaces of today might be replaced by conversational interfaces tomorrow?

The web form

We interact with interfaces every day—from cash withdrawal at the ATM to pressing floor buttons in an elevator. However, one of the most common interactions with interfaces are the ones happening when you browse the Internet and fill out web forms.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine. — Wikipedia

Boring web form

Basically, web forms are a means of exchanging information with a web server. Whether you’re searching for content or logging in to your e-mail account or Facebook page, you interact with simple web forms. These have been around since the birth of the Internet, and there’s no doubt that you interact with at least one on the Web every day.

In our opinion, it’s about time someone did something to freshen them up.

Introducing the conversational form

We believe we can do better than the forms we meet around the Web today. So we decided to build an open-source framework for turning web forms into conversations, making it easy for developers and designers to engage with users in a more compelling and conversational way.

Getting started

Getting started is fairly easy. Start by including the script:

<script type="text/javascript" src="https://rawgit.com/space10-community/conversational-form/master/dist/conversational-form.min.js" crossorigin></script>

And then instantiate it either automatically…

<form cf-form-element action="/post">

Or manually…

new cf.ConversationalForm({

formEl: <HTMLFormElement>

});

Or via jQuery…

$("form").conversationalForm();

And boom — your form is now conversational 👍

Injecting personality

We’ve added a few ways of injecting personality into the conversation. One of the simplest ways is to set a custom picture for either the robot or the human:

new cf.ConversationalForm({

formEl: <HTMLFormElement>,

userImage: "http://example.com/user.png"

});

Since variation is part of what makes us human, we’ve included an easy way to add variation to the conversation. Just use the cf-questions tag and separate each variation with a pipe symbol. Like this:

<input cf-questions=”Hi there!|Hello!|Sup?” type=”text”>

The last option is to reuse answers from previous questions: