It's very easy to setup serverless registration form using Jamstack.
🛠 Tools & Tech
- Visual Studio Code
- Terminal
- Github
- Netlify
⚙️ Initial Setup
Setting up Jamstack app
Create an empty folder (i.e. jamstack-registration-form)
$ mkdir FOLDER_NAME
Setting up jamstack app (make sure you are running node 10 and above)
$ yarn init -y
Now create a folder called src
$ mkdir src
Create index.html file within src folder which contains registration form.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JamStack Email Registration Form</title> | |
| <style> | |
| body {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;} | |
| h1 { text-align: center;} | |
| form{margin: 2rem auto;max-width: 350px;} | |
| label,input {display: block;width: 100%;} | |
| label { margin-top: 0.5rem;} | |
| input {font-size: 1rem; padding: 0.25rem;} | |
| button { margin-top: 0.25rem;padding: 0.5rem; background-color:navy;font-weight: bold;color: white;font-size: 1.5rem;border:none;} | |
| .hidden {display: none;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>JamStack Email Registration</h1> | |
| <form action="" data-netlify="true" netlify-honeypot="bot-field" name="Email Registration"> | |
| <label for="firstname">First Name</label> | |
| <input type="text" name="firstname" id="firstname" /> | |
| <label for="lastname">Last Name</label> | |
| <input type="text" name="lastname" id="lastname" /> | |
| <label for="email">Email</label> | |
| <input type="email" name="email" id="email" /> | |
| <button type="submit">Register</button> | |
| <p class="hidden"> | |
| <label>Don’t fill this out if you're human: <input name="bot-field"</label> | |
| </p> | |
| </form> | |
| </body> | |
| </html> |
Only netlify setup with the form is form tag data-netlify="ture" which actually sends form data to your site. And for Spam Management netlify-honeypot="bot-field" to avoid any spam.
📁 Folder Structure
📷 Create a GIT Repo
Create a new repo and pushing your code to the git.
git init
git add -A
git commit -m 'COMMIT MESSAGE'
git remote add origin YOUR REPO URL
git push -u origin master
🚀 Continuous Deployment with Netlify-cli
To install netlify CLI follow the Netlify Documentation
Netlify-cli Installation Docs
To create new netlify site with netlify-cli
netlify init
Answer series of questions
? what would you like to do? + Create & configure a new site
? Team: Your Team
? Site name(optional): Your site name
? Your build command: I leave it blank at this point
? Directory to deploy: src
Done! ✅
The site is ready. Now, whenever user make any submission to this form it will get recorded in netlify forms. The data can be exported in .csv or with custom functions data can be recorded in any databases like FaunaDB or Hasura etc.
Top comments (0)