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

    Overlapping fields on my form.

    Asked by craftlabph on September 25, 2016 at 01:56 AM

    Hello,

    I need some help with the overlapping fields on my form.

    a. PDF Embedded Widget - Works great on mobile but not on browser.

    b. Purchase Order Field - every field overlaps.

    c. Text Box Field - too small.

    Please see attached screenshot.

     

    Thanks!

    Page URL:
    http://www.jotform.me/craftlabph/orderform

    Screenshot
    overlapping purchase order field purchase Mobile thanks
  • Profile Image
    JotForm Support

    Answered by Mike_G on September 25, 2016 at 05:09 AM

    a. PDF Embedded Widget - Works great on mobile but not on browser.

    Then, change the width of the widget from 600 to 578.

    After that, add the following CSS below codes to your form.

    li#id_89 {

        padding-left: 36px !important;

        padding-right: 36px !important;

    }

    It should look like this after:

    b. Purchase Order Field - every field overlaps.

    Try adding the CSS codes below to your form then check the result and see if that is what you would like to happen.

    [data-type="control_payment"] .form-sub-label-container .form-dropdown {

        width: initial !important;

    }

    .form-sub-label-container{

        white-space: normal !important;

     

    }

    If not, please let us know and give us more details then we'll try our best to make the adjustments for you.

    It should look like this after you add the CSS codes above.

     

    c. Text Box Field - too small.

    To adjust the height of the "Order Details" textarea field, you may add the CSS codes below.

    textarea#input_61 {

        height: 100px !important;

     

    }

    It should look like this after you add the CSS codes above.

  • Profile Image

    Answered by craftlabph on September 25, 2016 at 08:11 PM

    Hello Mike_G,

    Everything worked out well. However, I would like the labels "Quantity", "Size" and "Type" to be on the left side of the field.

    Also, is there any other widget that I could use to customize my product list aside from the Purchase Order?

     

    Thanks.

  • Profile Image

    Answered by craftlabph on September 25, 2016 at 11:48 PM

    Additional overlapping field issue in mobile. I am trying to match the field widths to 335.

    Also, if the form will be viewed in mobile, the labels should still be aligned leftnot indented.

  • Profile Image
    JotForm Support

    Answered by Mike_G on September 25, 2016 at 11:50 PM

    I would like the labels "Quantity", "Size" and "Type" to be on the left side of the field.

    Please try to add the CSS codes below and see if that satisfy your requirement.

    .form-product-custom_quantity {

        width: 100px !important;

        direction: ltr !important;

    }

    .form-product-item .form-dropdown {

        direction: ltr !important;

    }

    span.form-product-item > span {

        direction: rtl !important;

     

    }

    Also, is there any other widget that I could use to customize my product list aside from the Purchase Order?

    I would like to apologize for any inconvenience, but I'm afraid I don't fully understand what you mean here. Can you help us by explaining to us your concern in more details, please? 

    However, you can use normal fields to list your products and then, you can pass the calculation to a payment field. Here's a guide that will help you better understand how it's done: How-to-Pass-a-Calculation-to-a-Payment-Field

    With regards to your new concerns, please allow me some time to work on it and I will get back to you as soon as possible.

    Thank you.

  • Profile Image

    Answered by craftlabph on September 26, 2016 at 01:29 AM

    Hello Mike_G,

    That worked out perfectly. I hope you could also look into the inquiry with regards to overlapping issue I posted above before your answer.

    With regards to the current Payment Field I'm using, which is the "Purchase Order", it only lets me add 1 option with a special pricing in it. But in my form, I need to add 2 more option which will also enable me to add a special pricing to it.

    Thanks.

  • Profile Image

    Answered by craftlabph on September 26, 2016 at 03:00 AM

    Oops, sorry I wasn't able to read the latter part of your reply. Sure, I will wait for your response again.

     

    Although I have another question on how to fix the checkbox below.

    I would like it if it would be on the left side of the item names (e.g. Business Card).

    Is it also possible if the amount (0.00 PHP) will have a padding-left of at least 30px.

    Lastly, is it possible if the fields would be in a column format instead of a row format?

     

    Thanks Mike_G! You're the greatest!

  • Profile Image
    JotForm Support

    Answered by Mike_G on September 26, 2016 at 04:27 AM

    Additional overlapping field issue in mobile. I am trying to match the field widths to 335.

    Also, if the form will be viewed in mobile, the labels should still be aligned leftnot indented.

    I have checked your form using my android phone as well and I see what you mean regarding the overlapping input fields. However, it seems that the issue with the labels being indented are already fixed. Are you seeing the same as what I'm seeing that's shown in the image below?

    To fix the issue with the fields that are overlapping, please delete the CSS code below that you injected in your form.

    #first_4, #last_4 {

        width: 180px;

    }

    There are atleast thirty (30) of it in your form.

    I would like it if it would be on the left side of the item names (e.g. Business Card).

    Please add the following CSS codes below to move the checkboxes on the left side of the item names.

    .form-product-item .form-checkbox{

        width: initial !important;

    }

    Is it also possible if the amount (0.00 PHP) will have a padding-left of at least 30px.

    Yes, it is. Please add the codes below to achieve such.

    span[id*='input_96_10'][id$='_price']{

    padding-left: 30px !important;

     

    }

    Lastly, is it possible if the fields would be in a column format instead of a row format?

    Does this mean that the fields for "Size" and "Type" will go below the "Quantity" field? May we also know how many columns do you intend to have for your product items? Please give us more details on how would you like for it to look like and we will try our best to give you the best possible workaround for it.

    With regards to the current Payment Field I'm using, which is the "Purchase Order", it only lets me add 1 option with a special pricing in it. But in my form, I need to add 2 more option which will also enable me to add a special pricing to it.

    Considering that this is already a different concern, I have moved it to a new thread which you can follow by clicking this link. We believe that we will be able to assist you better  if there will be a separate thread for every question/concern you have and, also, to avoid confusion with the answers being provided and/or follow-up questions that you may have.

  • Profile Image

    Answered by craftlabph on September 26, 2016 at 08:23 PM

    I have checked your form using my android phone as well and I see what you mean regarding the overlapping input fields. However, it seems that the issue with the labels being indented are already fixed. Are you seeing the same as what I'm seeing that's shown in the image below?

    - Yes, I think, I have fixed this yesterday.

    Does this mean that the fields for "Size" and "Type" will go below the "Quantity" field? May we also know how many columns do you intend to have for your product items? Please give us more details on how would you like for it to look like and we will try our best to give you the best possible workaround for it.

     

     

    -

    Yes, that is correct. I'm thinking of dividing it into 2 columns. Then on the first column the fields would be, Quantity and Size. And then for the second column the fields would be, Type and Add-On. 

    Considering that this is already a different concern, I have moved it to a new thread which you can follow by clicking this link. We believe that we will be able to assist you better  if there will be a separate thread for every question/concern you have and, also, to avoid confusion with the answers being provided and/or follow-up questions that you may have.

    - Thank you! I will reply to that new thread.

    -------------------------------------------------------------------------------------------------------------------------------------------

    Follow up question for the id$='_price':

    I also want the prices to be aligned right so that it looks neat.

     

    Thank you for all your help.

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 27, 2016 at 12:29 AM

    This thread seems to be quite long. To avoid any confusion, I have moved your two latest concerns to new separate threads. We shall answer your questions there. Simply follow the links below: 

    https://www.jotform.com/answers/942568 

    https://www.jotform.com/answers/942570 

    Thank you.