Order forms... How do you do yours?

G

GingerChris

Member
I'm trying to build an order form for my Design for Print Company - but it isn't going well.

Because of the wealth of products I have available, I am building a form for each of them, but that would also mean building a sendmail.php for all of them, that would not only max out my disk space, but also take a LONG time...

I'm just wondering how you guys make your order forms, and whether they are in putted into a database, or emailed to you?

Any advice or inspiration would be welcomed!

GC :icon_biggrin:
 
Exactly the reason i'm thinking it's safer to attempt it myself, although this could end up being a project for a freelancer after a week or so when I get so fed up with it!

Thanks for the input!

GC
 
I've thought about it, but I really want it to just be a simple order form that a user can easily get round.

Visit the Website > Browse Navigation for Product > Read about Product and Prices > Click on the Order Form Link > Fill it in > Hit Submit > Done

rather than trying to skin osCommerce/CubeCart/ZenCart etc
 
My form would be:

<fieldset>
<legend>Contact Details</legend>
Full Name [TEXTBOX]
E-Mail Address [TEXTBOX]
Telehone Number [TEXTBOX]
</fieldset>

<fieldset>
<legend>Delivery Address</legend>
Address Line 1 [TEXTBOX]
Address Line 2 [TEXTBOX]
Town [TEXTBOX]
County [TEXTBOX]
Postcode [TEXTBOX]
</fieldset>

<fieldset>
<legend>Order Details</legend>
Product:

A [RADIOBUTTON]
B [RADIOBUTTON]
C [RADIOBUTTON]

Quantity:

250 [RADIOBUTTON]
1000 [RADIOBUTTON]
2000 [RADIOBUTTON]
3000 [RADIOBUTTON]
4000 [RADIOBUTTON]
5000 [RADIOBUTTON]

Extras:
A [RADIOBUTTON]
B [RADIOBUTTON]
C [RADIOBUTTON]
Other: [TEXTAREA]

Remarks [TEXTAREA]
</fieldset>

Send your order! [BUTTON]
(Preferably to an e-Mail address, but a MySQL Database would be acceptable if no other option was available)
 
That's a really easy PHP form which can be sent to your email no problem.

Here's a link to get you started. Any problems, just ask.
 
The only think im worried about is there will be about 20 forms, each needing an individual process-form, which I think could be resource intensive?

or not?
 
hmmmm? It's do-able

You may actually find once you have made one, you will be able to use it as a template so to speak.

The actual process forms will only be about 800bytes each if that is what you are worried about.
 
Slight issue, i'm not sure whats wrong...

After building my form and previewing in FF, I get this:

80019ae43d9c058brokenpage.PNG


As you can see, the page has broken - the div hasn't been finished and everything has gone wrong.

I'm getting really exasperated now.

This is my code:

HTML: 
<!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 rel="stylesheet" type="text/css" href="style.css" media="screen" />
</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 action="process-business-cards.php" method="post">
 <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:
  <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:
  <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:
  <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"/><br />
  <label for="other">Remarks</label><textarea id="remarks" name="remarks" cols="" rows="5"/><br />
 </fieldset><br />  
<button type="submit">Submit your Order</button>  
</form>
</div>
    <div id="content_right">
      <h4>Business Stationery</h4>            
        <br /><a href="business-cards.html"> - <strong>Business Cards</strong></a>                
        <br />
<a href="plastic-business-cards.html"> - Plastic Business Cards</a>               
        <br /> <a href="compliment-slips.html"> - Compliment Slips</a>         
        <br /><a href="letter-heads.html"> - Letter Heads</a>        
        <br /><a href="no-carbon-pads.html"> - NCR (No Carbon Required) Duplication Pads</a>         
        <br /><a href="stationery-bumper-packs.html"> - Stationery Bumper Packs</a><br /><br />
      <h4>Promotional Materials</h4><br />
      <a href="folded-brochures.html"> - Folded Brochures</a> 
        <br /><a href="greetings-cards.html"> - Greetings Cards</a> 
        <br /><a href="desk-pads.html"> - Desk Pads</a> 
        <br /><a href="coasters.html"> - Coasters</a> 
        <br /><a href="flyers.html"> - Flyers</a> 
        <br /><a href="leaflets.html"> - Leaflets</a> 
        <br /><a href="mousemats.html"> - Mousemats</a> 
        <br /><a href="postcards.html"> - Postcards</a> 
        <br /><a href="posters.html"> - Posters</a> 
        <br /><a href="presentation-folders.html"> - Presentation Folders</a> 
        <br /><a href="stickers.html"> - Stickers</a> 
        <br /><br />
      <h4>Information</h4>
      <br /><a href="special-offers.html"> - Special Offers</a>
      <br /><a href="custom-orders.html"> - Custom Orders</a>
      <br /><a href="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>

Anyone have any solutions?

i'm going off to cry now...
 
Code: 
body {
	background: url(images/background.gif) top center repeat-x #CFDEEA;
	margin: 0px;
	padding: 16px 0;
	font: 11px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
	color: #282828;
	text-align: center;
}
p{
font-size:11px;
text-align:justify;
line-height:16px;
}
img {
	border-style: none;
}
img.pic_left{
float:left;
padding:5px;
margin:0 8px 8px 8px;
border:1px  #CCCCCC solid;
}
a {
	color: #2E9FED;
	text-decoration: none;
}
a:hover {
	color: #1471B1;
}
#welcome h1{
padding:5px 0 0 20px;
margin:0px;

font-size:14px;
color:#FFFFFF;
}
h3{
font-size:14px;
color: #003366;
}
h4{
font-size:13px;
padding:2px;
margin:0px;
color: #003366;
border-bottom:1px #999999 dashed;
}
#container {
	position: relative;
	width: 750px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}

#head {
	width: 750px;
	height: 172px;
	background: url(images/head.gif) no-repeat;
}
#head h1 {
	position: absolute;
	margin: 31px 0 0 36px;
	width: 200px;
	height: 75px;
	background: url(images/logo.gif) no-repeat;
}
#head h1 a {
	text-indent: -2000px;
	width: 154px;
	height: 59px;
	display: block;
	background: url(images/logo.gif) no-repeat;
}
.top_head_banner{
float:right;
width:200px;
height:120px;
background:url(images/top_head.gif) no-repeat right;
background-position:-12px 12px;
}

#menu {
	position: absolute;
	width: 617px;
	top: 155px;
	left: 35px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}
#menu li {
	list-style-type: none;
	float: left;
	margin: 0 8px;
	height: 22px;
}
#menu li a {
	padding: 0 0 7px 0;
	height: 22px;
	color: #8A8A8A;
}
#menu li a:hover {
color:#000033;
}
#menu .current {
color:#000033;
font-weight:bold;
}
#area {
	width: 750px;
	height: 54px;
	background: url(images/area.gif) repeat-x;
}

#main {
	margin: auto;
	background: url(images/bg_main.gif) repeat-y;
	width: 750px;
	height: auto; 
}

#content_left {
float:left;
padding:0 30px 30px 30px;
width: 445px;
height:auto;
}
#content_right{
float:left;
padding:5px;
width: 200px;
height:auto;
}
#welcome {
background: url(images/center_banner.gif) no-repeat;
background-position:12px 0px;
padding:10px;
width: 750px;
height:80px; 
}
.item_box{
width:auto;
height:auto;
padding:10px 0 5px 0;
border-bottom:1px #666666 dashed;
}
.spacer{
width:auto; height:2px; clear:both; padding-bottom:2px;}
/*---------contact----------*/
#form {
	padding: 0px;
	margin: 0px;
}
#fields label {
	width: 260px;
	display: block;
	padding: 0px;
}
#fields input {
	border: 1px solid #C8D2D9;
	margin: 0 0 3px 0;
	width: 260px;
}
#fields textarea {
	border: 1px solid #C8D2D9;
	margin: 0 0 3px 0;
	width: 260px;
	height: 63px;
}
#send input {
	width: 64px;
	height: 20px;
	margin: 0px;
}
ul {
	margin: 0 0 20px 0;
	padding: 0px;
	list-style-type: none;
}
.contact_info{
float:left;
padding:15px;
}

/*work------------*/
.project_details{
float:left;
width:200px;
color:#0099FF;
padding:10px 0 0 10px;
}
#footer {
text-align:center;
font-size:10px;
color:#000033;
background: url(images/footer.gif) no-repeat;
background-position:0px 0px;
padding-top:10px;
width: 750px;
height:85px;
}
#footer a {
	background: none;
	padding: 0px;

}
#madeby{
width:200px;
height:85px;
float:right;
padding-right:30px;
text-align:center;
}
#madeby a{
text-decoration:none;
color:#666666;
}
 
It's hard to see from the piccy. Is the page meant to be white right down?
Is it also meant to be 2 columns?
 
On casual inspection, it looks like you might have one too many end divs......

Code: 
</div><--------remove this one and see if it makes a difference-->
</div>
</body>
</html>
 
Can I have a quote off of someone to build this form, the form processor and the form sucessful page please?

I'm getting to exasperated with it now to do it myself, i've already had to do 3 re-builds.

GC
 
You must log in or register to reply here.
Back
Top