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

    Using the Configurable list widget, I wish to populate data using other fields for one row of data. Please do let me know if this is possible?

    Asked by Varun1103 on December 13, 2016 at 06:22 AM

    What I wish for is that the first row should be a combination of static text and calculated values for this table:

    Right now all the fields are drop-down options in the widget, however just for the first row of this table I want to fill it with a combination of static text and also pull data from other fields in the form. This is so that we can save users time when filling it out and also so that they understand the order in which they have to fill out the remaining fields. 

    For the first two fields I require static text that should read like this:

    Position held should be: "Executive Officers (CXO Level / President)" and Type of Company should be "Startup (< 10 years". Now here comes the trickier bit, I really hope you can help me with this:

    For the company industry, I want it to take this input value from a previously filled form field; namely this (it's on the first page of the form):

    Now I think this would be the trickiest bit; for the years and months values, is it possible for the fields to auto-calculate the difference between this field (Shown below) and the current date?

    Could you do let me know if this is possible? I require this just for the first row, the remaining three rows should stay as they currently are.

     

    Thanks a lot!

    Cheers,

    Varun

  • Profile Image
    JotForm Support

    Answered by Nik_C on December 13, 2016 at 07:28 AM

    Hello Varun,

    I'm afraid that this is not possible with Configurable list widget, and that is because you can not map a specific field inside of the Configurable list widget. Maybe a better way would be to create fields that are in the Configurable list as separate fields. That way, each field will be independent and you will be able to do calculations with them, prepopulate them etc.

    All widgets 'live' in an independent iframe and therefore it is not possible to access them in that way.

    With separate fields what you're describing is totally possible by using conditional logic.

    If you decide to go that way and need any help in resolving that, please let us know.

    Thank you!

  • Profile Image

    Answered by Varun1103 on December 13, 2016 at 07:41 AM

    Hi Nik,

    Thanks for the reply. I understand that this is possible with separate form fields and conditional logic however the question then becomes: is t be possible to present it like in the table? Form fields side by side like in the widget? 

    Thanks!

    Varun

  • Profile Image
    JotForm Support

    Answered by Chriistian on December 13, 2016 at 08:14 AM

    Hi there,

    We will try to provide you custom CSS to place the fields side-by-side once you have transformed them into simple fields. You will, however, lose the ability to add new rows as in the Configurable List widget when using simple fields.

    Please don't forget to backup your form by cloning it before changing your field settings.

    Regards.

  • Profile Image

    Answered by Varun1103 on December 14, 2016 at 12:52 AM

    Hi Christian,

    When you say "once you have transformed them into simple fields" , what exactly do you mean?

    If this is done, the other question I have is whether the fields remain as drop-down boxes if made into simple fields? I wish users to select their options via this style.

    I am also completely fine with losing the ability to add/remove new rows as I want 4 rows to always be available.

     

    Thanks! 

  • Profile Image
    JotForm Support

    Answered by Chriistian on December 14, 2016 at 01:17 AM

    It means that when you transformed it into separate fields / simple fields / basic fields, that's the time we can help you by providing you custom CSS to make your separate fields side-by- side like in a table as you've requested.

    If you use a dropdown from the basic fields, it remains a dropdown style on your form.

    Please let us know if you need further assistance.
    Regards

  • Profile Image

    Answered by Varun1103 on December 16, 2016 at 10:12 AM

    Hi Christian,

    So I've tried to do what you've suggested and I've accomplished this to an extent. I've cloned my form (v4) and I've managed to populate and fill out the data for the first row into simple fields.

    One issue I'm having is: the "Company Industry" field that requires input data provided in the first page does not copy any fields with the "&" symbol properly:

    I get this copied into the text box field:

    Could you help me with this issue?

    Also now that I've populated the first row as simple fields, I would like to place them side by side as we discussed earlier in the thread. I have also made the remaining three rows simple field drop down boxes and placed them below:

     

    The key is I require them to be arranged side by side as they appeared in the configurable widget:

    Really hope you can help with this. I just want to mention, I really appreciate the prompt and great responses from the entire Jotform support team so far! 

    Cheers and thanks!

     

    Varun

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 16, 2016 at 11:55 AM

    To display the fields inline, please check this guide that will help you to reduce them so they can display inline: Form-Field-Positioning

    Once this has been done, there will be some fields that will display in a different link, but this can be fixed with some CSS code, here is an example of the code that I have used on my end: 

    li#id_299, li#id_298, #id_300, #id_291, #id_297 {

        width: 20%;

        padding-right: 0px;

        padding-left: 0px;

    }

    li#id_298 .form-input-wide, #id_300 .form-input-wide, #id_291 .form-input-wide, #id_297 .form-input-wide {

        width: 20%;

        margin-top:30px;

    }

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Do note that you may need to further customize the CSS code, this will depend on how you need the fields to look like. 

    Regarding to your issue, it has been moved to a different thread, we will be assisting to you on this thread: https://www.jotform.com/answers/1013520 

    If you have any question, please let us know. 

  • Profile Image

    Answered by Varun1103 on December 18, 2016 at 07:10 AM

    Hi!

    I was able to figure out the rest of the code needed with this. It worked great! Thanks a lot!

    However,

     I'm having one more issue now, this entire set of fields is not mobile responsive, even though I have the mobile responsive widget on my form and i've also enabled the option for making the form responsive in the advanced designer. This is how this part of the form looks like on a mobile:

    Could you help me with this?

     

    Thanks!

    Varun

  • Profile Image
    JotForm Support

    Answered by jonathan on December 18, 2016 at 02:50 PM

    Hi VArun,

    We will resolve the next issue about non mobile browser responsive here https://www.jotform.com/answers/1014495

    We will attend to it as soon as we can.