Collect Form Data Without Backend

collect form data without backend

In this article, we learn how we can collect html form data without a backend. And see that is possible to collect data without a server and have it without backend languages coding.

So let’s start with practical 1st we see what is frontend and backend. We do not dive deep into this concept but here is a short description front end is used for an only style like what you see on a web page that’s style by the front. And what you can’t see that’s the backend I mean when you buy something from an online store so can’t see where your data stored and how they get your data so that’s the whole process done with backend language and their server.

So 1st we make a simple html form then we see how we get from data without a backend.

Form Data Without Backend

So if we learn how to make this form and this all things our post very lengthy and there is lots of confusion come so I make a post how to style this form using only html css so visit this link and make this form completely then start form 1st step.

How to make Form Html Css

Step 1st :

Go to google and search for formsubmit.co

Form Data Without Backend

website link of form submit

Step 2nd:

Guys, please don’t leave this website after seeing this website UI, let’s process our 2nd step. 2nd step is simple we make a post on already how to make a form using html css and have complete code so make this form on your desktop then we go to 3rd step.

Create Registration Form in html css

Step 3rd:

Many people get why we do 1st steps , in this step we go to formsubmit.co so actually on website there is code of form so when we use their code line then we get our form data on email id with easy process. So if you don’t wanna go on formsubmit just copy this code below for the form and in this code formsubmit code included.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">  
                <form id="contact" action="https://formsubmit.co/yourmail@gmail.com" method="POST" />
          <h3> Contact Form</h3>
          <h4>Contact us for custom quote</h4>
          <fieldset>
            <label for="firstname">First name:</label><hr>
    <input type="text" id="firstname" name="firstname" placeholder="First Name">
    <br><br>
    <label for="lastname">Last name:</label><hr>
    <input type="text" id="lastname" name="lastname" placeholder="Last Name">
    <br><br>
    <label for="pwd">Password:</label>
    <input type="password" name="pwd" id="pwd" minlength="8">
    <br><br>
    <input type="file" name="file" id="file">
    <p>please Select Your Gender</p>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label><br>

    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label><br>

    
    <input type="radio" name="gender" id="other" value="other">
    <label for="other">Other</label><br>

    <label for="email">Enter Your E-mail</label>
    <input type="email" id="email" name="email" placeholder="Enter Your Email id"><br>
    <input type="submit" >
          </fieldset>
               </form>
      </div>
</body>
</html>

Important

<form id="contact" action="https://formsubmit.co/cwrprojects@gmail.com" method="POST" />

In this form code, this line is the main I just show this line for 2nd time I already give the full form code but here I show the main step. Here you can see easily we have a form tag in this we have id and it’s not related to formsubmit we use this for style purpose. The 2 things main are the action tag or method tag we use formsubmit link and our email id and method are post. So now our form is ready.

Now we go for step 4th.

Step 4th:

Now for collecting form data we must hosted our this website on any free or platform so we use Netlify for hosting our this form and yes Netlify is free site for hosting. I got it you think ohhh how we host our site and this all things so no worries we make already a post how to host our site on Netlify in 2 minutes.

host site on Netlify in free

step 5th

now go to your website and submit your form 1st time you received a activate form to mail in your email so click on ACTIVATE FORM and all is done. now go to your website and submit your form 1st time you received a activate form to mail in your mail so click on ACTIVATE FORM and all is done.

Final Output

Form Data Without Backend

In this image you can see how we recive a backend data in our inbox(gmail). I make this form completely and styling in a article so you can visit and after this all step you easily get this type of data here we recive first name, last name, password, file but make sure there is not image getting we just get file information or just name of image, we get value form radio button value and last one is our email id input.

There is short summary; Create a html form and in form method tag use this code that I give you in form making, host your form on any platform I recommend to host on Netlify it’s best and easy to use for free. Then submit form your self 1st time so you get a activation email on your mail id after you activated you fill the form next time and all your form data in email box.

Thank ❤for visiting our this blog we make many blogs like this so don’t forget to visit our blogs everyday!

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment