Okay so we all have been there where you Google “How to add a contact form with email sending” and give up when you see lines of colored words and symbols that makes no sense to you!

Well you don’t have to worry about that anymore. FormSubmit is here for you. Let’s take a look at how to use this service.

This is a regular HTML markup for a simple form.

HTML form

<form>

<input type=”text” placeholder=”Your name”>
<input type=”email” placeholder=”Your email”>
<input type=”text” placeholder=”Your telephone”>
<button>Send</button>

</form>

In order to integrate this form with FormSubmit, All you have to do is 3 simple steps!

Step 1: Connect the form to FormSubmit.

The starting <form> tag should include two more attributes. Method and Action. Method is the way how you want to send information via http headers. It can either be POST or GET. In this case we are going to use POST method.

The other attribute is Action. This specifies where or to what file should the data be submitted for processing. In this case we should send our data to FormSubmit servers to process. So our code will look like this.

Also don’t forget to set the button type as well. Since we are submitting data to FormSubmit, we use “Submit” as button type.

Then comes the most important part. You can see [email protected] in bold font below. This is where you should put your email address. Any data submitted through the form will be delivered to this email address.

<form action=”https://formsubmit.co/[email protected]” method=”POST” >

<input type=”text” placeholder=”Your name”>
<input type=”email” placeholder=”Your email”>
<input type=”text” placeholder=”Your telephone”>
<button type=”submit”>Send</button>

</form>

Step 2 : Add name attributes.

This name attribute is used to enable access to the data value of the specified form field element when you submit the form. Simply it’s the name of the field. For an example, 

<input type=”text” placeholder=”Your name” name= “name”>

Okay after adding all the name attributes you’ll get something like this.

<form action=”https://formsubmit.co/[email protected]” method=”POST” >

<input type=”text” placeholder=”Your name” name=”name”>
<input type=”email” placeholder=”Your email” name=”email”>
<input type=”text” placeholder=”Your telephone” name=”tel”>
<button>Send</button>

</form>

Step 3 : Confirm

So we are pretty much done here. All you have to do is fill the form with your details for the first time and submit. Immediately after submitting you’ll get an email asking you to verify your email.

Don’t worry about the areas covered in red!

Click on Activate Form and voila! You’re done! Piece of cake huh?

Some of you may wondering what if someone right clicks on your website and click on view source and scroll through your code, get your email address! FormSubmit hears you friend! That is why they provide an alias with the confirmation email. In the activation email you’ll find this line.

“Use this email address alias d55s23ece42ge4sg4916af04353bb0 behalf of your actual email address if you want to hide your email address from source code.”

So after activating the form, you can simply remove your email address and replace with the alias they give! Simple as that.

So hope you enjoyed integrating FormSubmit to your website. See you folks soon!

Quick Question: Why did a developer wear a Halloween costume to a Christmas party?

Oct 31 (Octal 31) = Dec 25 (Decimal 25)