Providing a contact form or any other form on a web page is super easy. But how do we collect the user’s data submitted in the form? In this article, we will talk about how to send HTML form data to email or send contact form submissions to email. As always, without further talking, let’s get started.
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 quickly create an HTML form.
If you still need help creating an HTML form, please create a PHP file and copy-paste 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.
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 submits 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 email address. That’s all required to ensure 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.
Blog Desire is Up for Sale!
Ready for a new chapter? Blog Desire could be yours!
Inquire Now!
