Making 2 colums for pay pal drop down order form

  • Profile Image
    JnJdoodle
    Asked on September 05, 2012 at 03:35 AM

    Hi Im using the product drop down with paypal and need to find a way to make it into two colums instead of one really long scrolling form on the web. Is this possible just want to make it easier for customers to order without having to scroll through a ton of drop down shirts. Thank you for your help

  • Profile Image
    idarktech
    Answered on September 05, 2012 at 03:51 AM

    Hi,

    That's possible using your form source code. Please take a look at this thread for more information's.

    http://www.jotform.com/answers/109537-Possible-To-Have-Two-Columns-With-Products-in-Paypal-Pro-Setup

    Let us know if you require assistance on this. Thanks.

  • Profile Image
    JnJdoodle
    Answered on September 05, 2012 at 04:19 AM

    So I'm still really new and not sure just trying to help my web designer make the form look a little clearner. He is using dreamwever and honestly I have no idea where to look for that css code that will make the two colums.

    http://www.doodlebugd.com/order-form.html

  • Profile Image
    idarktech
    Answered on September 05, 2012 at 06:36 AM

    I have tried it with your form. Here's the full source code: http://pastebin.com/raw.php?i=cTS4MM1P

    See how it looks like here: http://idarktech.com/test/test_form_two_column_product.html

    You can use that full source code for embedding. Let us know if you have further questions. Thanks!

  • Profile Image
    JnJdoodle
    Answered on September 11, 2012 at 10:09 PM

    K so when I looked at your example of the page, http://idarktech.com/test/test_form_two_column_product.html I still only see one colum. My order form is just too long and will only be getting longer when I contiune to add more products to it. Still looking for some help.

     

    Thank you for all your help I know we will get help with this.

  • Profile Image
    idarktech
    Answered on September 11, 2012 at 10:42 PM

    @JnJdoodle,

    This is actually what I mean for: http://pasteboard.s3.amazonaws.com/images/1347416141107140.png

    Is it not showing the same on your end? It should be in two columns, unless this isn't the correct layout that you're looking for :)

    --

    Another alternative workaround for this is to add a fixed height for your product field and make the products scrollable. Example form (a cloned of your form): http://www.jotform.me/form/22548416742456?

    Just in case you like this :), you can clone this form back: How to clone an existing form from a URL

    Are you satisfied with this? Actually this is the only two workaround I could think of.

    Thanks!

  • Profile Image
    JnJdoodle
    Answered on September 11, 2012 at 10:59 PM

    Awesome thank you soooooo much, I am thinking that the scrolling be a better fit for me, i read how to clone do I need to change the css code for site to make new form active? Sorry still a nub and would have to have my designer do the css change for me with his dreamweaver.

  • Profile Image
    idarktech
    Answered on September 11, 2012 at 11:07 PM

    Thanks!

    When you clone that form, you'll see the CSS codes on your form settings. You may check this guide to find it out: How to Inject Custom CSS Codes

    Here's the CSS codes I've used:

    /*---make product scrollable---*/

    #cid_13{

    height: 500px;

    overflow-y: scroll;

    width: 405px;

    }

     

    /*--- separate/position the total field---*/

    .form-payment-total{

    position: absolute;

    top: 520px;

    left: 175px;

    }

     

    /*--- use for each product spacing---*/

    .form-product-item {

    width: 310px !important;

    margin-bottom:15px !important;

    }

    I've labeled each CSS for a tip :)

    Thanks!

  • Profile Image
    JnJdoodle
    Answered on September 11, 2012 at 11:22 PM

    All I can say is that you sir are awesome, thank you so much for all your help on this and I'll pass this information onto my designer. I was able to create the scrolling form on my end, after getting all this help from you. First time user of jotform and I use it more and tell others, Again many thanks.

  • Profile Image
    idarktech
    Answered on September 12, 2012 at 01:58 AM

    Glad to be of assistance, JnJdoodle. If you have any other questions or concerns, just let us know.

    Cheers!