How to create a simple contact form in HTML 5, PHP, CSS 3

Today I will show you how you can easily create contact form in PHP, HTML 5 & CSS 3 and how you should add it to your website made in HTML. You will however need some basic knowledge in regards to HTML & CSS

I suggest using a code editor  which will highlight where you have made an error like Sublime Text or Notepad++.

1. Basic Code

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact form - Website Title</title>
<!-- Here we will add our css file -->
</head>

<body>
<div id="contact-form">
<!-- Here we will add our contact form markup -->
</div>
</body>

</html>
  • <!DOCTYPE HTML> - informs the web browser that we are using HTML 5 
  • <HTML> - main tag that will include the entire code of our website as well as tags  <HEAD> and <BODY>.
  • <HEAD> - In this tag we put information about meta tags while importing CSS and JS files so we could also embed CSS and JS code inline.
  • <BODY> - In this tag we insert the main markup that would be visible for person viewing your website and we are going to add our Contact Form here.

2. Adding Contact Form

When we have basic markup prepared it is time to add our markup responsible for displaying the Contact Form and place it in between <div id="contact-form"> and </div>.

<form>

    <label>Full name:</label>
    <input name="name" placeholder="John Smith">

    <label>Email:</label>
    <input name="email" type="email" placeholder="info@narhir.com">

    <label>Message</label>
    <textarea name="message" placeholder="Write message here"></textarea>

    <input id="submit" name="submit" type="submit" value="Send Message">

</form>
  • <form> - Is a container for our contact form.
  • <input> - It means that this field is waiting to receive input/info in it.
  • <input name="email"> - Name attribute is used to name fields to which we can refer to in the PHP file..
  • <input placeholder="John Smith"> - Placeholder attribute is used to provide default information that should be displayed before user will enter his data.
  • <input type="submit"> - Type attribute defines what kind of input field it is, for example in our contact form we will use "text","email","submit" however the default value is "text".
  • <textarea> - Textarea is like <input type="text"> but it allows for multiple rows of text.

contact-form-without-style.jpg

This is how our current contact form should look like, but now we will add some CSS code and it will look much better! 

3. Creating CSS file

Now it is time for us to create new CSS file, to keep it simple, lets just call it style.css and we need to place it in same folder as our HTML file with the Contact Form.

After creating it we will have to add the following CSS code to it.

body {
  background-color:#f8f8f8; /* Sets background color of our website */
  font-family: Arial, Helvetica, sans-serif; /* Sets the font family to be used across our website */
}

#contact-form {
  width:260px; /* Sets our contact form width */
  margin:0 auto; /* Centers our contact form if it have fixed width */
  background-color:#fff; /* Adds background color to our contact form body */
  border:2px solid #f3f3f3; /* Adds 2px border to our contact form */
  padding:50px; /* Adds padding to our contact form */
  margin-top:20px; /* Adds a top margin to our contact form */
}

#contact-form label {
  display:block; /* Sets the label to be above the input field */
  margin-bottom:5px; /* Adds a bottom margin */
  font-weight:bold; /* Changes weight of the font by making it bold */
  text-transform: uppercase; /* Changes all letters to be uppercase */
  font-size:12px; /* Changes the font size to be 12px */
  color:#555555; /* Changes the font color */
}

#contact-form textarea,
#contact-form input {
  padding: 8% 5%; /* Adds padding to our input fields */
  border:none; /* Reses the border to none to style it later */
  border-bottom:2px solid #ccc; /* Adds a border to the bottom */
  margin-bottom:25px; /* Adds a bottom margin */
  width:90%; /* We set the width 90% + 5% padding left + 5% padding right = 100% */
  font-family: Arial, Helvetica, sans-serif; /* Sets the font family to be used in input fields */
}

#contact-form input#submit {
  width:100%; /* Sets the width of our submit button to be 100% */
  cursor:pointer; /* Changes cursor type */
  margin-bottom:0px; /* Resets the margin bottom */
  color:#fff; /* Changes the font color */
  background-color: #5bc0df; /* Adds background color to our submit button */
  border-bottom:5px solid #46b8db; /* Adds bottom border to make it look 3d */
}

#contact-form input#submit:hover,
#contact-form input#submit:focus {
  background-color: #85d0e7; /* Adds a background color on hover & focus */
}

#contact-form p.copy {
  color:#ccc; /* Changes the font color */
  margin-bottom:0px; /* Resets the margin bottom */
  font-size:12px; /* Changes the font size to be 12px */
  text-align: center; /* Centers the text of copy */
}

#contact-form p.copy a {
  color:#ccc; /* Changes the font color */
  text-decoration: none; /* Sets the text underline up */
  font-weight:bold; /* Adds font weight */
}

4. Importing CSS file

In order to import our CSS file we must add the following code in <HEAD> tag below <TITLE> tag of our website.

<link rel="stylesheet" type="text/css" href="style.css" />

If you have added everything correctly our HTML file markup structure should look like this:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact form - Website Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="contact-form">
<form>

    <label>Full name:</label>
    <input name="name" placeholder="John Smith">

    <label>Email:</label>
    <input name="email" type="email" placeholder="info@narhir.com">

    <label>Message</label>
    <textarea name="message" placeholder="Write message here"></textarea>

    <input id="submit" name="submit" type="submit" value="Send Message">

</form>
<!-- I would appreciate if you would not remove my link from below -->
<p class="copy">Contact form from <a href="http://www.narhir.com">Narhir Design</a></p>
</div>
</body>

</html>

If you would view the HTML file in your web browser, it should look like the following screenshot:

contact-form-html-php-css3-browser-screenshot.jpg

5. Let's add PHP functionality

Let's start by creating a new empty PHP file and lets name it contact.php.

Now we have to edit our HTML code in our contact.html file and to be more specific this element: 

<form>

We need to add an action which will run our contact.php script when the user will "post" the information we want

<form method="post" action="contact.php">

Now lets add to our php file the following code:

<?php

// We create a variable for name value
$name = $_POST['name'];

// We create a variable for email value
$email = $_POST['email'];

// We create a variable for message value
$message = $_POST['message'];

// We provide an e-mail address from which the email is sent
$from = $email;

// Provide the e-mail address on which you want to receive messages
$to = "info@narhir.com";

// Provide the subject of the e-mail
$subject = "Contact form from Narhir.com";

// We prepare the message body
$emailbody = "";
$emailbody .= "Full name: " . $name . "\n";
$emailbody .= "Email: " . $email . "\n";
$emailbody .= "Message: " . $message . "\n";

// We add UTF-8 to the header of our message
$header = "";
$header .= "From:" . $from . " \n";
$header .= "Content-Type:text/plain;charset=utf-8";


// Sending message
$success = mail($to, $subject, $emailbody, $header);

// Redirect after sending the message
if ($success){
  print "<meta http-equiv=\"refresh\" content=\"0;URL=confirmation.html\">";
}
else{
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
}
?>

6. Lets add UTF-8 support

Our contact form should now send the messages without any problems, but in rare cases issues may appear if the message has some unsupported characters so it is always better to provide additional support for UTF-8 characters.

We do this with this piece of code (that I already included above)

// We add UTF-8 to the header of our message
$header = "";
$header .= "From:" . $from . " \n";
$header .= "Content-Type:text/plain;charset=utf-8";

Now we shouldn't have any problems with UTF-8 characters

7. Lets create a Confirmation page and an Error page

The easiest way to do it is by just copying contact.html and renaming it to: confirmation.html while removing the <form> markup:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact form - Website Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="contact-form">
<p>Your message has been successfully sent.</p>
<!-- I would appreciate if you would not remove my link from below -->
<p class="copy">Contact form from <a href="http://www.narhir.com">Narhir Design</a></p>

</div>
</body>

</html>

Now we have to do the same but this name lets just copy confirmation.html and rename its copy to error.html and change its markup to something like this:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact form - Website Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="contact-form">
<p>There was an error sending the email message.</p>
<!-- I would appreciate if you would not remove my link from below -->
<p class="copy">Contact form from <a href="http://www.narhir.com">Narhir Design</a></p>

</div>
</body>

</html>

8. Troubleshooting

If you have followed this tutorial step by step, everything should work correctly, however if it is not working for some reason, please download the included "source file" below and compare it with your code.

Summary

And now our contact form is finished but in order for it to work properly you must place it on server that has PHP enabled.

This is one of the most simplistic contact forms and thanks to that I hope it will also be very easy to add to your website.

View demo

Download source code

If you enjoyed this article / blog post please share it on social a network like Facebook with your friends