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 to align the products in my form?

    Asked by bdoodle on April 26, 2017 at 12:37 AM

    I have made no changes to my forms and I haven't looked at the forms on the website in some months.  Looking now, I see many of my forms have similar problems.  As an example, please see my Gear Order form (https://form.jotformpro.com/52265902147959

     

    The quantity fields on my products (not having subproducts) are now too close to the product description

    price.  See Boom Whoopie and Battens.  Also, the line spacing between products isn't good. Please give

    me the CSS I need to fix this without disturbing the rest of my fields' alignment.

     

    I'm uploading a screenshot showing the problems.

    Thanks for your help.

    Page URL:
    http://www.madsails.com/gear.html

    Screenshot
  • Profile Image
    JotForm Support

    Answered by candy on April 26, 2017 at 04:18 AM

    Hello,

    I have cloned your form on my side in order to test it.

    Firstly, I have injected the following CSS codes in order to fix the first drop-down list as you can see in the following screenshot below:

    #input_349_quantity_1037_0 {

    margin-left: 145px;

     }

    .form-sub-label[for=input_349_quantity_1037_0] {

    margin-left: 145px;

     }

    As the "Flying Scot Heavy Air Battens (Top 2)" named field is too long, it is normal that the text box is out of the alignment. Please make it shorter by deleting the full stops.

    I will investigate about making the vertical alignment between products larger.

    Thank you for your patience.

  • Profile Image

    Answered by bdoodle on April 26, 2017 at 09:48 AM

    Hello,

      Thanks for showing me how to move the Qty and Sets labels and input fields to the right.  I'll await your help on getting a line space between products.

  • Profile Image
    JotForm Developer

    Answered by Helen on April 26, 2017 at 11:08 AM

    Hi,

    You can set the line spaces between the products by injecting custom CSS codes. Here:

    .form-product-item div {

        margin-bottom : 40px !important;

    }

    You can change the size of space in the code. I have cloned your form and tested on my side. Your form will be shown like on this below screenshot:

    Here is a guide a helps to you for injecting custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have any other questions or issue, please do not hesitate to contact us.

  • Profile Image

    Answered by bdoodle on April 26, 2017 at 12:21 PM

    Thank you!