Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[TUT] Contact Form using HTML/PHP
#1
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
[Image: nt94ptmobbde3zcmtx08.png]
Reply
#2
Very nice tutorial.
Good work Thumbsup
Reply
#3
Easy to read and understand,
Well done.
7/10
Reply
#4
(02-25-2010, 08:45 AM)Peachy™ Wrote: Easy to read and understand,
Well done.
7/10

Thanks a lot!
[Image: nt94ptmobbde3zcmtx08.png]
Reply
#5
Very nice, and simple tutorial.
Very well thought out.
8/10

Lukas
Reply
#6
Thank you for the thoughts!
[Image: nt94ptmobbde3zcmtx08.png]
Reply
#7
Sweet tutorial. It's easy to understand, and is very helpful. Thanks for the share.
[Image: b7yj2x.png]
Reply
#8
Very nice tutorial, I'm going to put this contact form on my website.
[Image: 35m2ur7.jpg]
Reply
#9
Very nice tutorial. Easy to understand.
Reply
#10
Awesome tutorial, I'm testing it right now.
Thanks
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  (HTML,ASP,PHP)Help Thread Web 2 1,313 11-16-2013, 09:25 AM
Last Post: sarvsav
  Contact form for HTML Crystal 36 10,807 05-24-2013, 05:51 PM
Last Post: Akai
  Helping with HTML and CSS Ambitious 0 682 08-28-2011, 01:18 PM
Last Post: Ambitious
  HTML and PHP classes!! How to build a website ImFocuzz 6 1,821 07-13-2011, 08:45 AM
Last Post: Kyle FYI™
  [TUT]Learn to edit and make pics in HTML. SVG coding language. Easy to learn! [TUT] Qua 2 1,438 06-24-2011, 09:42 PM
Last Post: Qua

Forum Jump:


Users browsing this thread: 5 Guest(s)