How to Collect HTML form Data

Collecting HTML form using various method

HTML stands for 'HyperText Markup Language'. You can use this language to create websites. Form is one of the most important elements of a webpage. If you don't know much about the database and want to collect the data that's entered by the user, you can follow the methods given in this article.

You're to learn many methods of collecting HTML forms data. You can collect the data even if you don't know the server-side language because we're not gonna use any kind of server-side language, we will just use HTML to send/collect data. 

Collect HTML Form Input Data

collect html form data

Before Proceeding with this, you need to design a form using HTML, for Practice make a simple form, when you become familiar with these methods you can collect advanced forms data. Now let's start with creating a simple HTML form.

I hope you know about creating an HTML form. You have created a webpage and want to integrate the form in it, which means you know HTML (😀).

See the Pen HTML Form by Mohd Usman (@aulth) on CodePen.

Now let's discuss all the methods :

1. Collect HTML form data on Email

First of all, set the action as mailto:youremail@gmail.com and add an attribute enctype=" text/plain".
change your email in mailto action. type is being used so that we can collect the data in a readable format.
when a user will fill the form and click on submit button he will be redirected to the Gmail app (if he is using a smartphone). and the data will be sent to your email.

2. Collect HTML form data using Zoho

In the previous method, you learned to collect data on email by changing the action attribute. Now you're about to learn a new way of collecting data. It's one of the easiest ways of accepting data from users. Let's see how does it work.

Register On Zoho : 

First of all, create an account on zoho.com using Gmail/email/Facebook, etc. 

Create a Zoho form :

After creating the account on Zoho, you have to create a form. Visit https://forms.zoho.in/ to create the form according to your need like what data you want to take from the user, Name, Email, Mobile number, file, etc. 
once you have made a form using Zoho form builder you can embed this form on your webpage using the iframe tag. Or you can customize it according to your webpage design. 

Now you need to get the source code of this form to place this form on your webpage. To get the source code just click on the 'Embed Form' button and open the HTML and CSS tab by clicking on it. Now Download only HTML or HTML and CSS files according to your need. embed zoho form
If you download only an HTML file, then you will have to customize it using your own CSS according to your web design. and if you are downloading both HTML and CSS files then it will look like the same it's looking in Zoho form builder. 

download zoho form source code
my suggestion is to download only HTML plain file so that placing them on the website will be easy. Download the file and unzip it, and open the HTML file in notepad and copy the whole code and paste it where you want to place the form on your website. now using CSS gives this form a fancy look. 

when a user will fill this form and will submit, you will get all his details in the 'Zoho form entries' section.

3. Collect HTML form data using 123FormBuilder

It follows the same algorithm that Zoho does. It's an alternative to the Zoho form. Create an account on https://www.123formbuilder.com/ and create a form using its builder, after creating the form you have to just embed this form on your website or you can just use its action attribute and input ids.

4. Collect HTML Form Data using getform.io

It's the easiest way of doing this process because you don't need to make the form using any form builder site. You just have to replace the action attribute of your HTML form that you have designed using HTML. Let's start with getForm.io.

First of all Register on https://app.getform.io/register and create an EndPoint by click on the endpoint button top left corner.

create endpoint on getform.io
After creating an endpoint you will get a link that will look like this https://getform.io/f/fc81ef96-4d19-4221-87d5-b60ba5. you just have to paste this link in the action attribute and set the method as 'POST'.

Now when a user will submit on this form you will get all his details in https://app.getform.io/forms.

getForm allows only one endPoint in the Trial version, if you want to create more than one endpoint, you have to get the premium of it.

Post a Comment

© Usman Plus. All rights reserved. Distributed by Pixabin