What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change form layout for purchase order into 3 columns

    Asked by churchsaver on May 27, 2015 at 08:53 AM

    would like to go into columns with a few other changes

    Page URL:
    getcashfordiabeticteststrips.com

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian 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

    Answered by churchsaver 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

    Answered by churchsaver on May 29, 2015 at 09:41 AM

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

  • Profile Image

    Answered by Sammy 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

    Answered by churchsaver 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
    JotForm Support

    Answered by BDAVID 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

    Answered by churchsaver 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

    Answered by Syed 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

    Answered by churchsaver 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

    Answered by Syed 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

    Answered by churchsaver on June 01, 2015 at 09:22 AM

    1920x1080

  • Profile Image

    Answered by Syed 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

    Answered by churchsaver on June 02, 2015 at 10:21 AM

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

  • Profile Image

    Answered by Syed 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

    Answered by churchsaver 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

    Answered by Syed 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,