Hey, what’s up? Are you new in web development sector? Want to learn making PHP Contact form. So don’t worry, Today I’ll teach you to how to make PHP contact form without any plugin.

Before I start, let me give you a brief idea of the procedure. A PHP mail script will be there to send our form data via email. And we’re using Bootstrap4 and Font awesome icons in this form. You can use this too.

Step 1 – Creating an HTML form

You need an HTML form to collect data from the user. Go ahead and do it. It’s better to name all the functions and variables after me. Let’s give your <form> element class name contact-form , set method attribute to post, and remember the name of our PHP script, it’s mail-send.php so, set the action attribute to mail-send.php

Have a look at my HTML code:

<form class="contact-form m-top-30" method="post" action="mail-send.php">
	<div class="row">
		<div class="col-lg-6 col-md-6 col-12">
			<div class="form-group">
				<span><i class="fa fa-user-o"></i></span>
				<input type="text" name="name" placeholder="Full Name" required="required">
			</div>
		</div>
		<div class="col-lg-6 col-md-6 col-12">
			<div class="form-group">
				<span><i class="fa fa-envelope-o"></i></span>
				<input type="email" name="email" placeholder="Your Email" required="required">
			</div>
		</div>
		<div class="col-12">
			<div class="form-group">
				<span><i class="fa fa-clone"></i></span>
				<input type="text" name="subject" placeholder="Type Subject" required="required">
			</div>
		</div>
		<div class="col-12">
			<div class="form-group message">
				<span><i class="fa fa-pencil"></i></span>
				<textarea name="message" rows="6" placeholder="Type Your Message" ></textarea>
			</div>
		</div>
		<div class="col-12">
			<div class="form-group button">	
				<button type="submit" class="btn theme-2 effect">Send Message</button>
		     </div>
	          </div>
	</div>
</form>

Great! You’ve created a standard HTML form which will collect name, email, subject, and message. Here we’ve done the basic. You may notice that all the fields have required attribute which will prevent the form from submitting if any of those fields is left empty.

That’s all the HTML we need today. You can save this file as index.html

Step 2 – Designing The Form

Here is css code for styling that HTML Form. Just copy the all CSS codes and past your CSS Files.

.contact-form {
	background: #fff;
	padding: 30px;
	position: relative;
	z-index: 333;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
}
.contact-form .form-group {
	position: relative;
	margin-bottom: 30px;
}
.contact-form .form-group h4{
	font-size:16px;
}
.contact-form .form-group span {
	color: #379CB0;
	position: absolute;
	top: 13px;
}
.contact-form .form-group input,
.contact-form .form-group textarea {
	width: 100%;
	height: 50px;
	padding-left: 25px;
	font-weight: 600;
	border: none;
	border-bottom: 1px solid #ccc;
	resize: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.contact-form .form-group textarea {
	padding-left: 25px;
	height: 200px;
}
.contact-form .form-group input:hover,
.contact-form .form-group textarea:hover{
	border-bottom-color:#379CB0;
}
.contact-form .form-group.message span{
	top:0;
}
.contact-form .form-group.button{
	margin-bottom:0px;
}

That’s all the CSSwe need today. You can save this file as Style.CSS

Step 3 – Let PHP do its work and send the mail

What do we do with the data that we got from the user? We store it somewhere right? But, we can send an email instead. To do so, we write a PHP mail script. Copy the following code and save it with the name mail-send.phpfile.

<?php
$name = $_POST{'name'};
$email = $_POST{'email'};
$subject = $_POST{'subject'};
$message = $_POST['message'];

$email_message = "
Name: ".$name."
Email: ".$email."
subject: ".$subject."
Message: ".$message."
";

mail ("[email protected]" , "New Message", $email_message);
header("location: ../mail-success.html");
?>

Note, you need to replace [email protected] with your desired email address.

You have all done! Thank you for being with Codeglim. Happy Coding 🙂