DEV Community

Enock Isaac
Enock Isaac

Posted on

A quick guide to creating an email-based contact form

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

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>
Enter fullscreen mode Exit fullscreen mode

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 ;
}
Enter fullscreen mode Exit fullscreen mode

Next we will create a div section inside our body tag. This code should go into our body tag.

<div class="container">

</div>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

Our index.html file should now look like this.

Image description

Also our style.css file should now look like this.

Image description

We will now open our index.html file inside a browser.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Our index.html file should now look like this.

Image description

Also our style.css file should now look like this.

Image description

Our browser should now look like this.

Image description

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 register and verify your email.

We will now click on create new contact.

Image description

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

Image description

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

Image description

Next we will add the code to our 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"
Enter fullscreen mode Exit fullscreen mode

Our VS Code should now look Like this.

Image description

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

Image description

Finally We will get a mail that looks like this.

Image description

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.

Top comments (0)