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

    Insert drop-down fields in existing form

    Asked by heatexchangerquote on April 15, 2013 at 01:03 PM

    http://www.jotform.com/?formID=13322326624

    Please see the section "Physical Properties" - I currently have two columns of text fields and would like to have four columns by inserting a column of drop-down fields after each text box column (ie. text box column, drop-down column, text box column, drop-down column).  What would be the best way to approach this using this existing form?

    Thanks!

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

    JotForm www two columns section
  • Profile Image

    Answered by glennlee on April 15, 2013 at 01:30 PM

    Hi,

    Since you are referring to a matrix field, sorry to say but you cannot use both textbox and dropdown on a matrix. You can only use 1 input type per matrix.

    To add column data, click the matrix field then on the menu, choose column.

     

    To choose the input type, click the matrix field then choose Input type.

     

    Regards,

    Glenn

  • Profile Image

    Answered by heatexchangerquote on April 15, 2013 at 08:45 PM

    Thanks for your reply.  What type of form, not matrix as you indicated, would you recommend that I use so that I could use both text box and drop-down together?

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 15, 2013 at 09:35 PM

    @ heatexchangerquote 

    What my colleague is trying to say, you cannot use multiple input types on the matrix fields. Example, both text box and drop down can't be added on the matrix tool.

    With this, my suggestion would be to add another matrix field and set it's input type to drop down and position it beside your existing matrix field by shrinking them. How's this? Example: http://form.jotformpro.com/form/31048453564959?

    You can also position it closer by injecting custom CSS codes to your form. How to Inject Custom CSS Codes to your Form

    If you need help with CSS, let us know here. Thank you!

  • Profile Image

    Answered by heatexchangerquote on April 15, 2013 at 10:08 PM

    OK, thanks - just so I am clear, since I need to have text box, drop-down, text box, drop-down (in that order across, rather than text box, text box, drop-down, drop-down as you show in your screenshot), the only way to do this is to insert separate fields?  There is no other way to make this look "cleaner" than using separate fields?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Welvin on April 16, 2013 at 03:45 AM

    Hi,

    I think there's none, unfortunately. You may consider my colleague suggestion. We can help you about that, with regards to the alignments or form adjustments.

    Just please let us know! :)

    Thanks

  • Profile Image

    Answered by heatexchangerquote on April 18, 2013 at 09:44 PM

    You guys have been a great help.  Regarding CSS, what CSS would I inject to make fields closer together?

    For example, on the row of this form that has four fields starting with "FLOW RATE (SIDE #1)", what CSS would make the first two fields (text box and drop-down) closer together and then the last two fields (text box and drop-down) closer together?

     

    Also, is there a way to enter text/instructions directly onto the form?  For example, if I wanted to share a story or provide great detailed instructions, could I just enter a text box of some type where I could add my comment that would be seen on the form?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 19, 2013 at 12:39 AM

    Hi,

    Use the following.

    #id_46, #id_44{

    padding-right: 0;

    }

     

    #id_45, #id_42{

    margin-left: -7px !important;

    padding-left: 0;

    z-index: 11111;

    border-left: none !important;

    }

     

    #label_45, #label_42{

    font-size: 0;

    height: 15px;

    border-top-left-radius: 0 !important;

    -moz-border-top-left-radius: 0 !important;

    border-left: none !important;

    }

    #cid_45, #cid_42 {

    border-left: none !important;

    border-bottom-left-radius: 0 !important;

    }

    Result:

    Let us know if you need anything else. Thank you!

  • Profile Image

    Answered by heatexchangerquote on April 19, 2013 at 01:57 PM

    That is awesome - thanks!

    I have about 4-5 more fields that I have to create and want to look just like what you did there - what would be the easiest way to duplicate this 4-5 times and change the content and drop-down options?

    Thanks again!

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 03:02 PM

    @heatexchangerquote

    Please refer this thread on how to duplicate the form fields:

    http://www.jotform.com/answers/25791-Is-there-a-way-to-copy-and-paste-multiple-form-fields-

    Note: Custom css needs to be added manually for each fields.

    Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image

    Answered by heatexchangerquote on April 19, 2013 at 03:53 PM

    Thanks for your reply.  Would you be able to provide the CSS to make the "Inlet Temperature" row the same as the "Flow Rate" row (the CSS that was provided in 3 posts above?  I can then print out both CSS text and compare and figure out what needs to be done for the other rows that I will create.

     

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 19, 2013 at 04:29 PM

    Hi

    Can you please clarify if what you meant is like this

     

    I think that would make your form unevenly wider...

    Please update us.

    Thanks.

  • Profile Image

    Answered by heatexchangerquote on April 20, 2013 at 11:24 AM

    Hi - thanks for your reply - to clarify, I wanted area that you have boxed in red to have the same format as the fields on the Flow Rate line (ie. text box #1 and drop-box #1 in a separate bordering box and text box #2 and drop-box #2 in a separate bordering box).

    Thanks!

  • Profile Image

    Answered by sidharth_kch on April 20, 2013 at 12:22 PM

    @heatexchangerquote

    I have forwarded your request to my colleague who should be able to help you on this.

    Thanks,

    Sidharth

  • Profile Image

    Answered by heatexchangerquote on April 22, 2013 at 12:36 PM

    Hello - I wanted to check-in regarding my request above - I have not yet heard back.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2013 at 04:33 PM

    Hi,

    Here's how you can do it. 

    http://www.jotformpro.com/form/31116770008950

    I just duplicated the fields in "Flow Rate" into "Inlet Temp" and include the field id# in the CSS codes

     

    This is the new CSS codes 

    BUT, I would suggest you just clone my form as it will be more easier. Use this guide 

    How-to-clone-an-existing-form-from-a-URL

     

    Please inform us if this do not work for you, and we will assist you further.

    Thanks.

     

     

     

  • Profile Image

    Answered by heatexchangerquote on April 22, 2013 at 10:45 PM

    I copied and pasted your new CSS into the form, but I noticed that your screenshot above is slightly different than what I had before.  For the Flow Rate line, there should not be a line in the middle of the Side #2 boxes - the Side #2 part should appear like the Side #1 part (all one box).

    The Inlet Temperature line is similar in that Side #2 should be the same as side #1 (all one box) - also, there are two headers in the Side #2 section where there should only be one (no need for two "Inlet Temperature (Side #2)" headers - can you please fix the CSS and send to me so I can replace with this new CSS.

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 23, 2013 at 12:39 AM

    Hi,

    Please update the CSS codes to this

    http://pastie.org/7701135

    Replace ALL of your CSS code with the one I provided.

    Please inform us if still is not according to your needs.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 23, 2013 at 12:41 AM

    Btw, this is my test form http://www.jotformpro.com/form/31118660894963

     

    Thanks.

  • Profile Image

    Answered by heatexchangerquote on April 23, 2013 at 09:44 AM

    That is perfect - thanks!

    Could I ask one more favour?  Can you please send me the complete CSS (like you did above) that would do the same formatting (that you did above), but also for the following new lines in the form:

    - Outlet temperature

    - Allowable pressure drop

    - Design pressure

    - Thermal conductivity

    - Specific heat

    - Viscosity

     

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 23, 2013 at 11:00 AM

    @heatexchangerquote

    We will get back to you later with the full css codes. Stay tuned!

  • Profile Image

    Answered by heatexchangerquote on April 23, 2013 at 11:03 AM

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2013 at 05:09 AM

    Hi,

    I am truly sorry for the delay. Here's the full CSS. http://pastie.org/pastes/7707737/text

    This would be the result: http://form.jotformpro.com/form/31131918413951?

    Thank you so much!

     

  • Profile Image

    Answered by heatexchangerquote on April 24, 2013 at 08:54 AM

    Thanks so much - this is great.  Just a couple questions:

    (1) Is it possible to have the text box "Enter Numeric Value" and drop-down "Select Unit of Measurement" closer together (for ALL side #1 and side #2 boxes) so that the form sized is reduced horizontally?

    (2) I noticed that the bottom line of all the Side #1 and Side #2 boxes are offset approx in the middle - would it be possible to have that line completely straight?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2013 at 03:51 PM

    Hi,

    1. I did made some adjustments, use the following: http://pastie.org/pastes/7710915/text

    Demo: http://form.jotformpro.com/form/31131918413951?

    2. I'm not quite sure about this, can you provide a screen that points the issue? They're seem to be equal on my side.

    We'll wait your reply. Thank you!

  • Profile Image

    Answered by heatexchangerquote on April 24, 2013 at 09:10 PM

    Thanks for the new CSS - that looks really good.

    Regarding the uneven line, I am unable to attach a screenshot, but it looks the same way in your screenshot that you linked above.  The bottom line of the Side #1 and Side #2 boxes is uneven.

    Please let me know your thoughts.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on April 24, 2013 at 09:24 PM

    @heatexchangerquote

    In which browser are you noticing this misalignment? It looks fine in Chrome on my end.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on April 24, 2013 at 09:25 PM

    Actually, I spoke too fast. I was looking at my colleague's clone. I see what you mean.

  • Profile Image
    JotForm Support

    Answered by abajan on April 24, 2013 at 09:50 PM

    @heatexchangerquote

    Please add the following rule to your current injected CSS and save the form:

    #cid_45, #cid_42, #cid_50,
    #cid_52, #cid_54, #cid_56,
    #cid_62, #cid_60, #cid_58,
    #cid_64, #cid_70, #cid_72,
    #cid_74, #cid_68, #cid_66,
    #cid_76 {
    padding-bottom: 8px;
    }

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2013 at 10:55 PM

    @heatexchangerquote

    My colleague, Abajan found out that the form doesn't display right on safari. Please use the following CSS to fix it.

    http://pastie.org/pastes/7713285/text

    Regarding on the bottom line issue, I don't see any misalignment here. This is what I see on my Chrome/Firefox browser.

    May we know what OS and browser you're able to see this? We'll wait your reply. Thank you!