Change form layout for purchase order into 3 columns

  • Profile Image
    churchsaver
    Asked on May 27, 2015 at 08:53 AM

    would like to go into columns with a few other changes

  • Profile Image
    Chriistian
    Answered on May 27, 2015 at 10:28 AM

    Hi churchsaver,

     

    To change the format as you specified, you may inject the following CSS code to your form.

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 200px;

    text-align: center;

    }

    .form-product-item img {

    width: 150px;

    height: 150px;

    float: none !important;

    margin: auto !important;

    }

    .form-product-item + br {

    display:none;

    }

    br + b {

    float: left;

    padding-top: 20px;

    }

    .form-payment-total {

    line-height: 50px;

    margin: 1px;

    border: 0px solid #EFEFEF;

    border-radius: 4px;

    padding: 15px;

    padding-right: 193px;

    padding-left: 6px;

    }

    .form-product-item .form-sub-label-container {

    width: 200px !important;

    }

    span.form-sub-label-container input {

    float: none !important;

    }

     

    To inject the CSS code to your form, please follow the guide below.

     

    Note: You have to inject the code at the end of your previously injected CSS codes.

     

    Do let us know if you need further assistance.

     

    Regards

  • Profile Image
    churchsaver
    Answered on May 29, 2015 at 09:39 AM

    For some reason it just put everything in 1 column for me.  Am I doing something wrong?

  • Profile Image
    churchsaver
    Answered on May 29, 2015 at 09:41 AM

    And is there a way to take the check marks off?  Thanks in advance!!! :)

  • Profile Image
    Sammy
    Answered on May 29, 2015 at 11:55 AM

    I have revised the form CSS by Chriistian and made it to take three columns

    You can get a copy of it from this URL , you can also use the design section to edit the css if you want real time changes and to tweak the values.

    http://form.jotformpro.com/form/51484145154958

     

    It is not advisable to hide the check boxes as this will make the users unable to select the type of package they want.

     

    I have hidden it just for illustrative purposes, it the last line in the custom CSS

     

     

  • Profile Image
    churchsaver
    Answered on May 29, 2015 at 04:44 PM

    I'm sorry... I'm a little lost....  Where do I find the code to inject?  Any way you can put it here for me to copy and paste?  I'm a little green when it comes to this.

     

    Thanks In Advance!

  • Profile Image
    BDAVID
    Answered on May 29, 2015 at 05:57 PM

    In this case I do recommend you to simply clone my colleague's form(http://form.jotformpro.com/form/51484145154958) example in your account and use the cloned version.

    Check this guide in order to clone that form in your account: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

     

  • Profile Image
    churchsaver
    Answered on May 31, 2015 at 04:56 PM

    Is there any way I can just be provided some css code to inject?  That would really be helpful, as I already have some things linked to that specific form and if I created a whole new one it would mess up what is going on with what I already have in place.

    Thanks in advance!

  • Profile Image
    Syed
    Answered on May 31, 2015 at 05:41 PM

    Hi there;

            Here is the CSS Code Block to make this layout. Read our guide here on How to Inject Custom CSS Codes. Review the following screenshots for confirmation.

    #cid_1 {float: left !important;}

    .form-product-item {width: 200px !important;}

    Output:

    Here is the cloned version that I made for this particular thread, you can clone this form if you want, anytime; http://form.jotformpro.com/form/51506769360964.

    I hope this helps. Let us know if you still having any issues on this, we would be happy to assist you.

     

    Thankyou,

  • Profile Image
    churchsaver
    Answered on May 31, 2015 at 06:27 PM

    I'm still only getting two columns. Any way to get that to 3 columns?

  • Profile Image
    Syed
    Answered on May 31, 2015 at 06:32 PM

    What screen resolution you're using, if you could please attach a screenshot here, that would be great. Let us know, so that we can decrease the width of each product to make 3 column layout.

    Looking forward to hearing from you.

     

    Thankyou,

  • Profile Image
    churchsaver
    Answered on June 01, 2015 at 09:22 AM

    1920x1080

  • Profile Image
    Syed
    Answered on June 01, 2015 at 09:35 AM

    Great, thankyou for your response. Please try to inject the following CSS Code Block, I have updated the code.

    #cid_1 {text-align: center !important; float: left !important;}

    .form-product-item {width: 160px !important;}

    Review the following screenshot for confirmation.

    Here is the form link; http://form.jotformpro.com/form/51514080473954. Do let us know if you still having 2 column layout, I have reduced the width of each product. Hope this helps. Looking forward to hearing from you.

     

    Thankyou,

  • Profile Image
    churchsaver
    Answered on June 02, 2015 at 10:21 AM

    That worked.  Any way to make where it says "# of Boxes" center?

  • Profile Image
    Syed
    Answered on June 02, 2015 at 10:38 AM

    Glad to hear that, please inject the following CSS Code Block to align "# of Boxes" text center.

    .form-sub-label {text-align: center !important; position: relative !important; left: 22px !important;}

    Review this screenshot for confirmation.

    Hope it will all-set! Do get back to us, if you need further assistance, we would be happy to assist you.

     

    Thankyou,

  • Profile Image
    churchsaver
    Answered on June 02, 2015 at 11:28 AM

    That worked.  Is there a way to also get the box that you put the amount in to be centered?

  • Profile Image
    Syed
    Answered on June 02, 2015 at 11:53 AM

    Yes you can align textboxes to be centered. Please try to inject this CSS Code Block for textboxes.

    .form-product-item .form-sub-label-container {width: 200px !important;position: relative !important; left: 22px !important;}

    .form-sub-label {text-align: center !important;position: relative !important;left: 0px !important;}

    Review the following screenshot for confirmation.

    Hope this helps. Let us know if you need further assistance, we would be happy to assist you.

     

    Thankyou,