Create Contact page and contact Email using PHP and CSS
A contact page is a common web page on a website for visitors to contact the organization or individual providing the website.
The page contains one or more of the following items:
an e-mail address
a telephone number
a postal address, sometimes accompanied with a map showing the location
links to social media
a contact form for a text message or inquiry
In the case of large organizations, the contact page may provide information for several offices (headquarters, field offices, etc.) and departments (customer support, sales, investor relations, press relations, etc.).
This Video is Create Contact page Using PHP and CSS from localhost.and Download the Source Code.
contact
.rar
Download RAR • 33KB
1. Create contact.php file and Past this code.
contact.php
<?php
include 'sendmail.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title> Contact Form</title>
</head>
<body>
<!-- Contact section start-->
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Address, City Country</div>
<div><i class="fas fa-envelope"></i>Contact@gmail.com</div>
<div><i class="fas fa-phone"></i>+91 1234567890</div>
<div><i class="fas fa-clock"></i>Monday - Friday 8:00 AM to 6:00 PM</div>
<link rel="stylesheet" type="text/css" href="style.css">
</div>
<div class="contact-form">
<h2>Contact Us</h2>
<form action="" method="POST">
<input type="text" name="name" class="text-box" placeholder="Your Name" required>
<input type="email" name="email" class="text-box" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your message" required></textarea>
<button class="send-btn" name="sumbit" type="sumbit">Send</button>
</form>
</div>
</div>
</body>
</html>
2. Create style, css file in this Folder.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body{
min-height: 100vh;
background: url(bg3.jpg) no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.contact-section{
width: 100%;;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info{
color: #fff;
max-width: 500px;
line-height: 65px;
padding-left: 50px;
font-size: 18px;
}
.contact-info i{
margin-right: 20px;
font-size: 25px;
}
.contact-form{
max-width: 700px;
margin-right: 50px;
}
.contact-info, .contact-form{
flex: 1;
}
.contact-form h2{
color: #fff;
text-align: center;
font-size: 35px;
text-transform: 35px;
margin-bottom: 30px;
}
.contact-form .text-box{
background: #000;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first_child{
margin-right: 15px;
}
.contact-form textarea{
background: #000;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 200px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn{
float: right;
background: #2E94E3;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
3. Create sendmail.php file and past this code.
sendmail.php
<?php
if(isset($_POST['sumbit'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to_mail = "siddiquiarshad90@gmail.com";
$subject = "Contact us";
$body = "Name : $name Email: $email Message : $message";
$headers = "From: siddiqui arshad";
if (mail($to_mail, $subject, $body, $headers)) {
echo "Email Send";
}else{
echo "Email Sending Faild!";
}
}