How to build a Simple Form using LowCode tool – AppSmith

Introduction:

The LowCode revolution wave is hitting the web development world. Going forward, I predict that LowCode is going to be the default way to do any web development.  In this blog, I am building a web form using a LowCode tool – AppSmith.

A web form is the most basic functionality for any web application.  Asking for user’s input and persisting it in some type of database is the most asked for business need.

Although coding a web form isn’t that difficult – LowCode tools make the process 10x faster.  The speed of web development will finally be at par with the business need! 

In this blog, we are going to learn how to build a simple ‘Contact Us’ form using AppSmith. In the process, we will learn how to connect Appsmith with Google Sheet and send email using SendGrid.

Our ‘Contact Us’ for is simple – it consists of three Input elements – Name, Email and a Message.

Once user submit the form –

  • The Form Entries are stored in a Google SpreadSheet 
  • A notification email is sent via SendGrid.

The Best part about coding this using AppSmith is  — 🥁 drumroll please 🥁 — I didn’t sweat over building the form.  AppSmith is indeed 10x faster than hand coding this form.

AppSmith’s Discord Support channel is awesome if you are stuck. A shout out to AppSmith’s responsive support team!

Here is how the form looks like –

To see this form working live, visit this page

Let us begin with the tutorial –

There are three steps needed to finish up the task

  • Build a Form
  • Code DataSource Actions
  • Embed the form in your WebSite.

Build a “Contact Us” Form using AppSmith

Building the form is the most straightforward part of this tutorial. 

 First, we need to create a new AppSmith application. To create an app, login to AppSmith , then create a new application.

Drag a FormWidget and then drag three Text Input Widget . We don’t need Reset button, so delete the Reset Button. Also, add two pages – One for displaying ThankYou and other for displaying Error.

Define Connections with DataSources:

Save Form Data in Google SpreadSheet Row

Let us connect with Google Spreadsheet Data source and Create an API to create a new Row.

App Smith – Connect with Google SpreadSheet and create a ROW

The json Request to Google SpreadSheet is this.

{
	"Name" : {{InputName.text}},
	"Email": {{InputEmail.text}},
	"Message": {{InputMessage.text}}
}

We are connecting SpreadSheet column ‘Name’ with text inside the InputName, and Email with InputEmail and so on.

Send notification email using SendGrid

Complete onClick Action for Submit Button:

go back to Submit Button and add this code as a action

{{
    send_email.run( () => {
    save_row_in_spreadsheet.run(
        () => {navigateTo('ThankYou',{})},
        () => {navigateTo('ErrorPage', {})}
    )
     }, 
     () => {navigateTo('ErrorPage', {})}

    )
}}

This is a bit of nested code -so bear with me. 

We need perform following

First, Send an email

Then, Save the record in Spreadsheet

If each is completed, we show a success page. If either of them fails, we need to show an error page.

All the actions have following format 

<api-to-call>.run(
 <function to be executed if successful execution of run>,
 <function to call on failure>, 
  <parameters>)

Deploy and Embed AppSmith Form in Your WebSite

Once you are reasonably happy with the form and have tested it. Deploy the application.

I am using WordPress for my Blog – and we are going to embed the AppSmith application inside WordPress blog using WordPress Block Editor’s HTML element. Here is how to ..

Conclusion:

In this tutorial, we learned how to build a simple ‘Contact Us’ form, save entries into Google SpreadSheet and send email using SenGrid.

LowCode tool are future of web development. AppSmith is an amazing tool for Data Driven Applications – CRUD applications are the most ideal candidates Or building proof-of-concepts.

AppSmith isn’t a good choice where fit-and-finish is important. For example, one can’t add custom styles and there isn’t an easier way to build real time (such as chat) applications. 

We learned about creating a simple Contact Us Form,

Now, it is your turn. What will you build? 

Maybe a survey Form or a Request for Quote Form? 

Possibilities are endless!