[TUT] Contact Form using HTML/PHP

[TUT] Contact Form using HTML/PHP - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: [TUT] Contact Form using HTML/PHP (/showthread.php?tid=4987)

Pages: 1 2 3

[TUT] Contact Form using HTML/PHP - Captain Straight Edge - 02-24-2010

Welcome!
*This is my first tutorial, so give me some slack! (;*

First of all let me start by saying PHP is a server side language, meaning it will not work (or even look right) if not run on a live server.

Okay let's get this moving.

So this is going to be really basic and probably not the best type of contact form. But it works and it's good experience.
We will have two documents, one HTML (the actual form) and two, the PHP (the one that performs the tasks).

The HTML:
Start by putting together all the necessary parts of you HTML document, then in the <body> tag, add:

Code:
<form></form>

The form tag also needs to contain the referance to the PHP document, and the method being used.
Use the attributes "action", to refer to the PHP document, and "method". ("post" is the smarter decision because it is generally safer to use)

Code:
<form action="send.php" method="post">

Don't worry about the PHP yet, we'll get to that.

In our form, we are going to add the inputs.
-Name:
-Email:
-Comment:

To do this we use the "input" tags, there are many different types of inputs but we will be using text, textarea, and submit. (though textarea does not actually use the input tag)
The attributes used are "type" "size" and "name".

"name" specifies a name for an input element, basically almost the same as giving a class or id to a div in CSS.

"size" is obvious, specifies the width of an input field. You can use numbers to distinguish this.

Make two inputs, one for people to enter their name, and one for their email.
It should look something like this:

Code:
<input type="text" name="name">Name:<br/>

<input type="text" name="email">Email:<br/>

Now we need an area for the person to enter their comments or concerns.
The tag used to do this is <textarea>
The attributes we can use for this are
-name
-cols (columns)
-rows

Name is the class being given and referenced for the PHP,
Columns and rows are obvious ones, use numbers to distinguish these.
Another thing to note about textarea is that it does need a closing tag. Just be sure to remember.

So compile the textarea tag and it should look like this:

Code:
Comments and Concers</br>

<textarea name="comments" cols="50" rows="20">

</textarea></br>

Now all this HTML form needs is a submit button.
The input type is "submit" and this will create you a nice little button.
The only attribute used besides type is value.
This will determine the text on the actual button.

Code:
<input type="submit value="send it!">

So close your <form> tag and the HTML is done.

The PHP.
Create a new PHP document and name it "send.php".
*remember to reference the exact file name in your HTML so this works*
Everything will be explained in the comments on the document.

Code:
<?php

$name = $_POST['name']; //this is where the value of your inputs go

$email = $_POST['email']; //value of your email input goes here

$message = $_POST['comments']; //value of your textarea goes here

$type = $_POST['type'];

$to = "youremailhere@coolkids.com"; //put your email here so it sends to your email :P

mail($to, "Feedback Results", $message, "From:$email"); // you can edit these, these are what your email message will tell you as the subject.

header("Location:thankyou.html"); //this refers to another HTML page which you don't need but is nice to have, it will send you to a page after submitting and is kind of convenient

?>

Make sure both your documents are in the same directory, or just make sure you link them correctly.
You can download both of my documents for referance to help guide you along if needed.
I hope this was somewhat helpful, sorry if I made a mistake or missed anything.
I tried to do this as efficient as possible, if you need help or want to request any other tutorials PM me and I'll be glad to reply.

Download the pre-made documents here.
Learn more about forms here
Inputs can be referenced here

RE: [TUT] Contact Form using HTML/PHP - °Monster° - 02-24-2010

Very nice tutorial.
Good work Thumbsup

RE: [TUT] Contact Form using HTML/PHP - Peachy™ - 02-25-2010

Easy to read and understand,
Well done.
7/10

RE: [TUT] Contact Form using HTML/PHP - Captain Straight Edge - 02-25-2010

(02-25-2010, 08:45 AM)Peachy™ Wrote: Easy to read and understand,
Well done.
7/10

Thanks a lot!

RE: [TUT] Contact Form using HTML/PHP - Lukas - 02-25-2010

Very nice, and simple tutorial.
Very well thought out.
8/10

Lukas

RE: [TUT] Contact Form using HTML/PHP - Captain Straight Edge - 02-25-2010

Thank you for the thoughts!

RE: [TUT] Contact Form using HTML/PHP - Foresight - 03-05-2010

Sweet tutorial. It's easy to understand, and is very helpful. Thanks for the share.

RE: [TUT] Contact Form using HTML/PHP - Pk3r_Pjer - 05-07-2010

Very nice tutorial, I'm going to put this contact form on my website.

RE: [TUT] Contact Form using HTML/PHP - Fragma - 05-09-2010

Very nice tutorial. Easy to understand.

RE: [TUT] Contact Form using HTML/PHP - Julie - 05-09-2010

Awesome tutorial, I'm testing it right now.
Thanks