Because of fraud, we have had to restrict sales to the 50 US states.

  • Profile Image
    power2u
    Asked on September 23, 2011 at 11:39 PM
    Because of fraud, we have had to restrict sales to the 50 US states. But want to continue selling overseas (and Canada)I created a lightbox form on the checkout page to collect contact info (ship to address) and order info. I'd like to have it set up so there are 4 fields in a row collecting Quantity, Product Name, Price and Total. With total, it would be great if it did the math, but not essential. Total can also be skipped if it's a problem.Is this possible?

    This is a re-post of a comment on Form Field Positioning

  • Profile Image
    mliz
    Answered on September 24, 2011 at 12:39 PM

    Hi,

    Can you send us the url of the page where the lightbox is added?
    We'd be happy to provide a solution for the setup presented.

    We'll await for your response.

    Regards,
    Mliz

  • Profile Image
    power2u
    Answered on September 24, 2011 at 01:12 PM
    Thanks, you guys are the best.

    It’s on the checkout page at our store, so I can’t give you a URL. You will have to visit the store at http://www.power2u.org/mm5/merchant.mvc?, pick any item from the store and put it in the shopping cart, then proceed to checkout. When you get to that page you will see a note I placed there just under where you would enter your username and password. Click the link to use our International Order Inquiry Form.

    Tom



  • Profile Image
    abajan
    Answered on September 24, 2011 at 11:00 PM

    Hi Tom

    Our form builder has a Purchase Order tool whose wizard will enable you to populate the generated field with all of your products. Your customers will then be able to make their selections and see the total (exclusive of any shipping & handling charges, sales taxes and so on) calculated in real time.

    Therefore, to make your form more user friendly, I would suggest substituting such a field for the text area it currently has for that purpose.

    Here is a clone of your form with the suggested change. By default, the Quantity box (with the label "Quantity") appears under the product to which it refers but in this demo form CSS was injected to both move the quantity box to the same line as the product and to remove its "Quantity" label. Injected CSS can also be used to alternately color the product lines. Of course, I have only included a few of your products to give you an idea of how it can look. Incidentally, the Purchase Order tool also allows for the inclusion of product images.

    If you use the Purchase Order tool, below is the CSS that can be injected into your form to achieve the same look as my demo form:

    /* moves products closer to each other */
    .form-product-item {
    padding-bottom:0;
    }

    /* moves Quantity selector to same line as product */
    .form-product-item .form-sub-label-container {
    top:3px;
    left: 310px;
    position: absolute;
    }

    /* hides Quantity label */
    select.form-dropdown + label {
    display:none;
    }

    After replacing the text area in question with the purchase order field, both email alerts will need to be updated. In the Compose Email section of each alert, replace the {pleaseProvide} tag with {products31} or whatever the correct tag happens to be. (Clicking the name of the field in the floating menu on the right will always insert the correct tag.) You will also want to change the text in the Questions column to something simple like "Products Ordered".

    By the way, I ran a test submission on the demo form and notced that the auto-response turned up in my junk/spam folder instead of the inbox. To avoid that, in the Reply-To and Recipient Settings (the envelope) change the Sender E-mail to noreply@jotform.com

    If you need assistance with the purchase order tool or any other aspect of our form builder, do let us know. Our team is always willing to help clients get the most out of our product.

    Cheers


    ~ Wayne

  • Profile Image
    power2u
    Answered on September 25, 2011 at 10:59 PM
    Thanks, the purchase order is really nice. But my client feels that with 47 products, it’s too complicated for the customer; and the form would be really long. They are willing to keep it as is with the text area, and hope that the customer has the ability and patience to paste in what they need and do it in a way that the office staff can understand.

    I think it would only work if we could find a way to do a few lines with boxes for quantity, product name and price.

    Tom



  • Profile Image
    aytekin
    Answered on September 27, 2011 at 09:49 AM

    I think matrix field might do what you would like. You can place a grid with textboxes and the user can enter products, quantity and price. It cannot do totals though.

    You might also be able to pre-populate the questions with the shopping cart contents.

     

  • Profile Image
    power2u
    Answered on September 28, 2011 at 01:55 PM

    The matrix field did the trick, thanks. I had to alter the source code to change the column widths and text box size, but it works and I can now move onto to other stuff!

  • Profile Image
    mliz
    Answered on September 28, 2011 at 04:47 PM

    Hi,

    Glad to know that this was sorted out..all is well.

    Feel free to contact us if you have questions.

    Enjoy using Jotform and have a great day!

  • Profile Image
    abajan
    Answered on September 28, 2011 at 08:27 PM

    Hi again Tom

    Like mliz, I too am glad to know that Aytekin's solution fits your needs. However, its worth noting that its not really necessary to embed the source of the form and add width="77", width="348" and width="45" to the table heading (th) tags in order to effect changes to the respective column widths. That could have been done via injected CSS. Copy the following code and inject it into your form:

    /* sets width of matrix */
    .form-matrix-table {
    width:560px;
    }

    /* left aligns headings and increases their left padding */
    th {
    text-align:left;
    padding-left:5px;
    }

    /* targets the width of the 2nd column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width:332px;
    margin-left:2px;
    margin-right:2px;
    }

    Sure, it's a lot more code but one advantage of using the short embed code instead of the full source is that if you were to have the form embedded in several pages across several websites, updating it would be much easier.

    Cheers


    ~ Wayne

  • Profile Image
    power2u
    Answered on September 30, 2011 at 11:24 AM
    Excellent! Such a versatile tool.



  • Profile Image
    mliz
    Answered on October 01, 2011 at 01:09 AM

    Hi power2u,

    Thank you for the comments, we appreciate it. Feel free to contact us if you have any questions.

    Cheers!