Please let me know if you used this tutorial.
Please do not redistribute my tutorial.
Please contact me if you have any questions about this tutorial.

creating a form tutorial

This will be broken down to explain what each section is. This is MY coding. I literally wrote the coding myself which took me a few hours to get it right. PLEASE do not redistribute the coding in any way. PLEASE do not modify the coding in anyway and then redistribute. It would still be jocking. PLEASE credit me wherever you use this at :)

The Steps

1. To start off. Put this coding in wherever you want the form at. I will not explain this part of the coding because it's basically the layout of the form. It's pretty easy to understand if you just look at it. It's basically the style of the whole thing. Feel free to modify it if you want (be very careful), but that does not make the coding yours so please still credit me.

body{

font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}

p, h1, form, button{border:0; margin:0; padding:0;}

.spacer{clear:both; height:1px;}

.myform{

margin:0 auto;

width:400px;

padding:14px;

}

#basic{

border:solid 2px #DEDEDE;

}

#basic h1 {

font-size:14px;

font-weight:bold;

margin-bottom:8px;

}

#basic p{

font-size:11px;

color:#666666;

margin-bottom:20px;

border-bottom:solid 1px #dedede;

padding-bottom:10px;

}

#basic label{

display:block;

font-weight:bold;

text-align:right;

width:140px;

float:left;

}

#basic .small{

color:#666666;

display:block;

font-size:11px;

font-weight:normal;

text-align:right;

width:140px;

}

#basic input{

float:left;

width:200px;

margin:2px 0 30px 10px;

}

#basic button{

clear:both;

margin-left:150px;

background:#888888;

color:#FFFFFF;

border:solid 1px #666666;

font-size:11px;

font-weight:bold;

padding:4px 6px;

}

#stylized{

border:solid 1px #000000;

background:#ffffff;

}

#stylized h1 {

font-size:14px;

font-weight:bold;

margin-bottom:8px;

}

#stylized p{

font-size:11px;

color:#666666;

margin-bottom:20px;

border-bottom:solid 1px #b7ddf2;

padding-bottom:10px;

}

#stylized label{

display:block;

font-weight:bold;

text-align:right;

width:140px;

float:left;

}

#stylized .small{

color:#666666;

display:block;

font-size:11px;

font-weight:normal;

text-align:right;

width:140px;

}

#stylized input{

float:left;

font-size:12px;

padding:4px 2px;

border:solid 1px #aacfe4;

width:200px;

margin:2px 0 20px 10px;

}

#stylized button{

clear:both;

margin-left:160px;

width:125px;

height:31px;

background:#444;

text-align:center;

line-height:31px;

color:#FFFFFF;

font-size:11px;

font-weight:bold;

}

</style>

</head>

2. Underneath of that coding you will be putting the following in. First let me explain what they're are. THEN, you will get the code for this part.

This is basically what is going to email your contact form + it's like the "Thanks for contacting me" page. Don't worry we'll get back to that later.

Where it says Name next to label - This will be the first thing the person fills out on your form. This can be changed to anything you want. Where it says input type "text" and "name" - Keep "text" there, but for "name" whatever your question thing is put it there. For example - that's my name section so I named it "name". Do not make that really long. You do this step for every single question thingie you have (name, email, ect)

This is like the step above, BUT it has a little more added to it incase you want to add this to any of your questions. Add the highlighted section to any of your questions (name, email, ect) if you want it as a little note under it on the form. If you don't want a little side not then skip this little paragraph.

This is the little note (highlighted in yellow) the part above would create.

This section is if you want a message box in your form. You wont have to edit this part at all unless you want to change the span class or Message: part.

If you don't know what message box I am talking about it's this:

This part is the submit coding. When someone is done filling out your form they will click the submit button. Do not edit this part at all.

There is little bits and pieces of coding in there that I did not explain. It doesn't really need explaining, but don't remove or modify anything I didn't explain.

Here is the coding for what you just learned. Put this in underneath of the style coding you should have previously put in. Make sure you edit the words and little note things to your own words or keep them the same depending on the form you're creating.

3. Nope, you're still not done. You're done with every piece of coding above except this part which we will get back to at the end.

Now you have to create another file for what your "thank you" page will be. If you look above my thank you page is "contactformthankyou.php" This thank you page also requires coding on it that will send your form to your email. You have to do this or your form will not work. So create your file. Make sure it's a .php file.

4. Now that you have created this new file. Make sure you're on it. You will be putting in the coding for this part after I explain it first.

5. First off lets look at the name you gave to the highlighted part below earlier.

Where it says name="name" above. Remember what you named all of yours? (name, email, facebook, ect). Good hopefully you do.

For this part of the coding (yet again the actual coding is after I explain every piece of it for this step) you will have to modify the highlighted part for each name you have. For example. This is my contact form coding. I have the name, email, facebook, message part in my coding from step 2.

This part is kinda like the one above. It's hard to explain this part but basically it's the actual email you will be reading. See where it says Name? That's exactly what you want it to say when it emails you (if that's the 1st thing on your form). Next to it is has the symbol and says name. That is what includes THERE answer in your email.
Lets say you want it to say What time is it? and your name= is name="time". For this part it'd say What time is it ...then the symbol thing...and then the word time. this parts a little difficult to explain so hopefully you get it :(

If you're still with me and understanding this tutorial - this part is so easy it's ridiculous. You just change where you see my email to whatever email you want the form to send to.

Yet another easy section :] This is the subject of the email that will be sent. Change where you see "Contact Me Application" to whatever you want the subject of the email to be.

This is easy too. If you have there name or email put in whatever you want the mail to say who it's from. Make sure it's the same name you named (name="name") on step 2. I keep mine as email cause I ask for a email on every single form I make. If its set to email this means when they submit the form to you the email you will receive will say From: (THERE EMAIL HERE)

DO NOT EDIT THIS SECTION IN ANY WAY.

The final part of this coding :) After the person filling out your film clicks submit they will be taken to a page. This part is what that page will say. Do NOT put any br (line space) coding in this part. The form will not work. I'm not sure if images will work as I haven't tested that yet.

Here is the coding for everything I just showed you! PLEASE READ::: In order to give you that code I had to take out the beginining < and ending >.
This means that next to the very first question mark you see put a < on the left side of it.
For the very end question mark you see put a > on the right side of it.

6. This is the last thing you have to do. Go back to the original form code you created in step 2. Whatever your thank you page with the coding you literally just put in is called make sure this section is linked to it!

click here to go back to the homepage

My Finished Product
click hereeee

ADDING RADIO BUTTONS, CHECKBOXES, DROPDOWN BOXES

This is incredibly difficult for me to explain. I will put this part on here eventually so please be patient.

If you used this please let me know! :)