Hey friends, today in this blog you’ll learn how to create a Working Contact Form in PHP. I’ll use HTML CSS JavaScript & PHP to create this working contact form. In the earlier blog, I have shared how to send email using PHP from Localhost and it’s a time to create a contact form in PHP.
Contact Form is an important element on a page that allows users to communicate with the website owner. This contact form has some input fields for filling in name, email address, subject, message, etc. You can add or remove fields according to your site requirements.
In this project [Contact Form in PHP], as you can in the image preview, there is a contact form with a heading, input fields, button, and status text. This text is dynamic means this text change according to the form status and informs the user about their message is sending, sent, or failed. This contact form is fully validated means the user can’t send a message without entering a valid email address and message. You can watch a demo of this contact form or a tutorial of it.
Video Tutorial of Working Contact Form in PHP
In the video, you have seen the demo of this contact form and how I created it using HTML CSS JavaScript & PHP. I hope you like this contact form in PHP and want to get source codes but don’t worry I’ve provided the codes of this project at the bottom of this page and you can easily copy-paste or download the code files.
But first, read this blog till the end to understand the codes and concepts behind creating this contact form in php. Well, I used ajax in JavaScript so this contact form isn’t refreshed when your message is about sending, failed, or sent. Using ajax I sent all form data [name, email address, phone, website, and message] to the PHP file and in the PHP file, I received all.
After I got all user data, first I checked that user has entered a valid email and message or not because these two fields are mandatory. If the user has entered their valid email and message then using PHP inbuilt mail() function I sent these data to the provided email address that’s it.
If a message not sent due to an invalid email, empty message field, or network issue then I sent an error message with the reason, and using JavaScript I displayed this error on the contact form.
You might like this:
- Simple Working Chatbot in PHP
- Build URL Shortener in PHP & MySQL
- Send Email using XAMPP Server in PHP
- Download YouTube Video Thumbnail in PHP
Create a Working Contact Form in PHP [Source Codes]
To create this project [Contact Form in PHP]. First, you need to create four Files: HTML, CSS, JavaScript & PHP files. After creating these files just paste the following codes into your file. You can also download the source code files of this Contact Form in PHP & JavaScript from the given download button.
First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form in PHP | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Send us a Message</header>
<form action="#">
<div class="dbl-field">
<div class="field">
<input type="text" name="name" placeholder="Enter your name">
<i class='fas fa-user'></i>
</div>
<div class="field">
<input type="text" name="email" placeholder="Enter your email">
<i class='fas fa-envelope'></i>
</div>
</div>
<div class="dbl-field">
<div class="field">
<input type="text" name="phone" placeholder="Enter your phone">
<i class='fas fa-phone-alt'></i>
</div>
<div class="field">
<input type="text" name="website" placeholder="Enter your website">
<i class='fas fa-globe'></i>
</div>
</div>
<div class="message">
<textarea placeholder="Write your message" name="message"></textarea>
<i class="material-icons">message</i>
</div>
<div class="button-area">
<button type="submit">Send Message</button>
<span></span>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
background: #0D6EFD;
align-items: center;
justify-content: center;
}
::selection{
color: #fff;
background: #0D6EFD;
}
.wrapper{
width: 715px;
background: #fff;
border-radius: 5px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
}
.wrapper header{
font-size: 22px;
font-weight: 600;
padding: 20px 30px;
border-bottom: 1px solid #ccc;
}
.wrapper form{
margin: 35px 30px;
}
.wrapper form.disabled{
pointer-events: none;
opacity: 0.7;
}
form .dbl-field{
display: flex;
margin-bottom: 25px;
justify-content: space-between;
}
.dbl-field .field{
height: 50px;
display: flex;
position: relative;
width: calc(100% / 2 - 13px);
}
.wrapper form i{
position: absolute;
top: 50%;
left: 18px;
color: #ccc;
font-size: 17px;
pointer-events: none;
transform: translateY(-50%);
}
form .field input,
form .message textarea{
width: 100%;
height: 100%;
outline: none;
padding: 0 18px 0 48px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.field input::placeholder,
.message textarea::placeholder{
color: #ccc;
}
.field input:focus,
.message textarea:focus{
padding-left: 47px;
border: 2px solid #0D6EFD;
}
.field input:focus ~ i,
.message textarea:focus ~ i{
color: #0D6EFD;
}
form .message{
position: relative;
}
form .message i{
top: 30px;
font-size: 20px;
}
form .message textarea{
min-height: 130px;
max-height: 230px;
max-width: 100%;
min-width: 100%;
padding: 15px 20px 0 48px;
}
form .message textarea::-webkit-scrollbar{
width: 0px;
}
.message textarea:focus{
padding-top: 14px;
}
form .button-area{
margin: 25px 0;
display: flex;
align-items: center;
}
.button-area button{
color: #fff;
border: none;
outline: none;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
padding: 13px 25px;
background: #0D6EFD;
transition: background 0.3s ease;
}
.button-area button:hover{
background: #025ce3;
}
.button-area span{
font-size: 17px;
margin-left: 30px;
display: none;
}
@media (max-width: 600px){
.wrapper header{
text-align: center;
}
.wrapper form{
margin: 35px 20px;
}
form .dbl-field{
flex-direction: column;
margin-bottom: 0px;
}
form .dbl-field .field{
width: 100%;
height: 45px;
margin-bottom: 20px;
}
form .message textarea{
resize: none;
}
form .button-area{
margin-top: 20px;
flex-direction: column;
}
.button-area button{
width: 100%;
padding: 11px 0;
font-size: 16px;
}
.button-area span{
margin: 20px 0 0;
text-align: center;
}
}
Third, create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
//Contact Form in PHP
const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area span");
form.onsubmit = (e)=>{
e.preventDefault();
statusTxt.style.color = "#0D6EFD";
statusTxt.style.display = "block";
statusTxt.innerText = "Sending your message...";
form.classList.add("disabled");
let xhr = new XMLHttpRequest();
xhr.open("POST", "message.php", true);
xhr.onload = ()=>{
if(xhr.readyState == 4 && xhr.status == 200){
let response = xhr.response;
if(response.indexOf("required") != -1 || response.indexOf("valid") != -1 || response.indexOf("failed") != -1){
statusTxt.style.color = "red";
}else{
form.reset();
setTimeout(()=>{
statusTxt.style.display = "none";
}, 3000);
}
statusTxt.innerText = response;
form.classList.remove("disabled");
}
}
let formData = new FormData(form);
xhr.send(formData);
}
Last, create a PHP file with the name of message.php and paste the given codes into your PHP file. You’ve to create a file with .php extension. Remember, after copying and paste these PHP codes, you have to enter that email address in the $receiver variable where you want to receive all messages.
//Contact Form in PHP
<?php
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$phone = htmlspecialchars($_POST['phone']);
$website = htmlspecialchars($_POST['website']);
$message = htmlspecialchars($_POST['message']);
if(!empty($email) && !empty($message)){
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
$receiver = "receiver_email_address"; //enter that email address where you want to receive all messages
$subject = "From: $name <$email>";
$body = "Name: $name\nEmail: $email\nPhone: $phone\nWebsite: $website\n\nMessage:\n$message\n\nRegards,\n$name";
$sender = "From: $email";
if(mail($receiver, $subject, $body, $sender)){
echo "Your message has been sent";
}else{
echo "Sorry, failed to send your message!";
}
}else{
echo "Enter a valid email address!";
}
}else{
echo "Email and message field is required!";
}
?>
That’s all, now you’ve successfully created a Working Contact Form in PHP. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. But it won’t work on your localhost and to make it work you’ve to upload it to an online server.
To upload it to an online server first, extract the downloaded zip file on your PC and open the message.php file. In this file, there is a $receiver variable and you’ve to enter that email address where you want to receive all messages. After entering the email, just save this file and make a zip file of this folder and then upload it to your hosting and extract it there. Now, you’re ready to receive your visitor’s messages using this Contact Form in PHP.
Which hosting service do you use?
Sorry, I can’t public my hosting provider. You can contact me at contact@codingnepalweb.com
Hi i wanted to know how did this form send the email. From Smtp or mail() function and does it need a php mailer for making this.
Please leave your skype id because i have a important thing to discuss with you.
Thanks
This contact form sends an email to a specified email address using PHP inbuilt function mail() and you don’t need a PHP mailer for this but you need to upload it to an online server to make it work. I have explained all things in the blog…please read.
Please i want how add coment to my site web hey i vant do this with html
I got some error please can u help me
Sure and how can I help you?
You have to configure server settings in sendmail.
Hi, I downloaded your source code, and changed the email in $reciever, but when I open the index.html file on chrome and fill out all the details and then press on “Send Message”, the message is not being sent, it is only showing “sending your message”, its not moving ahead, its not going onto next step, can you please help me what should I do. THANK YOU !
It won’t work on the Localhost. Please upload it to an online server. I have explained all things on the blog.
https://foldable-shops.000webhostapp.com/uploadplus/index.html
dear sir , i am unable to recive email . please help me
I’ve checked and it’s saying a message has been sent.
Sir Please Make Video on Documents Attachment when some click on send then we have to get on mail please Sir
Sure…I’ll try.
Sir please give ur whatsapp number
I don’t use Whatsapp. Please contact me through the contact page.
Please tell why my VS code is unable to run php
pls reply
Can you explain your error..?
I`ve ran in the same problem. VS Code says you have to change the settings. I thought you would need an interpreter but all attempts I have made were succesless.
There is no real error, it just don`t functions.
Bro Which Theme Are You Using For This Website?
Newspaper X
is this work for free hosting??
Yes, if they are providing mail service
Yes
hey, can you tell me that i have to remove that $ FROM $mail?
No, you’ve to enter the receiver email address in the $receiver variable in the message.php file
Sir, can u telll names of plugins you use on this website?
Sorry I can’t tell all of my plugins name for security reasons. Here are some plugins I’m using – iThemes Security, OneSignal Push Notifications, Rank Math SEO, etc.
I’d hosted it on live server still it fails to send mail. I’d checked all code is proper.
I have checked and it’s saying “Sorry, failed to send your message!”. This mean you’re using free hosting and they are not providing mail service but if you’re using paid hosting and have followed all steps that are shown on this blog such as: pass your receiver email address in the $receiver variable in message.php file then contact your hosting provider and ask them why your mail is not sending.
Is there any way to make user contact me in free hosting?
Yes, you can try 000webhost for free hosting
But I am already using 000webhost and cant recive emails and I have changed the code and checked the email in reciver
can we use this with github pages?
NO, you can’t
Hi, can the same code be used in continuation to the Complete Responsive Personal Portfolio Website video you made?
And what might need to change in the code.
Thanks
You have to change some codes because the classes of this contact form may different
I copied everything on your codes, and I tested I got you message has been sent, but I didn’t received any mails. I tried with 2 different email ids.
Please, check your spam folder if you have entered proper email address in the $receiver variable.
Hello sir the code is working perfectly in my personal pc localhost but when i run same code in windows server live I got a message email has been sent, but I didn’t received any mails. I tried different mail and also check spam folder
It’s not work on your editor live server because you have configured your xampp files. So it work on localhost only.
How can I integrate this form to this https://www.codingnepalweb.com/responsive-personal-portfolio-website/.
Doesn’t works with profreehost.com & 000webhost.app.
Regards,
CodeOpacity
Make sure your hosting provider provides mail services and you’ve done all required changes that are mentioned on the blog.
Hi, I just wanted to say thank you for sharing!
Hi!
Im on hostinger and they have a php mail server and I have gotten it to work before. I used parts of your code and I keep getting a POST 404 error. Any thoughts on this?
404 means your file does not exist or you may have mistyped the URL.
first one I’ve found that’s simple and works thankyou for sharing it.
You’re most welcome
I wish I had an older sister or brother like you (my English is not good)
Hello, when I put my email in the php code and execute and write the information, it does not return to my email, is there an error or something else to add
Did you try it on an online server or localhost?
brother i uploaded my site on online but still send your message show their why ? which contact page provide by you ,
First, read the blog and do mention things on the blog.
I have followed all the steps mentioned in the blog, when I press the send message button it displays “the message has been send” but I didn’t receive any email. I am using 000webhost
Did you put your email address in the mentioned variable? If yes, then this problem is from the hosting. You can try it on paid hosting.
Works Great.
recaptcha synced as well.
Thank you.
You’re most welcome
Works perfectly! Thanks
You’re most welcome
Dear Thanks for Making easy to use
i got mail on gmail but when we send a mail msg Error Your message has been sent are showin on website
mail working form working but only this msg are showing on website
please reply me if possible
I didn’t understand. Please, explain more.
I am a school level computer science student and I am making a functional website for my father with homepage, contact, gallery, etc. and I am currently making in my computer on html files and he is planning to launch it. Is it possible as I am not using any hosting service now and planning to use wordpress later.
Is it necessary to connect to a database? Or it just works without all that.
No, it’s not necessary
I have been trying to implement this using the free github pages for a portfolio project. Would this not work for github pages?
Hi Nepal I Am A Big Fan i didnt know how to code but you thought me alot of HTML and CSS just wanted to find out do i need anything for this to work besides a hosting provider
You need an online server to work this contact form. If you are using this project for learning then you can use free hosting and they also provide free sub-domains.
BRO ITS NOT WORKING
Sending your message…
ALWAYS LIKE THIS
https://contact-5q4.pages.dev/
HOW TO FIX
I have checked and it looks like the PHP file is not linked with this project. Make sure to put the PHP file inside this project folder.
how to link
https://github.com/HBAMAL/PHP
HOW TO LINK PHP FILE
https://github.com/HBAMAL/PHP
THIS IS MY REPO
Works perfectly! Thank you! I need to have add a page redirect to the php … to my thank you page after email sent. What script do I need to add and where to do that? THANK YOU!
Just add this line inside setTimout function of JavaScript file:
location.href = “Your_URL_Here”;
Contact us js from for website plz provide me
Thx for uploading this its working but there’s a little problem when you use this contact form and its that when you send any message with Arabic Language or any UTF8 only languages the text appear like this ������ so plz can you fix this issue and send to me the updated code
If you don’t understand what is the issue its that Arabic text don’t appear like a readable Arabic
Normal Arabic Looks Like:
السلام عليكم
This contact form Arabic Looks like:
������
So plzz help and thx
Can you do a video about real time comment system?
Sure, I’m thinking about this topic!
Hi,
Thank you for the excellent contact form.
I sit possible to put it on several pages. I have tried but it only works on the index.html page.
Please advise.
Eamon
Hey man, thnk you for all ur tutos there are all good , could you plz made a video about liking button? runing as instagrm likes plz
Hello,
Thank you for your help with this. I am having trouble understanding exactly where I put the receiver email address.
Do I replace the text “receiver_email_address” with my email address? I have tried this with no success.
Thanks again!
Yes, you have to replace that with your email address. Enter that email where you want to receive all emails.
Please can u give me footer code like same to ur website footer please make a video and upload file to ur web
Can you please tell me how to combine this form with file upload? Here is from this article – https://www.codingnepalweb.com/file-upload-with-progress-bar-html-javascript/
Hi,
Does this still work? Mine doesn’t, it worked for 2 emails then it stopped working. It says that the message has been delivered but I cant see any in my gmail.
Yes, it works. Maybe mails are gone on spam.
how do i add to the database?
Hi
by hosting the application on a host for example hostinger will it always work?
which server can i use so that the application can work online because it works locally with xampp but i want to make it work online like a real web application
It’ll work on hosting, I think!
Hi, I used to use a js folder so that I have changed the script.js file path in html file and updated the path to .php file but it does not work.
I’ve also tried to add in js folder message.php.
In root folder everything works correctly.
Can you please give me some help?
Hey,
I have using your code 2 days working fine after now mail is note receiving form is working complete process mail is sent notification come but mail is not receiving. I am use your code in live server. can you please help me to solve out this thing.
Did you check it using a live server extension of the code editor or an online server?
Hi, how can I add “reply to” address?
Nice job
HI
I am getting this error ,it says : “Unable to find system sendmail.”
How to open this file after downloading
Pls i want to learn php from scratch
Hello, CN! I hope you’re well! First, thank you so much for this great project! Dear CN, can you create “real comment system” and share with us? please? 🙂
Sure, I’ll try to make a video on it.. stay tuned!
I love your tutorials can you give me your WhatsApp number let’s talk
Hi, Can I add $address or any?
hi. you did a great job, thanks. it works but how can i receive subject instead of phone number?
I have followed all the steps but when l press send message it doesn’t work
it says sending message and after a couple of seconds it display the whole Php code on the screen.
I use Google drive as my server
I want to upload files in this contact form, for example pdf, zip..Is it possible? Please do it bro!!