Home » Tutorials » PHP/MySQL » Creating Simple Responsive HTML5 and PHP Contact Form

Creating Simple Responsive HTML5 and PHP Contact Form

Creating Simple Responsive HTML5 and PHP Contact Form

In this tutorial I will show you how to create a responsive html5 contact form for your website in just a few minutes. Having a Contact form is essential for any website, because this is the connection with your visitors and clients.

responsive contact form

The form is divided in two parts – the HTML5/CSS3 Responsive part and the PHP backend code part for sending email. We also have a success page which loads if the form is submitted successfully.

Demo Download

The HTML

The HTML of the form is included in the index.php file. It is nothing more than a standart HTML5 file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Simple PHP Contact Form</title>
	<meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
  <div class="wrapper">  
    <div id="contact_form">
    <form name="form1" id="ff" method="post" action="insert.php">
    <h1>Responsive HTML5 Contact Form Demo</h1>
	<p>This is a working demo of HTML5 and PHP Responsive Contact Form. The form is so simple, that you can implement it in a few minutes.</p>	
        <label>
		<span>Name*:</span>
        <input type="text" placeholder="Please enter your name" name="name" id="name" required autofocus>
        </label>
        
        <label>
		<span>City*:</span>    
		<input type="text" placeholder="Please enter your city" name="city" id="city" required>
        </label>
        
        <label>
		<span>Phone:</span>
        <input type="tel" placeholder="Please enter your phone" name="phone" id="phone">
        </label>
        
        <label>
		<span>Email*:</span>
        <input type="email" placeholder="youremail@gmail.com" name="email" id="email" required>
      	</label>
      
		<input class="sendButton" type="submit" name="Submit" value="Send">
			
	</form>
	</div>
   </div>

</body>
</html>

The CSS of the form

I’m using CSS to style the input and label elements of the form.

.wrapper {
	margin: 47px auto;
	max-width:580px;
}

#contact_form { 
	text-shadow:0 1px 0 #FFF;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background:#F9F9F9;
	padding:25px;
	
}


#ff label { 
	cursor:pointer;
	margin:4px 0;
	color:#ed7700;
	display:block;
	font-weight:800;
	
}

input { 
	display:block;
	width:90%;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background-color:#f4f4f4;
	color:#000;
	border:1px solid #5f5f5f;
	padding:10px;
	margin-bottom:25px;
}

.sendButton {
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
	background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
	background-color:#ffc477;
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	border-radius:16px;
	border:1px solid #eeb44f;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	width:25%;
	font-weight:bold;
	text-shadow:1px 1px 0px #cc9f52;
}
.sendButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
	background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
	background-color:#fb9e25;
}

To make the form layout responsive I’ve used max-width:580px; in the wrapper class and width:90%; for the input elements. The Send button is stylized with CSS3.

Making the form work with PHP

Here comes the most important part of the form – writing the backend code that actually sends the email. This happens in the file named “insert.php”.

We are using the $_POST method to get the input field value and assign it to a variable.
$name=$_POST['name'];

// Get values from the form
$name=$_POST['name'];
$city=$_POST['city'];
$phone=$_POST['phone'];
$email=$_POST['email'];

$to = "youremail@gmail.com";
$subject = "Future Tutorials Contact Form Test";
$message = " Name: " . $name . "\r\n City: " . $city . "\r\n Phone: " . $phone . "\r\n Email: " . $email;


$from = "FutureTutorials";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 

if(@mail($to,$subject,$message,$headers))
{
  print "<script>document.location.href='http://demo.ftutorials.com/html5-contact-form/success.html';</script>";
  // Created by Future Tutorials
}else{
  echo "Error! Please try again.";
}

To change the receiving email simply change the youremail@gmail.com with your email address.

Then with the PHP if statement – if(@mail($to,$subject,$message,$headers)) we are at the same time sending the form and checking if the mail is sent successfully. If everything is working good, we are using the javascript “document.location.href” to redirect the user to the success.html page.

Conclusion

Now you know how to build a responsive PHP contact form. Make sure you check out the demo and download the source code to play with it. This tutorial covers only the basic skills, so if you want me to write more advanced tutorial please comment below.

Liked this? Follow us on Facebook!

In this tutorial I will show you how to create a responsive html5 contact form for your website in just a few minutes. Having a Contact form is essential for any website, because this is the connection with your visitors and clients. The form is divided in two parts – the HTML5/CSS3 Responsive part and …

User Rating: 4.07 ( 16 votes)
0

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

*


6 − five =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Scroll To Top
Email
Print