Grilled Pixels - Portfolio of Adam RobertsGrilled Pixels • Award winning designer and developer
DesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesigner
DeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloper
PhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographer
React & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & Gatsby
FigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigma
20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years
Noteworthy8th July 2021

Using conversational forms in your Gatsby project

Roundup –

From early learnings replacing a standard form with something conversational, I'll dive a little deeper into the nuts and crannies...

Welcome everyone, today I'll be showing you how to set up conversational forms in Gatsby and giving you some information that you need to know. We'll also take a look at one of the most complicated forms I've ever built and how I got around it.

**Disclaimer: If you're a web developer and haven't yet looked at the JAMStack / Gatsby, then this article isn't yet for you, but will be very useful for you in the future. So don't forget to bookmark it and come back later!

It's not AI • It's not AI •

Everyone, or at least a large percentage of humans find forms time consuming and boring to fill out. A conversational form takes this dry, common interface and turns it into an engaging conversation.

I've made about 8 of them so far, most very simple and a couple that are very complex. 1 in particular which we'll be talking about here.

So as any form goes, you have an input field asking for your name and you reluctantly fill it out. Same with any other type of field. But with a conversational form, you can make your users feel like they're actually being spoken to by you or your brand. In essence it becomes personal, intuitive and gives users an emotional touchpoint... it's all about UX right? In comparison then, the ordinary form is arguably a bad user experience, no matter how much you style it and make it interactive... you can't really beat the personal 'too and fro' that a conversational form gives your user.

What I like about the conversational forms that I build, is the fact that the written dialogue can be designed. We can ask staight forward questions, we can build conditional flows with multiple paths and outcomes or we can make it give the user information before they're asked a question...

As you may or may not be aware, I only build in React now (coming from 20 years of traditional development / Wordpress etc) and building a conversational form couldn't be easier (most of the time).

The conversational form technology comes from an experimental project created by SPACE10 and it's constantly being worked on and improved. In 2020 they released the availability of it being used in many different tech stacks from traditional jquery or vanilla javascript, to react, vue or angular.

One of my original implementations was the vanilla version into React but since the release of the React version, development has been much friendlier. Additionally, with the likes of creating reusable components, the time factor is shortened a fair bit too.

Share this read on social