Before you go, check out these stories!

0
Hackernoon logoSuper Easy Forms Introduction: The Easiest Way to Create a Serverless Web Form by@gkpty

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

Author profile picture

@gkptyGabriel Kardonski

Industrial & Systems Engineer / Software Developer

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

    1. 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!
    2. 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

    1. Go into your project’s directory.
      cd project-name
    2. Install super easy forms.
      npm install super-easy-forms
    3. Install the super easy forms CLI globally.
      npm install -g super-easy-forms-cli
    4. 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
    5. 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.
    6. 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

    1. 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.
    2. 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.
    3. run
      sef fullform formname
    4. {
      "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

    1. If the captcha option was provided, it verifies the reCAPTCHA response with Google's reCAPTCHA server.
    2. It stores the form output in a DynamoDB table.
    3. 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.

    Author profile picture

    @gkptyGabriel Kardonski

    Read my stories

    Industrial & Systems Engineer / Software Developer

    Tags

    The Noonification banner

    Subscribe to get your daily round-up of top tech stories!