How To Build A Serverless Contact Form With Digital Ocean Functions

This tutorial walks you through how to create a serverless contact form handler for your static site using Digital Ocean functions.

As part of this setup, we will need a database, for the price of a managed database on Digital Ocean you can get a fully managed server. Setting one up defeats the purpose of a serverless setup. So for our contact data storage, we will be using Github Gists


👉 Step 1: Creating a Digital Ocean function

setting-up-do

Login into your Digital Ocean account select Functions from the left side menu then click on the Launch button.

Select the Nodejs:14 runtime and provide a name for your function then hit Create.

Click on the newly created function, this should present you with a web-based code editor.

Digital Ocean provides a way to work and test your function locally but for this tutorial, we will stick to the web-based editor.

I have a ready-to-use form submission function code on GitHub, go ahead and copy-paste its content into the web editor.

Going through the code you will notice a few parameters are missing, all of which are Github related, we will be creating those in the next section.


01: const gistID = '<GIST_ID>'; //https://gist.github.com/username/<GIST_ID>
02: const GitHubToken = '<GITHUB_TOKEN>'; //https://github.com/settings/tokens
03: const gistFileName = '<GIST_FILE_NAME>'; //https://gist.github.com


👉 Step 2: Creating a GitHub Gist

submissions

As mentioned early when a user fills out a contact form on our site the function will be storing them in a Gist. In this section, we will look at how to create a Gist.

For this you will need a GitHub account, With that head over to the Gist home page to create a new Gist.

Use the following steps to create a Gist for your submissions:

  • Set the description "Gist description"
  • Set the Filename to whatever you want but end it with a .json extension.
  • Add an empty array ie: [] in the content section.
  • Click on "Create secret gist" to create your Gist.

Once the Gist is created note the ID at the end of the URL in the address bar right after your username, this is your gistID ie: https://gist.github.com/username/{GIST_ID}.

Also the {filename}.json name you provided will be your gistFileName value.

With those two out of the way the only thing remaining is our GitHubToken value.

👉 Step 3: Generating a GitHub Token

create-token-2

To generate a Github token head over to your GitHub settings page

Following the steps below to generate your token:

  • Set the Note to something memorable.
    • Set the Expiration of the token to No expiration this way it won't stop working after some time.
    • Check the gist checkbox option in the scopes section, this will make it possible for our code to access and work with Gists.
    • With that now go ahead and click on Generate token.

This should generate a new token, this is your GitHubToken

🏁 Final step: Making a form submission.

Now that we have all three values, you can go back to the function on Digital Ocean and set them.

Click on the save button to persist the changes.

You can now go ahead and implement your client-side code to start sending requests to your function. I have put together a sample form you can use.

You will need to replace <FUNC_URL> with your functions web URL, which you can copy from the text box right above the web-editor window.

You also need to make sure Web Functions is enabled from the settings tab.

enable-web-functions

And that's about it!

Here is another article for you 😊 "How to remove new (untracked) files from a git repo"