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.
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.
Also our style.css file should now look like this.
We will now open our index.html file inside a browser.
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.
Also our style.css file should now look like this.
Our browser should now look like this.
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.
We will name our from Contact Form and click on the create form button.
We will now copy our link and add it to out code.
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"
Our VS Code should now look Like this.
Next will now go to our browser and fill our contact form and click the send button.
Finally We will get a mail that looks like this.
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)