Creating a Web Form Backend With Retool Workflows

Retool Web Development

Retool is awesome. It is my new favorite tool for launching a cloud database (Retool Database) that can be integrated with any website that support webhooks (Retool Workflows) and administered with a custom user interface (Retool Apps). And this doesn’t take into account setting up scheduled automations to move data between the many integrations Retool includes.

These features are the perfect combination for quickly building a cloud-based backend for storing website contact form submissions that doesn’t rely on a paid service. The steps to build this include:

  1. Creating a data resource to store the data. I use Retool Database but this can be a Google Sheet or remote database connection.
  2. Setting up a Retool Workflow that is triggered by a POST request and maps the incoming data to the chosen data resource.
  3. Building a web form and having it POST data to the Workflow endpoint URL.
  4. Creating a Retool App that displays the data and provides additional functionality to end users.

To implement this in a static site built with NextJS, I use the following stack:

  • React Bootstrap for form building
  • Google Cloud Functions endpoint to handle call to Retool Workflow and hide API key

To implement this in a WordPress site, I use the following plugins:

  • Gravity Forms for form building
  • Gravity Forms Webhooks for POSTing data to Retool Workflow

This web form workflow can be extended by connecting Retool to a email service like Sendgrid. I use it to populate email templates dynamically with incoming data to deliver form submission notifications.

In conclusion, Retool has the potential to drastically lower the amount of time it takes to spin up a backend for any web form. I am very eager to see what I can build with it and will share tips and tricks as I discover them.