How to Send HTML form data to email

Providing a contact form or any other form on a web page is super easy. But how do we collect the data that user-submitted in the form? Well, In this article, we will talk about how to send HTML form data to email or how to send contact form submissions to email. As always, without further talking, let’s get started.

HTML form to Email

We can process a form in many ways like saving the data to a database, to a text file, or processing the login form. We can do a lot more with an HTML form. But for today, let’s just do what we were supposed to do 🙂

1. Create an HTML form

Well, we have already created a lot of HTML forms in our other articles. You can even use this HTML form builder to create an HTML form very quickly.

If you still need help to create an HTML form, please create a PHP file and copy past the HTML code below.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contact Us | BlogDesire</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div id="wrapper">
		<form class="form" method="POST">
			<h2>Contact US</h2>
			<input type="text" name="name" placeholder="Name">
			<input type="email" name="email" placeholder="Email Address">
			<input type="number" name="phone" placeholder="Phone">
			<input type="text" name="subject" placeholder="Subject">
			<textarea name="body" placeholder="Type your message here..."></textarea>
			<button type="submit" name="submit">Submit</button>
		</form>
	</div>
</body>
</html>

2. Add CSS

Now, create a file called style.css and put the code below!

*{
	margin:0;
	padding: 0;
}
#wrapper{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	background: linear-gradient(-45deg,#96deda,#50c9c3);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.form{
	width: 440px;
	height: 65vh;
	min-height: 450px;
	border-radius: 10px;
	box-shadow:  3px 3px 56px #55bdb8;
             /*-13px -13px 26px #306b68;*/
}
.form h2{
	padding: 20px;
	text-align: center;
	color: white;
}
.form input,textarea{
	border: none;
	border-radius: 5px;
	margin-left: 5%;
	width: 80%;
	padding: 5px 5%;
	margin-top: 10px;
	height: 40px;
	color: white;
	background: #55bdb8;
}
.form button{
	margin: 5%;
	border: none;
	background: transparent;
	padding: 10px 20px;
	box-shadow:  1px 1px 6px #55bdb8;
	border-radius: 5px;
	color: white;
}

Here is how your form should look like with the style.css file.

Contact Form Design

3. Add the PHP code

Now it’s time to add some PHP code with the main PHP file so that we can receive the email when a user submit this contact form! You can either add this code at the beginning of the PHP file or at the end. It really doesn’t matter. So, the code is

<?php
if(isset($_POST['submit'])){
    $to = "YOUR_EMAIL_ADDRESS_HERE";



    $name = $_POST['name'];
    $email= $_POST['email'];
    $phone= $_POST['phone'];
    $subject= $_POST['subject'];
    $body= $_POST['body'];
    $headers = 'From: '.$email . "\r\n";


    $body = "name : ".$name. "\r\n" .
    		"Phone : ".$phone. "\r\n" .
    		"Message : " . $body;
    if(mail($to, $subject, $body , $headers)){
        echo "Mail Sent!";
    }else{
         echo "Failed To Send Mail";
    }
}

?>

Please note: To receive emails when users submit this form, you should replace `YOUR_EMAIL_ADDRESS_HERE` with your own email address. That’s all required to make sure your “HTML form data to email” function works properly. If you need more information about sending emails with PHP, you are welcome to read the official document of PHP from here.

MD Khokon Mia

Full Stack Web Developer and Co-Founder Of Blog Desire. Love to code anytime.

Leave a Reply