Form Endpoints

Deta Micros can be used to easily deploy form endpoints and the form data can be stored easily with Deta Base.

In this guide, we are going to deploy a Deta Micro that offers a form endpoint for a simple contact form and stores the information in a Deta Base.

The guide assumes you have already signed up for Deta and have the Deta CLI installed.

The contact form will store a name, email and a message.

{
"name": str,
"email": str,
"message": str
}

We are going to deploy an express app for the form endpoint.

  1. Create a directory express-form and change the current directory to it.

    $ mkdir express-form && cd express-form

  2. Create an empty index.js file (we will add the code that handles the logic later).

  3. Initialize a nodejs project with npm init.

    $ npm init -y

    You can skip the -y flag, if you want to fill the details about the pacakge interactively through npm's wizard.

  4. Install express locally for your project.

    $ npm install express

  5. Create a new nodejs micro with deta new. This will create a new nodejs micro for you and automatically install express as a dependecy.

    $ deta new
    Successfully created a new micro
    {
    "name": "express-form",
    "runtime": "nodejs12.x",
    "endpoint": "https://{micro_name}.deta.dev",
    "visor": "enabled",
    "http_auth": "enabled"
    }
    Adding dependencies...
    + express@4.17.1
    added 50 packages from 37 contributors and audited 50 packages in 1.967s
    found 0 vulnerabilities

    Your micro's endpoint will be different from the output shown above. This endpoint will be the form endpoint.

  6. You can also see that the http_auth is enabled by default. We will disable the http_auth so that form data can be sent to the micro.

    $ deta auth disable
    Successfully disabled http auth

    This is only for the tutorial, we recommended that you protect your endpoint with some authentication.

  7. Open index.js and add a POST endpoint for the form using express.

    const express = require('express');
    // express app
    const app = express();
    // parse application/x-www-form-urlencoded
    app.use(express.urlencoded());
    app.post("/", (req, res)=>{
    const body = req.body;
    // validate input
    if (!body.name || !body.email || !body.message){
    return res.status(400).send('Bad request: missing some required values');
    }
    // TODO: save the data
    return res.send('ok');
    });

  8. Update index.js to add logic to save the form data to a Deta Base.

    const express = require('express');
    const { Deta } = require('deta');
    // express app
    const app = express();
    // contact form base
    const formDB = Deta().Base("contact-form");
    // parse application/x-www-form-urlencoded
    app.use(express.urlencoded());
    app.post("/", (req, res)=>{
    const body = req.body;
    // validate input
    if (!body.name || !body.email || !body.message){
    return res.status(400).send('Bad request: missing some required values')
    }
    // save form data
    formDB.put({
    name: body.name,
    email: body.email,
    message: body.message
    });
    return res.status(201).send('ok');
    });

  9. Deploy the changes with deta deploy

    $ deta deploy
    Successfully deployed changes

Your endpoint will now accept form POST data and save it to a database.

You can use Deta Base's UI to easily see what data has been stored in the database. Navigate to your project and click on your base name under bases in your browser to use the Base UI.

Here's an example view of the UI.

Edit this page