A quick guide to creating an email-based contact form
Tags: html, css, webdev, beginners
Published: 2022-09-30 11:32:15

## Introduction.

Regardless of whether you sell products or services online or manage a local business, an email list can help you generate more sales in any market. An effective way to generate more leads is through the use of a contact form.

A website with a decent and clear contact form looks more professional. An email address that is prominently posted on a contact page doesn't have the same effect. 

The contact form can demonstrate to your website's visitors that you are organized and have taken the time to communicate with them more effectively.  

Many website owners contact people through their social media networks. In this approach, you can hope that website visitors will be able to contact you through your social media accounts.

What happens, though, if a visitor is not active on social media or doesn't want to make a big effort to get in touch with you? It appears to become troublesome and burdensome for visitors.

Well, that will probably result in you losing a potential client to other businesses.

Contact forms can be created in a variety of ways for your website. Our goal today is to create a contact form that sends data to a single email address. It's a very personalized method that doesn't require a database. Businesses on a small scale can benefit greatly from it.

## Prerequisites

The first thing you need to do is install a text editor on your computer so that you can follow this tutorial. In this case, I will use Visual Studio Code. It's up to you which text editor you use.

## Project Setup

First of all we will create a folder called Contact for our workspace for today's lesson. Next we would open the folder in our text editor. In this case VS Code. Next we will create two files inside the folder opened in VS Code called _index.html_ and style.css. Your workspace should now look like this.

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

Inside our html file we will begin to write the code for our contact form and we will style it inside the _style.css_ file.

We will create a title and then link an external file for styling.

```
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Contact Form Using Email
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>

    </body>

</html>
```
Next will add a general style to the _style.css_ file and add Poppins and san-serif.

```
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif ;
}
```
Next we will create a div section inside our body tag. This code should go into our body tag.

```
<div class="container">
           
</div>
```
Inside our style.css file we will add a styling for the div section we created in the html file.

This code should go into our _style.css_ file.

```
.container{
    width: 100%;
    height: 100vh;
    background: #001660;
    display: flex;
    align-items: center;
    justify-content: center;
}

```
Our _index.html_ file should now look like this.

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

Also our _style.css_ file should now look like this.

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

We will now open our _index.html_ file inside a browser.

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

Next we will create a header with a _h3_ tag, Input field for Name, Email and Phone number. We will add a Text area for messages and a Submit button.

This code should go inside our div tag.

```
<form>
<h3>GET IN TOUCH</h3>
<input type="text" name = "Name" placeholder=" Your Name" required>
<input type="email" name = "Email" placeholder=" Your Email" required>
<input type="text" name = "Phone" placeholder=" Your Phone NO." required>
<textarea name="message" rows="4" placeholder="How can we help you?"></textarea>
<button type="Submit">Send</button>
</form>
```
We will now style our Contact form. 

This code should go inside our _style.css._

```
form{
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
}

form h3{
    color: #555;
    font-weight: 800;
    margin-bottom: 20px;
}


form input, form textarea{
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: #f5f5f5;
    font-size: 16px;
}

form button{
    padding: 15px;
    background: #ff5361;
    color: #ffffff;
    font-size: 18px;
    border: 0;
    outline: none;
    cursor: pointer;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 30px;
}
```
Our _index.html_ file should now look like this.

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

Also our _style.css_ file should now look like this.

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

Our browser should now look like this.

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

Our Contact form is all set but it doesn't perform any function.

To make our form fully functional, we will go to [formspree.io](https://formspree.io/) register and verify your email.

We will now click on create new contact.

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

We will name our from Contact Form and click on the create form button.

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

We will now copy our link and add it to out code.

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

Next we will add the code to our _<form>_ tag inside our _index.html_ file.

Replace https://formspree.io/f/xpznraod with the link we copied from our _Formspree_ dashboard.

```
action="https://formspree.io/f/xpznraod" method="POST"
```
Our VS Code should now look Like this.

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

Next will now go to our browser and fill our contact form and click the send button.

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

Finally We will get a mail that looks like this.

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

## Conclusion.

We have learned how to create and style a contact form in this article. With Formspree.io, we also learned how to make the form fully functional.