How To Build A Serverless Contact Form With Digital Ocean Functions

Table of contents

• Step 1: Creating a Digital Ocean function
• Step 2: Creating a GitHub Gist
• Step 3: Generating a GitHub Token
• 🏁 Final step: Making a form submission.

This tutorial walks you through creating a serverless contact form handler for your static site using Digital Ocean functions [↗].

As part of the setup, we will be storing our data as a Github Gists [↗] instead of setting up a database.

Step 1: Creating a Digital Ocean function

Login into your Digital Ocean account [↗] select Functions from the left-hand 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, you should then be present 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.

✅ Wrap📋
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

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

For this you will need a GitHub [↗] account, Once you are done head over to the Gist home page [↗] to create a new Gist.

Follow the steps below to create a Gist:

• Set the description "Gist description"
• Set the Filename to whatever you want but be sure to append .json at the very end of it.
• 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

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, and that 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.

And that's about it!

Here is another article you might like 😊 how to clear entire session or local storage