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

    how do I align my different products

    Asked by dcueba on March 30, 2014 at 02:21 AM

    I have several products on my order form.  For some reason "Prints" doesn't align with the rest of them.  How can I make everything uniform?  It would be nice to also be able to get rid of the check boxes next to the categories if possible.  Thanks!

    Page URL:
    http://www.jotform.com//?formID=40870792186160

    different order form next check thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 30, 2014 at 06:25 AM

    Hi,

    Your form prints nicely on Chrome upon checking it here. Though the first and last sub-products has more options so it displays below its thumbnail.

    If you want to align them beside the image, add this CSS codes to your form.

    .form-product-item {

    display: inline;

    }

    Result:

    Hope this helps!

  • Profile Image

    Answered by dcueba on March 30, 2014 at 05:24 PM

    awesome.  thanks.  one last question... is it possible to make the categories for my products bold and remove the check box to the left of them?  When I look at the preview, if I uncheck the category, I can't get it back so I think it would be better not to have a check box there to begin with.  Thanks so much.

  • Profile Image
    JotForm Support

    Answered by abajan on March 30, 2014 at 09:17 PM

    Sure. Just add the following rules to the form's injected CSS and save the form:

    #id_7 .form-checkbox {
    display: none;
    }

    .form-product-item label {
    font-weight: bold;
    }

    Do let us know if you need further assistance.

     

    Cheers

  • Profile Image

    Answered by dcueba on April 03, 2014 at 07:18 PM

    Okay, I made some revisions and now it reverted back to the checkbox.  I entered what you told me to above and it did make the categories bold but the check box is still there.  Can you give me another magic code to make the checkbox go away?  Also to make the "My Products" heading bold?  Thanks!

    http://form.jotform.us/form/40918526699167

  • Profile Image

    Answered by dcueba on April 03, 2014 at 07:30 PM

    Continued from above post...  Actually for the "My Products" heading, can I make it like it appears here instead?

    http://form.jotform.us/form/40917712388158

  • Profile Image

    Answered by Cesar on April 03, 2014 at 10:49 PM

    If you want to have absolutely all checkboxes removed from the form, then add the code like so:

    .form-checkbox {
    display: none;}

    .form-product-item label {
    font-weight: bold;} 

    In regards to the second post, I apologize as I may be failing to understand your question as I see you have the heading as you want it on your form. In which case I would say yes, you can make it appear like in your example.

    Which are the parameters set for:

    .form-label-top {
    background: #efefef;
    border: 1px solid #ccc;
    padding: 4px 0px 3px 8px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    width: 654px !important;

    Do let us know if you need further assistance. Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on April 04, 2014 at 03:51 AM

    @dcueba

    Setting the alignment of the My Products label from Left to Top
     


    will make the label look like that in the older form. There's a comment in the form's injected CSS immediately above the rule to which Cesar referred, hinting that the selector should be .form-label-left. That would work too but the label would appear too close to the first product's heading. So, it's better to leave the rule as is and change the label alignment to Top.

    As far as the checkboxes are concerned,

    #id_7 .form-checkbox {
    display: none;
    }

    didn't work because the ID of the field in the updated form (http://form.jotform.us/form/40918526699167) is id_19 and not id_7. The rule provided by Cesar will work but as he stated, it will remove all checkboxes from the form. So, if you intend to add other checkbox fields to the form, they won't be shown either and you would need to change the rule to

    #id_19 .form-checkbox {
    display: none;
    }

    to affect just the My Products field.

    Do let us know if you need clarification on any of the above.


    Thanks