How to create your first form

April 18, 2020

Do you need a way of your customers to contact you throught your website but have no idea how to? Yeah, we know, sometimes these tech stuff looks very complicated for us humans. And you know what? We look for tutorials on the web and we actually find it, a lot of it! Sometimes too simple, sometime so complicated we can't event understand what is going on. That's why in this post we are going to learn how to put all the basic building blocks into place and do it!

How a form actually works

To understand what we are doing, let's start with the basics:

How a form actually works

Wait Formito, maybe no so basic, let's explain what happens when the user submit's a form. When you have a form in your website, a lot of moving parts are handling your data, for example, the backend server that will handle your form submission, let's illustrate this process:

You form processing process

Your backend server is responsible for what is going to happen when the user clicks "submit". It can actually do a lot of things, from saving it in a database to initiating a financial transaction. In our case we want to send the form content to our e-mail.

If you want to to this yourself, you gonna need a backend server in place, a form processing endpoint, a database wher you can safely save the data and an SMTP integration so you can send e-mails to youself when a new message comes in. Yeah, it look like a lot of things for such to manage when you just want a message delivered to your e-mail right?

That's why Form as a Service exists, we replace all these boring stuff so you can focus on receiving new leads and messages from clients. That's how it works:

You form processing process

Let's create this cool form

First of all, we need to create the endpoint (it's basically an website adress), so we can point our form to it. You can create your here. It looks something like this:

With that in hands, we can create our form's code. Let's suppose we need to create a contact form to place on our site and receive leads from possible clients. Here's our form code, let's break it down:

Code example

That's it, with your form endpoint and code you can place it in your website and start receiving leads! It's simple, but before we finish it, let's understand this code.

  • form: is the form responsible to wrap all your fields and do the right action when submited
  • method: this attribute specifies what kind of action the form will perform on our endpoint, POST generally means you're sending data that will be processed in some way.
  • action: is the endpoint you created, it specifies your server address
  • enctype: it specifies how the data should be encoded when sending it to the server
  • input: it's basically a field where you can write some data, there's a lot of types, when using the type "email", the browser provides some validation, e.g. not letting you place anything rather than an email in this field
  • textarea: it's a special kind on input, that let you write multiple lines of text
  • button: render as button on the screen, where you will click to send the form

Well, that's basically how a form works, and now you can try it yourself! Let us know if you need help making your form work!

Cheer's from Formito!