Order forms... How do you do yours?

GingerChris · Jan 17, 2009

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:

Stationery Direct · Jan 17, 2009

Unfortunately this is not something I can advise on as it is waaay over my head, hence we employed somebody to do ours: Stationery Direct Printing, not cheap mind.

GingerChris · Jan 17, 2009

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

Stationery Direct · Jan 17, 2009

Maybe you should be looking at a cost effective (FREE) off the shelf solution such as zencart.

GingerChris · Jan 17, 2009

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

Helen · Jan 17, 2009

So what are you thinking of? A simple PHP mail form?

GingerChris · Jan 17, 2009

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)

Helen · Jan 17, 2009

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.

GingerChris · Jan 17, 2009

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?

Helen · Jan 17, 2009

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.

Xenonsoft · Jan 18, 2009

If looking for a nice, simple ecommerce platform, I'd advise FoxyCart. Not used them, but tempted to.

Modern CSS + XHTML Ecommerce :: FoxyCart.com

GingerChris · Jan 18, 2009

Slight issue, i'm not sure whats wrong...

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

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...

GingerChris · Jan 18, 2009

any takers?

My deadline is fairly soon with this one...

Helen · Jan 18, 2009

Have you got your css code as well please

GingerChris · Jan 18, 2009

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;
}

Helen · Jan 18, 2009

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?

GingerChris · Jan 18, 2009

It supposed to look like:

but with a form underneath the text in the white box

Helen · Jan 18, 2009

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>

GingerChris · Jan 18, 2009

still crying, i'm afraid

GingerChris · Jan 18, 2009

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

Order forms... How do you do yours?

Member

Administrator

Member

Administrator

Member

Member

Member

Member

Member

Member

Active Member

Member

Member

Member

Member

Member

Member

Member

Member

Member