Simply build a Contact form for your website

Today I am going to teach you how to build simple contact form without any plugin for your website or blog. Previously, we published an article about Contact form plugins in which we promised to share an article about creating a contact form on your own and of-course without any plugin.

This will be a very easy to follow and simple tutorial if you will follow all the steps accordingly.

But before we go any further — let me tell you that we are going to use 3 languages to build this contact form. These languages are :

HTML
CSS
PHP

It doesn’t matter if you don’t have any knowledge of web development. Just copy and paste the codes that will be shared and everything in the index.php file. If you follow each and every step as it is described — then eventually you will end up with a completely functional contact form.

Building a Form from Html

First we have to build the skeleton of our form — for that we will use HTML , which is a mark-up language. We will create few form fields such as “Your Name” , “Your E-mail”, “Subject” and finally the textarea where the form submitter will leave his comment or feedback.

Copy the below given code and paste it in a simple text file:

[html]
<form action=’index2.php’ method=’POST’>

<p>Subject:</p><p><input type=’text’ name=’subject’></p><br>

<p>Comment:</p><p><textarea name=’comment’ rows=’5′ cols="40"></textarea></p><br>
<p><input type=’Submit’ value=’Submit Form’></p>

</form>
[/html]

Now “Save as” the text file and name your new file index.php.

Make sure that you choose “All Files” for “Save as type” field. If you are a Mac user, then do necessary adjustments.

Styling Contact Form

Now if you will open your form on your browser in the current situation — then it may look like this :

Obviously, It doesn’t look attractive by any means. So let’s start designing it for better user experience… You can design this contact form as you like according to your website’s layout and design.

However, I will share this CSS stylesheet with you:

[css]
form p {
float: left;
position: relative;
margin: 7px;
width: 48%;
font-family: sans-serif; }
[/css]

Copy this CSS stylesheet and paste this into your index.php file by first opening it into a text editor — and later save this stylesheet in between <style> tags as shown below:

Now your html email form should look like this:

PHP script for our Contact Form

Now when basics are done — it’s time to make our Contact form functional. For that we will use PHP — and do not worry, I bet it will be an easy job for you.

First open your index.php file in a text editor. Now save the following code into the top of your index.php file.

[php]
//To record user data into variables
@$username = $_POST[‘name’];
@$useremail = $_POST[’email’];
@$subject = $_POST[‘subject’];
@$comment = $_POST[‘comment’];

//Your email address
$email = ‘youremail@email.com’;

//The template of your email

$body = "A user ".$username." has sent you an email: \n".$comment."\n User email: ".$useremail."/n";

//Email header
$headers = "From: Contact Form <no-reply@yourwebsite.com>";

//To Check whether email is correct or not
if (filter_var($email, FILTER_VALIDATE_EMAIL)){
mail($email, $subject, $body, $headers);
}

[/php]

Copy this exact code and paste it on the top of your index.php file like this:

Final Words

Once you have edited the PHP script — your contact form should become functional. If there are any problems in your contact form, then let me know in comment area.