Form Builder: a platform building journey

To quote Simon Sinek’s book: Start With Why, we will begin telling the story of our platform building journey with the rationale behind it:

Why did we build Form Builder?

Back in 2019, our team - EPT (Experience, Platform and Tools, who manages Site Builder, Blog Builder & Contentful) has received yet another request to build HTML forms. Prior to this, a lot of one-off custom solutions were created (such as SPAs - Single Page Applications) for hosting a simple form.

Instead of turning down that request, which would have certainly resulted in more one-off solutions separately built and maintained, the team took it as an opportunity, to build a platform solution, one that can be used to build customizable forms, and capture, store or route user-submitted data into TELUS approved systems of records.

"A platform is when the economic value of everybody that uses it, exceeds the value of the company that creates it" - Bill Gates (relayed by Chamath Palapithiya)

There are many benefits behind such platform solution, to name a few:

• Security and privacy: data will be flowing into TELUS pre-approved end systems with SBDR (Security By Design Review) taken care of, relieving teams from going through this process. The most generic PIA (Privacy Impact Assessment) will also be handled out of the box for fields such as “name”, “email”, “phone number”. This provides great confidence and convenience for form creators in the security and privacy aspects.

• Reusability & cost saving: instead of expending resources on building separate custom applications, this central platform would greatly reduce the development and maintenance cost via its low-code / no-code integrations.

• Speed to market: similar to Site Builder, the aim was to provide a simple path to production, where content creators would customize their form layout in the Content Management Systems (CMS), the hosting, rendering & data pipeline would be taken care of. Through this, the speed to production shortens from weeks to days.

• Analytics: as the data is now within systems we acknowledge, there will be consolidated analytics capabilities associated with all data collected through our solution.

• Digital standards: leveraging TDS (TELUS Design System), the solution is on brand and accessible. It also incorporates built in caching capabilities to further improve performance.

With substantial benefits identified and a clear goal in mind, we started the building journey. And after months of sweat and tears (slight exaggeration) and hard work, the Form Builder platform has emerged!

Now, the next question you might have is...

What is Form Builder?

We created Form Builder to be a central and application agnostic platform, it's designed to (you guessed it) build HTML / web forms and to deliver user-submitted data into TELUS pre-approved systems of record.

• What do we mean by "central"?

• With this platform solution, our goal is to enable and empower all teams to fulfill their form building needs through a consolidated experience, as this would drastically reduce the duplication of work and costs associated with such work.

• What do we mean by "application-agnostic"?

• It means ANY application can consume Form Builder, there is no business logic tied to the platform itself. This clear separation of concerns allows the platform to maintain its generic nature, for all applications, while still making each form look and feel the same.(we will go into a bit of detail on this in the sections below)

How does Form Builder work?

Form Builder comes in two pieces, the UI which exports a React component through npm module, and the API (or one can say it's a BFF since its only user is the UI) that handles all communication work.

The Form Building experience for users starts in our CMS - Contentful, where they would customize the form, i.e: the fields, the layout, and where form submission data flows. Then the users can pull form-builder-ui (a private npm module visible to TELUS teams) into their React app, where they use the component FormBuilder to point to the form they created in Contentful. From there on, Form Builder will do the rest - rendering and directing submission data to different systems of record via data adapters.

Here's a diagram illustrating the architecture of Form Builder on a more technical level:

On data adapters

One important piece of Form Builder is the concept of data adapter. One can think of this as a "plug-in" to implement the Form Builder core functionality - submitting data, it will incorporate the necessary services in order to transmit data from the Form Builder API layer downstream, eventually towards end systems.

The data adapters available today are:

1. SalesForce

2. TELUS Datalake (via PubSub)

3. Digital Dispatch

And we are looking to add more such as Adobe Campaign and GCP in the near future

How can you use Form Builder?

Ok so the architecture is all cool and stuffs ... but how can I get started using it?

That's a great question, and here are a couple of ways to use it:

1. Within your own application.

As said before, Form Builder is application-agnostic and can be consumed by any (React) app, we will demonstrate it using a create-react-app.

First we need to create the "Form" in Contentful and customize it by adding several fields, then in our create-react-app, import form-builder-ui and add the top level component <FormBuilder> to point to that entry via props. Note: most of the required props associated with Contentful such as entryID, spaceID and environment, can be directly fetched from the Contentful URL. Once the app is running, the rendering is done for you. The flow is illustrated below:

2. Using Site Builder as a wrapper

Here Site Builder IS the application consumer Form Builder and embeds the form in a Block-building manner. To use Form Builder in Site Builder, all one needs to do is to wrap the "Form" content entry (say the one we created above with the create-react-app scenario) under "BlockFormBuilder", which is a Layout grids block.

That's all you need to do to insert a form in your Site Builder page! Not to mention the many benefits associated with this way:

1. No development needed at all

2. No need to have your own Contentful space and Content types created under it to support Form Builder

3. It also allows rendering of any custom Blocks after form submission, say another page built with Layout grids

Closing remarks

At TELUS Digital, we are always looking to ensure our solutions are reusable, scalable, secure and adhering to our digital standards. That is why've built platforms such as Form Builder, allowing teams to cater to their business needs, while aiming to reduce cost, effort and potential technical debts - we build for the future.