Super Easy Forms Introduction: The Easiest Way to Create a Serverless Web Form

In past years, innovation in cloud services has made it quite convenient to host static websites. Since they don't require servers, these sites are usually faster, more secure, and cheaper to host/maintain than their dynamic counterparts; making them perfect for something like your new landing page.

But what if you need to gather data from your visitors? You could add an html form, but you would need some sort of back-end for doing things like saving submission data or sending notifications.

A web form is in essence a very simple application. a user interacts with an interface (the form) and submits a request with the form data to a server that processes it and then returns a response. A web form can be useful for collecting things like contact information from leads, email addresses for a mailing list, responses for a survey, payments for goods/services, and much more.

Super easy forms is an open source and easy to use solution that uses services from the AWS cloud to help you generate your own fully customizable serverless contact forms (front-end and back-end).

Some of the Benefits of Super Easy Forms

Free and Open Source

Fast and easy to use

Completely customizable (front-end and back-end)

Create unlimited projects, forms and submissions

Monitor your forms and retrieve submissions locally

has several built-in options like CAPTCHA

To learn more about super easy forms check out our website and read the docs. If you want to see the source code or adapt it for your use case go to the project's repository.

Why Serverless?

serverless, or function as a service (FaaS), refers to an infrastructure as a service model were a cloud provider dynamically allocates machine resources and charges you a variable cost per execution load/time.

There's a lot of fuzz in the community about AWS lambda and serverless technology. Some people love it and want to use it for everything while others hate it. Personally, I'm a big supporter of serverless technology but Im aware that its not meant to be used for everything. Alike any new technology its got its perks and drawbacks and these should be assessed before any implementation.

As a rule of thumb, code that you execute inside lambda should be a function with defined inputs and outputs and a short execution time.

In the case of super easy forms, we found it convenient to use AWS lambda because its a fully managed service but it still allows us customize the backend of each form independently. Also since form submissions aren't constant (high idle time) paying a completely variable cost per execution is more convenient than paying the fixed monthly cost of a virtual machine.

Getting Started with Super Easy Forms

Before you begin you will need an AWS account. If you don’t have one you can easily create one here. Don’t worry, everything you do with this project will fall within the AWS free tier limit!
You must have a computer with node.js/npm installed. You can follow this tutorial to install npm and node in mac/Linux.

Setting Up

first off open up your command line. If you don't have a directory for your static website project create one

mkdir project-name

Go into your project’s directory.
```
cd project-name
```
Install super easy forms.
```
npm install super-easy-forms
```
Install the super easy forms CLI globally.
```
npm install -g super-easy-forms-cli
```
Run the build command
```
sef build -r=your_aws_region -p=profile_name
```
. Replace profile_name with the desired name of the IAM user and your_aws_region with the desired AWS region
Finish creating your IAM user. In the AWS Console and hold on to the access keys. If you had already created your IAM user you can ignore this step and close the browser window.
Update the local profile in your machine. in Mac/Linux the local profiles are usually stored in ~/.aws/credentials. In windows they are usually stored in C:\Users\USER_NAME\.aws\credentials. Create or edit this file
```
sudo nano ~/.aws/credentials
```
and add the access keys in the format shown bellow.

[profilename]
aws_access_key_id = <YOUR_ACCESS_KEY_ID>
aws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>

Generating Forms

Run
```
sef init formname
```
. Replace formname with the name you want to give to your new form, for example your website domain followed by contactform.
Edit the config file saved in ./forms/formname/config.json and add values to the variables shown bellow following the same format. Values for captcha, emailMessage and emailSubject are optional.
run
```
sef fullform formname
```

{
"email":"your@email.com",
"formFields":{
    "fullName":{"type":"text", "label":"Full Name", "required":true},
    "email":{"type":"email","label":"Email","required":true},
 },
"captcha":false,
"emailSubject":"",
"emailMessage":"",
}

Optionally you can provide all your desired values directly as CLI flags as shown in the command bellow. All the values that you provide in the CLI flags will overwrite those saved in the config file.

sef fullform formname --email=your@email.com --fields=fullName=text=required,email=email=required,paymentMethod=select=required=visa/master_card/cash,paymentAmount=number=required --recipients=recipient1@email.com,recipient2@email.com

You can continually modify the config file and redeploy individual components of your form. Refer to the commands section of the docs for a complete list of all the available commands and command flags.

Understanding how it works

When you run

sef fullform

some resources will be created in the AWS cloud and some files/folders will be created locally including a responsive HTML form with an inline JQuery handler.

Resources Created in the AWS cloud

An s3 bucket to store the lambda function deployment package
A Lambda function to performs some operations with the form submissions
A DynamoDB table to store the form submissions
An API gateway endpoint to invoke the lambda function remotely

Operations performed by the lambda function

If the captcha option was provided, it verifies the reCAPTCHA response with Google's reCAPTCHA server.
It stores the form output in a DynamoDB table.
It sends an email message to notify stakeholders about a new form submission

Collaborating

Want to help make Super Easy Forms better? Check out our project board to see all of the planned issues/updates. Feel free to submit new issues/features, fork the repository and submit pull requests. If you have any additional questions or need support hit up our team on slack.