Page 1 of 5 123 ... LastLast
Results 1 to 10 of 45

Thread: Help creating order form

  1. #1
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Help creating order form

    okay... this might be difficult to explain, but I'll try my best. I need to set up an order form in my website that will send a completed form to an email address when someone hits 'submit'. I also need the form to be... progressive? I think that's how to describe it... basically someone will pick an option in the first part, and then something else will come up depending on what they choose. I think if someone can give me the basic code for that I can figure out how to change it to whatever I need. (try and give the code in pieces though and PLEASE explain what each part does, if you can. That will help me understand it better...)

    I had an idea of how to make the outline for the order form, but I don't know if it will work. If I make a table of some kind within my page, can I apply code to different parts to do the progressive thing I want in it and then email the table itself to me? Or is there an easier way, even if that would work?

    If anyone is confused about anything in this post, ask me about it and I'll try to explain as best as I can.......

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I think I know what you're looking for, but just to clarify:

    1. Is this to be on one page, or spread out over multiple pages?

    For example, would you like the user to submit the form in "part 1" and then based on those responses, decide what "part 2" will look like? Or, would you like something that mimics this logic -- each option yields other options.

    The latter would only work if the choices can be predetermined (i.e. there are no user inputted choices). So, if you're trying to test against a text field, it would be best to spread across many pages. In theory, you could use some client-side validation (read: javascript) to do this on one page, but that might be limited by your setup.

    2. Do you have PHP available on your server?

    3. This information is to be emailed, correct? Are you saving it to a database as well?

  3. #3
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    1. It's only going to be one page. All the other pages are information and display type stuff...

    Something like that example might work, but there needs to be a couple areas where they can enter their own information... I don't know if I can get that script to work in combination or not...

    2. I'm not sure...

    3. Yes - after a client finishes the form and hits 'submit', it should go to my email. About the database... I wasn't planning on it, but I think that would be a good idea. Would that be included with the email function or would I have to set up something special for it?

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    1. It's only going to be one page. All the other pages are information and display type stuff...

    Something like that example might work, but there needs to be a couple areas where they can enter their own information... I don't know if I can get that script to work in combination or not...
    Ok. That script itself won't work for your needs. And altering it will probably be a difficult route to take. There are easier ways to show/hide content. This is an example that I made for someone that shows such a technique.

    I'm not sure...
    You'll need to figure that out. Because it can't be done otherwise. You can run the phpinfo() test to check. If you're on a windows server, you could use ASP and MSSQL (in which case I won't be able to help, because I know nothing about those languages).

    Yes - after a client finishes the form and hits 'submit', it should go to my email. About the database... I wasn't planning on it, but I think that would be a good idea. Would that be included with the email function or would I have to set up something special for it?
    Well, you would need to write special code for it. You'll also need to set up the database. But it can all be done at the same time, if that's what you mean.

    Run the PHP test and confirm that it's available, and then I"ll walk you through it.

  5. #5
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Thank you! I'll check that and then get back to you.

  6. #6
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    okay, I installed WAMP on my USB drive... I can use it both at home and at school that way. I started working on part of the form... here's what I've got so far:

    HTML Code:
    <h1><p align="center"><font color="FF0000">To Order:</font></p></h1>
    <form id="form1" name="form1" method="post" action="">
    Order Form:
    <br><br><form id="form2" name="customer information" method="post">
      <label>Contact Information:</label>
      <br />
      <p>Name:  <br />
        <textarea name="customer name" id="customer name" cols="45" rows="2" 
        maxlength="30" onkeyup="return ismaxlength(this)"></textarea><br /><br />
      Email Address:<br />
      <textarea name="customer email" id="customer email" cols="45" rows="2"
      maxlength="50" onkeyup="return ismaxlength(this)"></textarea><br /><br />
      Mailing Address: (optional)<br />  
      <textarea name="Mailing Address" id="Mailing Address" cols="45" rows="5"></textarea>
      </p>
    </form>
    <form id="form3" name="Product orders" method="post">
    <label>Product Ordering</label>
    <p>Select Servie/ Product(s) you wish to order:<br />
     <label>
      <input type="checkbox" name="Logo Design" id="Product" />
      Logo Design
      </label>
      <label>
      <input type="checkbox" name="Business Card" id="Product"/>
      Business card design
      </label>
    <label>
      <input type="checkbox" name="Web Graphic" id="Product"/>
      Web Graphic (forum use)</label> <label>
      <input type="checkbox" name="Fliers/Handouts" id="Product"/>
      Fliers/ Handouts
      </label> <label>
      <input type="checkbox" name="Notecards" id="Product"/>
      Note Cards  </label><label>
      <input type="checkbox" name="other" id="Product"/>
      Other  </label></form>
    I didn't think I need to put any special code in the Customer information part, so that's why I started on it. I also put in the checkboxes for the different products. Is it possible with php to make it so that when someone checks one or more of the boxes, the specifications they need to fill out for each product will come up under the boxes? If not, I can change whatever I need to to make it work better...

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Great!

    After looking at your form, I'm assuming that the input-specific parts stem from the services -- click web graphics would show web-graphics pertinent questions. Hopefully that assumption is correct.

    To do this, we can utilize a script like this:
    Code:
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>
    What this says is, if an element with a specified id is visible (display="block") set it invisible (display="none"). If it's visible, set it to invisible. We'll be calling this script every time one of the checkboxes is clicked. So the checkbox becomes a on/off toggle to show/hide certain parts of the form.

    How do we call this when you click in the checkbox? With the onClick event.
    Code:
    <input type="checkbox" value="id of div you want to show/hide" onClick="toggle_visibility(this.value)">
    Does that make sense? Let me know if you have any questions thus far. If not, I'll move on to the PHP bit.

    I was a bit confused by the HTML you posted above. You have several forms on the page. Why is that? Are you just trying to separate/organize the form or is there some sort of specific functionality you're trying to achieve. You can only submit one form at a time, so multiple form elements won't work in this instance.

    I took the liberty of cleaning up your HTML, replacing the deprecated elements (<font>, <align>) and adding some CSS styling. Your page so far should look like this (or similar):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 	"http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>Order Form</title>
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>
    <style type="text/css">
    
    .cssform p{
    width: 300px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px; /*width of left column containing the label elements*/
    border-top: 1px dashed gray;
    height: 1%;
    }
    
    .cssform label{
    font-weight: bold;
    float: left;
    margin-left: -155px; /*width of left column*/
    width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
    }
    
    .cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
    width: 180px;
    }
    
    .cssform textarea{
    width: 250px;
    height: 150px;
    }
    
    .hidden {
    	display:none;
    }
    
    /*.threepxfix class below:
    Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
    to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
    */
    
    * html .threepxfix{
    margin-left: 3px;
    }
    
    </style>
    
    <body>
    
    
    <form id="myform" class="cssform" action="">
    
    <p>
    <label for="user">Name</label>
    <input type="text" id="user" value="" />
    </p>
    
    <p>
    <label for="emailaddress">Email Address:</label>
    <input type="text" id="emailaddress" value="" />
    </p>
    
    <p>
    <label for="mailingaddress">Mailing Address:</label>
    <textarea id="mailingaddress" rows="5" cols="25"></textarea>
    </p>
    
    
    <p>
    <label for="services">Services:</label>
    <input type="checkbox" name="services" value="logo_design" onClick="toggle_visibility(this.value)" /> Logo Design<br />
    <input type="checkbox" name="services" value="business_card" class="threepxfix" onClick="toggle_visibility(this.value)" /> Business Card Design <br />
    <input type="checkbox" name="services" value="web_graphics" class="threepxfix" onClick="toggle_visibility(this.value)" /> Web Graphics <br />
    <input type="checkbox" name="services" value="flyers" class="threepxfix" onClick="toggle_visibility(this.value)" /> Flyers/Handouts <br />
    <input type="checkbox" name="services" value="notecards" class="threepxfix" onClick="toggle_visibility(this.value)" /> Notecards <br />
    <input type="checkbox" name="services" value="other" class="threepxfix" onClick="toggle_visibility(this.value)" 	/> Other <br />
    </p>
    
    <p id="logo_design" class="hidden">
    <label for="services">Logo Design:</label>
    </p>
    <p id="business_card" class="hidden">
    <label for="services">Business Card Design:</label>
    </p>
    <p id="web_graphics" class="hidden">
    <label for="services">Web Graphics:</label>
    </p>
    <p id="flyers" class="hidden">
    <label for="services">Flyers/Handouts:</label>
    </p>
    <p id="notecards" class="hidden">
    <label for="services">Notecards:</label>
    </p>
    <p id="other" class="hidden">
    <label for="services">Other:</label>
    </p>
    
    <div style="margin-left: 150px;">
    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
    </div>
    
    </form>
      
      
     
    </body>
    </html>
    CSS courtesy of Dynamic Drive style library.
    Last edited by Medyman; 05-17-2008 at 03:54 AM.

  8. The Following User Says Thank You to Medyman For This Useful Post:

    Twilightrose917 (05-17-2008)

  9. #8
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Your assumption was correct on that, yes. And with the forms - you were right in your first guess - I was trying to give it a little organization within the form itself, but I didn't know that wouldn't work. Thanks for cleaning up my code - it looks much better now.

    okay - I put that code in, and I understood all that well enough... now my question is: Where do I put the text (questions pertaining to each service) that I want to appear when the checkbox is clicked?

    Nevermind - I figured it out. THANK YOU SO MUCH!!!

    and... after I finish putting in the specifications for all the service items, is there anything else I need to do for that part or can we start working on the database thing? (and the email thing too, I suppose........)

    Thanks again for all the help!
    Last edited by Twilightrose917; 05-17-2008 at 03:36 AM.

  10. #9
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Where do I put the text (questions pertaining to each service) that I want to appear when the checkbox is clicked?
    Code:
    <p id="logo_design" class="hidden">
    <label for="services">Logo Design:</label>
    <!-- Logo Design specific goes here -->
    </p>
    <p id="business_card" class="hidden">
    <label for="services">Business Card Design:</label>
    <!-- Business Card specific goes here -->
    </p>
    <p id="web_graphics" class="hidden">
    <label for="services">Web Graphics:</label>
    <!-- Web Graphics specific goes here -->
    </p>
    <p id="flyers" class="hidden">
    <label for="services">Flyers/Handouts:</label>
    <!-- Flyer specific goes here -->
    </p>
    <p id="notecards" class="hidden">
    <label for="services">Notecards:</label>
    <!-- Notecards specific goes here -->
    </p>
    <p id="other" class="hidden">
    <label for="services">Other:</label>
    <!-- Other specific goes here -->
    </p>

  11. #10
    Join Date
    Feb 2008
    Location
    Not telling! (sorry...)
    Posts
    48
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    or at least i thought i had it figured out... I was messing around with it before I saw your message, and I kind of got it to work. Or at least I got things to show up, just not how I thought they would. Then I saw your post, and put the bracket thing
    HTML Code:
    <!-- specific info goes here -->
    in the script and started messing with it. But nothing ever showed up when I checked the box other than what you put in there. What am I doing wrong? (majorly confused)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •