Creating a Simple Contact Form with PHP


The Contact Form is an essential element for almost every website. The contact us form allow visitors to communicate with the site owner from the website. Using the contact us form, visitors can easily submit their query, views, opinions and suggestions to the site administrator about the website, service or product. Also, the submitted information can be sent to site owner or administrator via email.

Contact form helps you to receive the query from visitors and provide quick response to the visitors. The thought of a contact form is very simple, the user is able to send their query via email to the respective organization.

In this tutorial, we’ll show you how to create a simple contact form with PHP and integrate it into your website. Using our PHP contact form script you’ll be able to add a contact us form to your website within 5 minutes. The contact form not only is submitted but also an email will be sent to you on every form submission using PHP.

For your better understanding, we are going to divide the PHP contact form script in two parts, HTML and PHP. You can place this code together in the web page where you want to display contact us form.

Contact Form HTML

The following HTML will display a contact form with some common fields (Name, Email, Subject, and Message) and a submit button. Add this entire code in the web page to display a contact us form.

<h2>Simple PHP Contact Form</h2> <div class="contactFrm">     <?php if(!empty($statusMsg)){ ?>         <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''?>"><?php echo $statusMsg?></p>     <?php ?>     <form action="" method="post">         <h4>Name</h4>         <input type="text" name="name" placeholder="Your Name" required="">         <h4>Email </h4>         <input type="email" name="email" placeholder="[email protected]" required="">         <h4>Subject</h4>         <input type="text" name="subject" placeholder="Write subject" required="">         <h4>Message</h4>         <textarea name="message" placeholder="Write your message here" required=""> </textarea>         <input type="submit" name="submit" value="Submit">         <div class="clear"> </div>     </form> </div> 

PHP (Contact form submission script)

In this PHP script, we’ll get the submitted data using $_POST variable, validate data, validate email address using FILTER_VALIDATE_EMAIL, and send an email to the specified recipient using PHP mail() function.
Change the recipient email address with your desired email and add the following PHP code in the web page before the contact form HTML.

$msgClass '';
// Get the submitted form data
$email $_POST['email'];
$name $_POST['name'];
$subject $_POST['subject'];
$message $_POST['message'];
// Check whether submitted data is not empty
if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
filter_var($emailFILTER_VALIDATE_EMAIL) === false){
$statusMsg 'Please enter your valid email.';
$msgClass 'errordiv';
// Recipient email
$toEmail '[email protected]';
$emailSubject 'Contact Request Submitted by '.$name;
$htmlContent '<h2>Contact Request Submitted</h2>
// Set content-type header for sending HTML email
$headers "MIME-Version: 1.0" "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" "\r\n";
// Additional headers
$headers .= 'From: '.$name.'<'.$email.'>'"\r\n";
// Send email
$statusMsg 'Your contact request has been submitted successfully !';
$msgClass 'succdiv';
$statusMsg 'Your contact request submission failed, please try again.';
$msgClass 'errordiv';
$statusMsg 'Please fill all the fields.';
$msgClass 'errordiv';

CSS (Styling contact form)

The following CSS is used to styling our example contact us form.

.contactFrm h4 {     font-size: 1em;     color: #252525;     margin-bottom: 0.5em;     font-weight: 300;     letter-spacing: 5px; } .contactFrm input[type="text"], .contactFrm input[type="email"] {     width: 92%;     color: #9370DB;     background: #fff;     outline: none;     font-size: 0.9em;     padding: .7em 1em;     border: 1px solid #9370DB;     -webkit-appearance: none;     display: block;     margin-bottom: 1.2em; } .contactFrm textarea {     resize: none;     width: 93.5%;     background: #fff;     color: #9370DB;     font-size: 0.9em;     outline: none;     padding: .6em 1em;     border: 1px solid #9370DB;     min-height: 10em;     -webkit-appearance: none; } .contactFrm input[type="submit"] {     outline: none;     color: #FFFFFF;     padding: 0.5em 0;     font-size: 1em;     margin: 1em 0 0 0;     -webkit-appearance: none;     background: #9370DB;     transition: 0.5s all;     border: 2px solid #795CB4;     -webkit-transition: 0.5s all;     transition: 0.5s all;     -moz-transition: 0.5s all;     width: 47%;     cursor: pointer; } .contactFrm input[type="submit"]:hover {     background: none;     color: #9370DB; } p.statusMsg{font-size:18px;} p.succdiv{color: #008000;} p.errordiv{color:#E80000;} 

Related Articles

Comments 0