Sending HTML Form Data To An Email Address
Last Updated : Mar 11, 2024
IN - HTML CSS PHP | Written & Updated By - Anjali
In this tutorial we will show you the solution of sending HTML form data to an email address and we will show you how you are able to send html form data to an email address.
Here, one thing is that we already cover the topics like how to make html form, and its attributes or methods, etc.
If you want to know anything about forms then you must have to read our previous sessions of forms.
Now, let us understand how to send html form data to an email address.
Step By Step Guide On Sending HTML Form Data To An Email Address :-
Now, here below we are going to show you a code in html with some CSS and php.
HTML is used to create form here, where CSS is used to style form, while php is used here to store data from forms and sent it our required email address.
Here, below is code for sending html form data to an email address and after codes we will understand the codes.
<?php
if (isset($_POST['button'])) {
$to = "ENTER_YOUR_EMAIL_ADDRESS_HERE";
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['nmbr'];
$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 Successfully!";
} else {
echo "Failed To Send Mail";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="inner">
<div class="welcome">
Student's Registration Form
</div>
<div class="registration_options">
<form action="" method="post">
<div class="rleft_body">
<label for="">
Enter your name here
</label>
<br>
<label for="">
Enter your email here
</label>
<br>
<label for="">
Enter your phone number
</label>
<br>
<label for="">
Enter your subject here
</label>
<br>
<label for="">
Type your message here
</label>
</div>
<div class="rright_body">
<input type="text" name="name" id="">
<br><br>
<input type="email" name="email" id="">
<br><br>
<input type="tel" name="nmbr" id="">
<br><br>
<input type="text" name="subject" id="">
<br><br><br>
<textarea name="body" rows="5" cols="40" placeholder="Type your message here..."></textarea>
</div>
<div class="registration_submit">
<input type="submit" value="Submit" id="save" name="button">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
CSS file: style.css
.main{
height: auto;
width: 100%;
}
.inner{
width: 80%;
height: 650px;
border: 1px solid white;
box-shadow: 0 0 10px black;
margin: 30px auto 30px auto;
}
.welcome{
text-align: center;
padding: 20px;
font-size: 40px;
font-family: cursive;
border-bottom: 1px solid black;
background-color: black;
color: white;
}
.rleft_body
{
width: 60%;
float: left;
margin-top: 90px;
}
.rleft_body label
{
font-size: 20px;
font-style: oblique;
padding: 100px;
line-height: 2.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rright_body{
width: 40%;
float: left;
margin-top: 85px;
}
.rright_body input{
font-size: 20px;
font-style: oblique;
margin-top: 3px;
width: 80%;
border: none;
border-bottom: 1px solid black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.registration_submit{
clear: both;
height: auto;
text-align: center;
}
#save{
font-size: 25px;
background-color: black;
color: white;
padding: 5px 35px 5px 35px ;
border: none;
margin-top: 40px;
}
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create a registration form with the help of form tag and method used is post. Here, we create a form with fields like name, email, phone number, subject and message.
- And after this we create a button for submit with input type submit.
- In this code, we link a CSS file named style.css which is also provided with html/php code.
- Also, one thing more you have to save file with .php extension. And at top we use some php codes let us understand.
- Here, in php first we create a simple php format like <?php ?> and rest code is written in between these.
- Now, we apply a condition of set on submit button has name button. And if is it true, then rest code will run.
- At first, we have to add our email address under $to variable to receive email from webpage.
- Now, we create some variables to get data from webpage’s input tags to variables to send them with email.
- At last, you have to use if condition with function mail($to, $subject, $body, $headers) .This is predefined function of php.
- If it became true then a message having text mail sent successfully will be printed. If there is an error then message in else part will displayed.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after reading this form we are able to send form data from a webpage to an email address. I hope this tutorial on sending HTML form data to an email address helps you.
About Anjali
