Well, Today I am going to show you how to make a html contact form with nice css design and an action page for submit data to your local mail or gmail.
At first we have to make a contact page for our web page where visitors will submit their data. We create a html file named contact.html. Then we copy and paste the following code into the contact.html file and save it.
Here's the code for contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a{ color:#2D3E52
} label {
display:block;
margin-top:20px;
}
textarea {
width:50%;
height:150px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
input,select{
width:50%;
height:25px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
#submit {
width:50%;
height:40px;
border:none;
margin-top:20px;
cursor:pointer;color:white;
background:#335599;
}
#submit:hover {
opacity:.9;
}
</style>
</head>
<body>
<center><strong>যোগাযোগ করতে আমাদের ইমেইল করতে পারেন</strong></center>
<br>
<br>
<br>
<form action="contact.php" method="post">
<center>
<label>Your Name:</label>
<input type="text" id="name" name="name" required>
<br>
<br>
<label>Email Address:</label>
<input type="email" id="email" name="email" required>
<br>
<br>
<label>Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<br>
<input id="submit" name="submit" type="submit" value="Send Message">
</center>
</form>
</body>
</html>
After that we have to create a php file named contact.php. We will create a php file named contact.php and copy the code below and paste into this php file and save.
Here's the code for contact.php file.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if(
!empty($_POST['name'])
&& !empty($_POST['email'])
&& !empty($_POST['message'])
){
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "[email protected]";
$subject = "New Message Recieved";
$body = "Sender: {$name}\nEmail: {$email}\nMessage: {$message}";
$headers = "From: {$email}";
if (mail($to, $subject, $body, $headers)) {
echo "<center><font color='green'>Your Message sent successfully! </font></center>";
} else {
echo "<center><font color='red'>Failed to send message. Please try again.</font></center>";
}
}
}
?>
Please replace the email address in green background with your own gmail address and save the file.
Now we have two files and we will upload these files in cpanel of our hosting server into the same directory or same folder.
After that, we will make a link in our website and connect to the contact.html file. Or we will directly make a contact page using the contact.html code in our website and publish the page.
And that's finish. Now enjoy !!!