Introducing Conversational Form 1.0

SPACE10

Tale as old as time, song as long as rhyme: no one likes filling out web forms on the internet.

So about two years ago, SPACE10 decided to reimagine this interface with the introduction of Conversational Form: a tool that turns web forms into conversations—making it easy for developers and designers to engage with people in a more compelling and intuitive way.

What initially started as a digital exploration has now come full circle: Conversational Form is still free and open-sourced—but now it’s updated with new features and ready to be unveiled as Conversational Form 1.0.

Check out Conversational Form 1.0 on Product Hunt here.

Out with the Old

Whether we’re searching for content or logging in to our email account, we fill out web forms every day when we browse the Internet. These web forms have been the status quo for decades—but with a few simple lines of code, they can be transformed into something as natural as a conversation.

Conversational Form 1.0 is an open-source framework, making it easy for developers and designers to turn any web form into a conversation with a single line of code.

In with the New

With Conversational Form 1.0, you can:

  • Turn any web form into a conversation with a single line of code
  • Build fully dynamic conversational experiences using our extensive API
  • Easily customise the conversation to fit your brand using SCSS
  • Browse through examples on integrating Conversational Form with React. Vue and Angular
  • Build conditional flows with multiple paths and outcomes
  • Leverage a new default UI that will make it easier and faster to adapt to your needs
  • Use an improved animation system to make the visual language more fluent and smooth
  • Make it personal with reusable answers and question variations
  • Enjoy smooth functionality on both desktop and mobile

How it Works

Getting started is fairly easy using npm or yarn.

npm install conversational-formyarn add conversational-formimport { ConversationalForm } from ‘conversational-form’;

And then instantiate it either automatically…

<form cf-form action=”/post”>

Or manually…

new ConversationalForm({formEl: <HTMLFormElement>});

And boom—your form is now conversational.

Then Choose Your Theme

When instantiating Conversational Form you can use the ‘theme’ option and one of the following values: light (default), dark, blue, red, green, purple.

Alternatively, you can disable the prebuilt css-theme using the ‘loadExternalStyleSheet’ option and instead build your own using the scss-files included with the project.

Let us know what you think

Conversational Form started as an experiment within Do you speak human?, a SPACE10 project exploring the future of conversational interfaces and AI. We’re curious to know what you think of it! Check us out on Product Hunt and Github to see more.

Conversational Form is licensed under MIT. Development by Jens Søgaard and Felix Nielsen.

Concept + Design by SPACE10.

SPACE10

Written by

SPACE10

A research and design lab on a mission to design a better and more sustainable way of living

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade