Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Order forms... How do you do yours?

Discussion in 'Website Coding & Programming Forum:' started by GingerChris, Jan 17, 2009.

  1. GingerChris

    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:
     
  2. Stationery Direct

    Stationery Direct Administrator Staff Member

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

    GingerChris Member

    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
     
  4. Stationery Direct

    Stationery Direct Administrator Staff Member

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

    GingerChris Member

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

    Helen Member

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

    GingerChris Member

    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)
     
  8. Helen

    Helen Member

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

    GingerChris Member

    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?
     
  10. Helen

    Helen Member

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

    Xenonsoft Active Member

  12. GingerChris

    GingerChris Member

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

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

    [​IMG]

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

    GingerChris Member

    any takers?

    My deadline is fairly soon with this one...
     
  14. Helen

    Helen Member

    Have you got your css code as well please :)
     
  15. GingerChris

    GingerChris Member

    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;
    }
     
  16. Helen

    Helen Member

    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?
     
  17. GingerChris

    GingerChris Member

    It supposed to look like:

    [​IMG]

    but with a form underneath the text in the white box
     
  18. Helen

    Helen Member

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

    GingerChris Member

    still crying, i'm afraid
     
  20. GingerChris

    GingerChris Member

    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
     

Share This Page