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
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.
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.
first off open up your command line. If you don't have a directory for your static website project create one
mkdir project-name
cd project-name
npm install super-easy-forms
npm install -g super-easy-forms-cli
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 regionsudo 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>
sef init formname
. Replace formname with the name you want to give to your new form, for example your website domain followed by contactform.sef fullform formname
{
"email":"[email protected]",
"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 protected] --fields=fullName=text=required,email=email=required,paymentMethod=select=required=visa/master_card/cash,paymentAmount=number=required [email protected],[email protected]
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.
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. Operations performed by the lambda function
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.