Building Serverless Apps with Form.io + SendGrid

Form.io is a combined form and data management API platform created for developers who are building "Serverless" form-based applications. Form.io provides an easy drag-and-drop form builder workflow, allowing you to build complex forms for enterprise applications quickly and easily. These forms are then embedded directly into your application with a single line of code that dynamically renders the form (using Angular or React) in your app while at the same time generating the RESTful API to support those forms. The Form.io platform also offers numerous 3rd-party services that are fully integrated into the form building process, allowing you to extend the power and capability of your apps while saving time and effort.

Form.io has recently announced the integration of SendGrid’s API into their list of standard “Form Actions”, allowing you to extend your SendGrid email capabilities further into your apps by automatically triggering emails through your SendGrid account when forms are submitted within your application.

Form.io SendGrid integration

This step-by-step guide will show how to set up a SendGrid integration within the Form.io platform.

Create your first Form.io project

To get started, you will first need to create an account at Form.io. Once you have an account, you can quickly bootstrap an already working application by clicking on one of the provided templates on the home screen. These are not simple form templates, but rather fully functional applications complete with Data Resources, Forms, Actions, and User Roles/Permissions. For more on how these items function within Form.io, feel free to read through our User Guide or view our Video Tutorials.

Form.io Home Page

Once you have a project created, you can now view the project live within the Preview tab of the project portal.

Configure your project

Once you have a Form.io project, the next step is to create an API Key within your SendGrid account (under Settings | API Keys). Ensure that the API Key you create has Full Access for the Mail Send permission. Once you have your API Key, go back to your Form.io project and follow these steps.

  1. Click the Project Settings button located at the top right of your screen.
  2. Click the Email Providers tab on the left and then the SendGrid Settings tab.
  3. Input the SendGrid API Key provided to you when the API key was created.
  4. Save your settings.

Form.io SendGrid Settings

Adding an email action

Now that you have your project configured to send emails through SendGrid, the next step is to add an email action to any form within your project. A good use case for this would be to send an email anytime someone registers for your application. To achieve this capability, please follow the following steps.

  1. Click on the Resources tab within your project.
  2. Next, click on the Actions button on the User resource.
  3. Now select the Email action, and then press the + Add Action button.

Add Email Action

  1. Now on the email settings page, select SendGrid for the Transport of the action.
  2. Input a From email address you would like to send the email from.
  3. Input a To email address you would like to send the email to. For this, you can use handlebar notation, such as {{ data.user }}, to access the data from the submission as you see in the following image.
  4. Input a Subject for the message being sent.
  5. Input a Message for the message being sent.

Email Action Settings

  1. Save the action.

With this step complete, every user who registers for this application will receive your email which was sent through the SendGrid platform.

Deploy your serverless application!

Now that your project is configured for SendGrid, you can deploy it in a number of different ways including GitHub Pages, Apache Cordova, Electron, etc. You can also preview your application by clicking on the Preview tab of your project. Since this application is "serverless" it can be hosted in a wide range of places and immediately connect your forms with SendGrid!

Form.io Launch

If you have any questions on the Form.io integration, please feel free to Contact Form.io Support.

Thanks and enjoy SendGrid and Form.io!

Rate this page:

Need some help?

We all do sometimes. Get help now from the Twilio SendGrid Support Team.

Running into a coding hurdle? Lean on the wisdom of the crowd by browsing the SendGrid tag on Stack Overflow or visiting Twilio's Stack Overflow Collective.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif