DEV Community

Cover image for Jamstack Registration Form

Posted on

Jamstack Registration Form

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)


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.

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

Alt Text

📷 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
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

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 (1)