Order forms... How do you do yours?

I noticed when I took out the entire form, the layout was ok. I have a few things to do first, but I will try and take a look later on tonight.
 
Yes - when the form isn't in the page, everything is okay, but then I figured: No point having an order form page, with no order form :p!
 
Good Lord, that was a work out on the old grey matter......

Don't you just hate it when something so simple is staring you in the face!!
All that was wrong was the </textarea> tags were missiing (you ended it as /> which was incorrect)

Anyways, here's your code:icon_smile:
Check it with your CSS and let us know how you get on.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blue box business solutions ~ IT Solutions, Creative Solutions and Administrative Solutions for your business! - Order Business Cards</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="head">
    <h1><a href="http://www.bluebox-business.co.uk/index.html">Blue Box Business Solutions</a></h1>
    <ul id="menu">
      <li><a href="http://www.bluebox-business.co.uk/index.html">Home</a></li>
      <li><a href="http://www.bluebox-business.co.uk/about.html">About Us</a></li>
      <li><a class="current" href="http://www.bluebox-business.co.uk/services/index.html">Design and Print Services</a></li>
      <li><a href="http://www.bluebox-business.co.uk/services.html">Services</a></li>
      <li><a href="http://www.bluebox-business.co.uk/work.html">Portofolio</a></li>
      <li><a href="http://www.bluebox-business.co.uk/contact.html">Contact</a></li>
    </ul>
    <div class="top_head_banner"> </div>
  </div>
  <div id="area"> </div>
  <div id="main">
    <div id="welcome">
      <h1>&nbsp;</h1>
    </div>
    <div id="content_left">
      <h3>Order Business Cards</h3>
      <p>Fill in the form below, and it will be reveiwed by a member of our team. If you select PayPal as your payment method, we will create an invoice to your email account (if this is different to your PayPal email, please specify in remarks). </p>
    
<form  method="post" action="process-business-cards.php">
 <fieldset>
  <legend>Contact Details</legend>
  <label for="name">Full Name:</label><input type="text" id="name" name="name" /><br />
  <label for="email">E-mail address:</label><input type="text" id="email" name="email" /><br />
  <label for="telno">Telephone Number:</label><input type="text" id="telno" name="telno" /><br />
 </fieldset><br />
 <fieldset>
  <legend>Delivery Address</legend>
  <label for="adr1">Address Line 1:</label><input type="text" id="adr1" name="adr1" /><br />
  <label for="adr2">Adsress Line 2:</label><input type="text" id="adr2" name="adr2" /><br />
  <label for="town">Town:</label><input type="text" id="town" name="town" /><br />
  <label for="county">County:</label><input type="text" id="county" name="county" /><br />
  <label for="postcode">Postcode:</label><input type="text" id="postcode" name="postcode" /><br />
 </fieldset><br />
 <fieldset>
  <legend>Order Details</legend>
  Product:<br/>
  <label for="single">Single Sided Full Colour 350gsm</label><input type="radio" id="single" name="single" /><br />
  <label for="double">Double Sided Full Colour 350gsm</label><input type="radio" id="double" name="double" /><br />
  <label for="folded">Folded Full Colour 350gsm</label><input type="radio" id="folded" name="folded" /><br />
   Quantity:<br/>
  <label for="250">250</label><input type="radio" id="250" name="250" /><br />
  <label for="1000">1000</label><input type="radio" id="1000" name="1000" /><br />
  <label for="2000">2000</label><input type="radio" id="2000" name="2000" /><br />
  <label for="3000">3000</label><input type="radio" id="3000" name="3000" /><br />
  <label for="4000">4000</label><input type="radio" id="4000" name="4000" /><br />
  <label for="5000">2000</label><input type="radio" id="5000" name="5000" /><br />
   Extras:<br/>
  <label for="matt">Matt Laminated Finish</label><input type="radio" id="matt" name="matt" /><br />
  <label for="gloss">Gloss Laminated Finish</label><input type="radio" id="gloss" name="gloss" /><br />
  <label for="unlaminated">Unlaminated Finish</label><input type="radio" id="unlaminated" name="unlaminated" /><br />
  <label for="other">Other</label><textarea id="other" name="other" cols="" rows="5"></textarea><br />
  <label for="remarks">Remarks</label><textarea id="remarks" name="remarks" cols="" rows="5"></textarea><br />
 </fieldset><br />  
<button type="submit">Submit your Order</button>  
</form>
      
</div>
    <div id="content_right">
      <h4>Business Stationery</h4>            
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/business-cards.html"> - <strong>Business Cards</strong></a>                
        <br />
<a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/plastic-business-cards.html"> - Plastic Business Cards</a>               
        <br /> <a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/compliment-slips.html"> - Compliment Slips</a>         
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/letter-heads.html"> - Letter Heads</a>        
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/no-carbon-pads.html"> - NCR (No Carbon Required) Duplication Pads</a>         
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/stationery-bumper-packs.html"> - Stationery Bumper Packs</a><br /><br />
      <h4>Promotional Materials</h4><br />
      <a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/folded-brochures.html"> - Folded Brochures</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/greetings-cards.html"> - Greetings Cards</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/desk-pads.html"> - Desk Pads</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/coasters.html"> - Coasters</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/flyers.html"> - Flyers</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/leaflets.html"> - Leaflets</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/mousemats.html"> - Mousemats</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/postcards.html"> - Postcards</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/posters.html"> - Posters</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/presentation-folders.html"> - Presentation Folders</a> 
        <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/stickers.html"> - Stickers</a> 
        <br /><br />
      <h4>Information</h4>
      <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/special-offers.html"> - Special Offers</a>
      <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/custom-orders.html"> - Custom Orders</a>
      <br /><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/frequent-questions.html"> - FAQs</a>    </div>
    <div class="spacer"></div>
  </div>
  <div id="footer">
    <div style="float:left; padding-left:40px;">Content is Copyright 2009 &copy; All Rights Reserved. It is illegal to copy anything from this website.</div>
    <br />
      <a target="_blank" href="http://validator.w3.org/check?uri=referer">xHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
  </div>
</div>
</body>
</html>
 
Last edited:
*blush* Glad to be of help.

You might want to also consider adding this to your CSS (There is a few changes to the form elements to space them all out a bit)

Code:
/*---------contact----------*/
 form	{
font-family: Georgia, Times New Roman, Times, serif;
margin:0;
padding:0;
min-width:400px;
max-width:410px;
padding-top:35px;
padding-bottom: 25px;
}

form label	{
display:block;
float:left;
width:175px;
text-align:left;
margin:8px 0 0;

}

form input,form textarea, form select	{
width:175px;
display:block;
margin:2px 0 0 100px;

}

#send input {
	width: 64px;
	height: 20px;
	margin: 0px;
}
/*---------end of contact----------*/

I do have a efolio, but it's just being re-designed. Hope to have it fully up and running before the end of the week.
 
I just read the whole of this post and it was an emotional journey! They should make a movie about what happened here one day. Great work of you Helen too, you're a whizz with the code and amazingly helpful. I'm gonna pop you a thanks even though I had nothing to do with it
 
Back
Top