HTML WebForm with PHP and MySQL - Part 1

A friend of mine asked me to create a form on his website so users could submit contracts to him without printing/faxing/attaching to email/etc..... So I said sure. I created a HTML webform and had it emailed to him every time someone clicked submit via a PHP script. Life was happy and he was happy until he started to receive them via plain text and it was unreadable to a non-IT person. So I needed to put it in a more "user friendly" format.

I started with looking for a PHP script that would email a friendlier version with no luck. I found a couple of people that tried but nothing that wasn't super hard to use. It showed very quickly that going down that road wasn't the best. So I decided to put it in a SQL database. His hosting provider gave him 3 databases to use on a shared MySQL server.

I am creating a series of blogs on how I accomplished this task. Stay tuned for more but for now, here is how I wrote the HTML web form.

Preview of the site: http://spinaroundsounddj.com/Contract_Form.html


Part 1
The first step is to create the HTML form. My tasks were to create a "Contracts" webform that looked like his other pages on his site. I had access to his site so the easiest way to start was to get a copy of another page and "Save-As" to a page called Contracts.html. Now that I have a shell of his page (top links, graphics, etc...) I can clean out the middle stuff and add the webform.

Important note to learn now and not later like I did: PHP and MySQL don't do well with CAPTIAL letters. Put everything in lowercase letters - you will be glad you did later.

Start the form with an HTML tag of

<form action="sendresults.php" method="post" name="contractform" id="contractform">
</form>

This will set the form up for you. Out of habit, I always close the HTML tag every time I open one. Just saves you from having to do it later. Let me explain a little about what this command does.

action="nameofphpscript.php" - This is what the submit button will do when it is clicked.
method="post" - You get two options here; POST or GET. very simply, POST puts stuff somewhere and GET gets stuff from somewhere.
name="contractform" - This is the name of the form.
id="contractform" - This is the id of the form

Now you can create all your tables and and inputs remembering to name them with lowercase letters. I set all of my inputs to [type="text"] just to make it easier. Functionality first and make it pretty later!!!

Helpful hint: If I were in your shoes, I would start a list of all the inputs that you make, it will pay off in the PHP script and inserting into SQL part of the blog series.

Now for the all important SUBMIT and RESET buttons. Here is the code:

<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="reset" />

So that will create (2) buttons on our form. One will submit the form to the ACTION="nameofphpscript" that we defined earlier. The other will clear all fields on the form so the user can start all over. The way they are defined by their function is the value="reset" tag in the code.

Now we should have a webform that looks the way that you want it to. Now we have to do something with it once they click submit. Stay tuned as that is the next part of this blog series.