Contact Form Tutorial Using Html and PHP

We will teach you in this tutorial that how to create simple contact form. This form you can use anywhere you want. We will show you that how to contact your email with contact form so that when the user wants to send you a message. It’s very easy. Let’s start tutorial. For this mailing system server side language is must with that we can not send and receive email. All the information goes through the server, so we will be using PHP as server side language.

First create a PHP file that will display your contact form, name it index.php. Then create another PHP file and name it contact.php; this is where it will take the information the user entered and send it to an email of your choice.

So in the index.php, we’ll set up the form:

So we create a <form> and set its method to POST and its action is “contact.php” because that is where we will actually do the email setup and sending. Then we create a <fieldset>, and what this basically does is group all our next elements together so it looks neater and more like a contact form.

Our first label is “name”, and this is where the user enters their name. You don’t want to receive an email without a name, so that is why we set our class to required and so now if the user doesn’t enter a name before they click submit, they’ll receive an error. The ID of the elements is important, so remember that the ID for our label name, is name.

Then we create another label called email, and this is where the user will enter their own email. You also don’t want to receive an email without a returning email, so we set our class to required email. The ID for this label is email. Then we enclose all of this within a div of class “push_down”, which will basically just push down this label to give some space between the other labels around it. In the CSS file: .push_down { padding-top: 10px; } This spacing should be suitable enough.

We do the same for Subject as we did for Email, except we don’t any requirements in its class because the subject of an email isn’t really of high importance.

Then we add a <textarea> and this is where the user will create their message. We set the ID to message, its rows to 8 and its columns to 66, and then we also set the class to “required” because you can’t get an email without any sort of actual message (disregarding attachments). Finally add an input type of submit and give it an ID of button. This will be our submit button that the user presses.

Now that we have the HTML part setup, we need to allow Javascript to validate our forms in the fields we marked as required. So add the jQuery AND jQuery Validate Libraries.

Then to allow validation of the required fields write:

This is how your form should look like. Now the form, jQuery validation, and minor CSS are setup, let’s setup the contact.php file.

In the contact.php file, our PHP syntax will have to be within <?php and ?>, just like any other PHP file. So the first thing we’ll do is get the user’s name, setup where the email is being sent to, and what the subject is. These are the three things you must first enter when sending an email through any email client: yahoo, gmail, etc. So we’ll set it up the same way.



And that’s all it takes to setup a contact form! You can now style the form in the HTML page however you would like. All the necessary components of setting up a contact form were all covered here though. I hope this was helpful!

  1. Zig Reply
  2. Brett Widmann Reply

Leave a Reply

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