Form submission with fabform.io
Tags: webdev, staticwebapps, beginners
Published: 2022-07-29 13:07:53

febform is a smart end point for developers to handle form submission. Simply submit the form to febform endpoint and VOILÀ submission is completed. No need to create an API to handle forms, febform got that part covered.
### Implementation

Lets get into the implementation of the febform.

First of all create an account on https://fabform.io/.
After creating account create an end point where you want to submit your form.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbcjj64o7arfiihgjsy8.png)

Click on create endpoint then you will get a pop up that will ask you to enter then name of the end point.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jj16tq3s1chuwbs1im3.png)
 

After typing the name hit save endpoint and you got your end point.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bp4hv8ep0q7jo4q2ksy.png)
 

On the left side you will get the list of end points.
Click on the recently created end point in this case ***Test***. You will get the key of the form which we will use to submit our form to the this endpoint.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eve1y3gebcipsxb1c80q.png)
 

In this case the key is **vWPMSd0 .**

Now let create our form.


```
<!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>Document</title>
</head>
<body>
    <form method="post" action="https://fabform.io/f/vWPMSd0" >
        <input type="text" placeholder="First Name" name="first_name">
        <input type="text" placeholder="Last Name" name="last_name">
        <input type="email" placeholder="Email" name="email">
        <input type="submit" value="submit">
    </form>
</body>
</html>
```

In the above html code we simply created a form that has three fields that are First Name , Last Name and an email field. In the form action we added the url to our fabform end point. the name of the fields will be the identifier. 
***After running the html file we will get this form ***

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn2jbi22yta4kkwc5iwz.png)
 

Lets add some values and submit the form 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfrkineee76uxwb3bw7i.png)
 

After submitting the form if we get below screen this means that our form is successfully submitted.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/874m7fpe9c84qx4ivstn.png)
 

To check if the data is saved or not you can go to the end point and if the submission is successful then you will see the reflection of data in your endpoint.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff0twc60swi6b7eaufnw.png)
 

As the above image demonstrates our data is saved to the end point we created.

FabForm is not schema base plateform. You can hit the end point with the data different to the previously saved data and it will handle that data smoothly. 
Lets take a look at another example.

If we add another field of family name in our already created form and submit it.fabform should handle it and we should be able to see that extra field in the table.

```
<!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>Document</title>
</head>
<body>
    <form method="post" action="https://fabform.io/f/vWPMSd0" >
        <input type="text" placeholder="First Name" name="first_name">
        <input type="text" placeholder="Last Name" name="last_name">
        <input type="text" placeholder="Family Name" name="family_name">
        <input type="email" placeholder="Email" name="email">
        <input type="submit" value="submit">
    </form>
</body>
</html>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6gr3oy79vttl2wm9iri.png)
 

After submitting the form we get the data in our table


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8xrzyuzjbe9o9rvwqez.png)
 

### Why use FabForm?
- You don’t need to create an end point for you form submission
- Server-side data validation.
- Protection from spam using captcha
- All of the submission are saved to the fabform universal inbox and can be sent to google sheet or Airtable.

### Conclusion
Fab forms is a smart form submission for the developer. It is Simplest way to submit form for static websites. By setting the action of the form to fabform you get your end point for the form.

That is it for this blog. Bye!