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 and . If you want to see the source code or adapt it for your use case go to the project's . our website read the docs 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 . Don’t worry, everything you do with this project will fall within the ! here AWS free tier limit You must have a computer with node.js/npm installed. You can follow to install npm and node in mac/Linux. this tutorial 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 . Replace profile_name with the desired name of the IAM user and your_aws_region with the desired Run the build command sef build -r=your_aws_region -p=profile_name AWS region 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. Finish creating your IAM user. 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 and add the access keys in the format shown bellow. Update the local profile in your machine. sudo nano ~/.aws/credentials = <YOUR_ACCESS_KEY_ID> = <YOUR_SECRET_ACCESS_KEY> [profilename] aws_access_key_id aws_secret_access_key Generating Forms Run . Replace formname with the name you want to give to your new form, for example your website domain followed by contactform. sef init formname 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 of the docs for a complete list of all the available commands and command flags. commands section Understanding how it works When you run 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. sef fullform 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 to see all of the planned issues/updates.  Feel free to submit new issues/features, fork the and submit pull requests. If you have any additional questions or need support hit up our team on . project board repository slack

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

Gabriel Kardonski

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Gabriel Kardonski

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES