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

    Help adding different static text for each row on the Configurable List Widget

    Asked by martinbond on February 02, 2015 at 10:25 AM

    Please can someone help with the following:

    1, insert new static text for each row?

    2, change individual column sizes.

    Thanks in advance.

    Regards,

    Martin



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    static Configurable List Wi static text
  • Profile Image

    Answered by Carina on February 02, 2015 at 11:41 AM

    Hello in order to use the static text fields please use the "Static Text : static : Some static text" field type and then edit the first "Static Text" with the label you want and edit the "Some static text" with the message you want:

     

    You can increase the column size by adding the css on the custom css area:

    .col1 {

    margin: 3px 0;

    min-width: 200px;

    }

     

    col1 is for first column, col2 for second,....

    You can inspect further and clone  the demo form:

    http://form.jotformpro.com/form/50324880418959? 

    Let us know if we can assist you further.   

  • Profile Image

    Answered by martinbond on February 09, 2015 at 09:25 AM

    Hi, 

    Thank you for your reply. 

    Is it possible to have different wording as static text for each new row. 

    I.e

    row 1 - Static text = Initial Contract 

    row 2 - Static text = Option 1 

    row 3 - Static text = Option 2 

    row 4 - Static text = Option 3

     

    Thank you for your continued support. We will be upgrading to a pro account very soon due to your fantastic service.

     

    Regards,  

    Martin. 

  • Profile Image

    Answered by Carina on February 09, 2015 at 10:38 AM

    Hello Martin

    I'm glad that you are happy with our service. That means a lot to us. 

    Regarding your question, unfortunately it is not possible to have different wording for the different rows. Maybe an alternative solution might be using the Infinite List widget, where the user can add the options he wants:

    http://widgets.jotform.com/widget/infinite_list 

    Or User Contributed Dropdown:

    http://widgets.jotform.com/widget/user_contributed_dropdown 

    You can test them here:

    http://form.jotformeu.com/form/50394589057365? 

    But please let us know more about your needs, so we can try finding the best solution for it.

    Let us know if we can assist you further.   

     

     

  • Profile Image

    Answered by martinbond on February 09, 2015 at 11:23 AM

    Is it possible to have date functions in either of the suggested widgets? 

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 09, 2015 at 12:42 PM

    You can add Calendar and Time fields only in the configurable list widget: 

    So, it will look like this:

    We also have other widget for date purposes, you can check them here: http://widgets.jotform.com/search/date

  • Profile Image

    Answered by martinbond on February 09, 2015 at 01:00 PM

    Hi BDavid,

    Thanks for your reply however it does not satisfy my criteria. 

     

    I desire: 

    Title - Contract Details - Please provide the following information:

    Row 1 - Initial Contract (Static text) Start date (date function) End date (Date function) Contract value (Text / Number )

    Row 2 - Option 1 (Static text) Start date (date function) End date (Date function) Contract value (Text / Number )

    Row 3 - Option 2 (Static text) Start date (date function) End date (Date function) Contract value (Text / Number )

    Row 4 - Option 4 (Static text) Start date (date function) End date (Date function) Contract value (Text / Number )

     

    Please advise if you can think of a solution to get my desired outcome.

     

    Regards, 

    Martin. 

     

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 09, 2015 at 01:52 PM

    So far this is what I got: http://form.jotform.co/form/40616610807854

    I will see if I could some how accomplish to have different wording on each row for the static text. Hope this helps you.

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 09, 2015 at 05:06 PM

    After doing some further testing, I see it is possible to change the content of each static text on each row:

    This can be done by injecting custom CSS code in the CSS area:

    I tried the following code:

    .col1 {

    margin: 3px 0;

    min-width: 150px;

    }

    tr+tr+tr >:first-child {

    visibility: hidden;

    }

    tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Option1";

    margin-left: -55px;

    }

    tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Option2";

    margin-left: -55px;

    }

    tr+tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Option3";

    margin-left: -55px;

    }

    You may clone my form if you want to take a deeper look, and let us know if you need further help. http://form.jotform.co/form/50395772646869

  • Profile Image

    Answered by martinbond on February 09, 2015 at 11:24 PM

    Hi BDavid,

    You've put a huge smile on my face, thank you for going to such efforts to deliver my needs, absolute gent. 

    I know this may be pushing it and I'm expecting a no, however, is there any chance you can have masked input on the text area field. This will be to ensure the user put's the contract value number in the correct format. i.e 9,999,999,999

    Thank you in advance. 

     

    Regards,

    Martin. 

  • Profile Image

    Answered by martinbond on February 09, 2015 at 11:51 PM

    Apologies for the abundance of queries, is there any change we can have an "add attachment column on configurable list? 

     

    Regards, 

    Martin. 

  • Profile Image

    Answered by martinbond on February 10, 2015 at 01:11 AM

    I'll condense all the above into one reply so it's easier for you to respond.

    1,  can you have masked input on the text area field. This will be to ensure the user put's the contract value number in the correct format. i.e 9,999,999,999

    2, can you have an "add attachment column on configurable list? 

    3,  In regards to the "Textarea" field, how can I make the field remain in a stretched position? It reverts back to a small text box once I deselect the widget. Please advise. 

    I cannot thank you enough for developing the code, after reviewing our suite of Forms, this functionality will help condense our forms & increase user interface. Which leads to me No 4. 

    4, If I want to manipulate the above configurable list and add more rows, which part of the code do I copy to add another row? 

     

    Thank you in advance. 

     

    Regards, 

    Martin. 

  • Profile Image

    Answered by martinbond on February 10, 2015 at 08:13 AM

    Some feed back - code & functionality works brilliantly on form. However once the submission is received back end, the "option 2" etc static text is over written by the parent text. See attached snip of PDF version. 

  • Profile Image

    Answered by Carina on February 10, 2015 at 10:35 AM

    If you want to continue the list you just need to add another "+tr" and edit the content:

    tr+tr+tr+tr+tr >:first-child :after 

    { visibility: visible;

    content: "Option3";

    margin-left: -55px; }

    Regarding the PDF file question, the solution provided by BDavid is based on css, being more visual. What is done by that code is that we are visually hiding an element to display another one instead. The real structure of the field/form stays the same. And css is not submitted along with the form. 

    I believe there is not much to be done regarding the notification's text but I will investigate further.

    I moved the other questions to new threads as they are different questions. 

    Let us know if we can assist you further.   

  • Profile Image

    Answered by martinbond on February 12, 2015 at 05:46 AM

    Hi, 

    Code is working great. I've got one thing that is slowing down my process and it's the "margin-left: -55px; code, the static text on each row isn't aligning, I'm adjusting the px for each row but sometimes it doesn't respond to the changes. Then once I do have them aligned on the builder, once I preview my form, they are unaligned again. Please can you think of a solution as this widget is going to feature alot throughout my forms but it's taking too much time to produce forms that I can present to my Manager as Final revisions.

    Your Immediate response is greatly appreciated.

     

     

    Regards,

    Martin.  

  • Profile Image
    JotForm Support

    Answered by Charlie on February 12, 2015 at 09:34 AM

    Hi Martin,

    Could you edit that code and use this instead:

    margin-left: -55px !important;

    That should put emphasis and prioritize the styling so that it work work all the time.

    I hope this helps. Do let us know if this works.

    Thank you. 

  • Profile Image

    Answered by martinbond on February 13, 2015 at 02:20 AM

    Hi, 

    No that didn't work for me, see snip below,

    1st configurable list - is the template on the code was created for, although option 1, 2,3 are aligned, they do not align with the "initial Contract" text. Which is a styling issue for me as we are trying to present a professional appearance.  

     

    2nd configurable list - I used the code on this one, see RHS of snip for "margin-left: -109px !important;", 109px is what aligned it.

     

    Am I doing something wrong or can you think of another solution? 

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 13, 2015 at 04:26 AM

    Hi,

    Regarding on the static text alignments, you can fix it using the following CSS codes. First, replace after with before and then remove the margin-left property. Check this example:

    tr+tr+tr >:first-child :before {

    visibility: visible;

    content: "Option1";

    margin-left: -55px !important;  <---remove this

    }

    You have to apply this to the other codes as well. It should then look like the this.

    Let us know if I have missed something here. Thank you!

  • Profile Image

    Answered by martinbond on February 13, 2015 at 05:16 AM

    brilliant, works perfectly now. cheers

  • Profile Image

    Answered by martinbond on February 13, 2015 at 06:37 AM

    can you add grid lines & borders to the configurable list?
  • Profile Image
    JotForm Support

    Answered by Charlie on February 13, 2015 at 08:26 AM

    Hi,

    Glad that my colleague's suggestion worked. To better assist you, I've opened a different thread related to the borders and grid lines of the configurable list widget so that we can focus on one topic or concern per thread. Please refer to this link instead: http://www.jotform.com/answers/515429. We will address to it shortly.

    Thank you.

  • Profile Image

    Answered by martinbond on March 04, 2015 at 08:15 AM

    Hi, 

    Regarding the response: 

    Answered by Carina on February 10, 2015 at 10:35 AM

    If you want to continue the list you just need to add another "+tr" and edit the content:

    tr+tr+tr+tr+tr >:first-child :after 

    { visibility: visible;

    content: "Option3";

    margin-left: -55px; }

    Regarding the PDF file question, the solution provided by BDavid is based on css, being more visual. What is done by that code is that we are visually hiding an element to display another one instead. The real structure of the field/form stays the same. And css is not submitted along with the form. 

    I believe there is not much to be done regarding the notification's text but I will investigate further.

    I moved the other questions to new threads as they are different questions. 

    Let us know if we can assist you further.   

     

    Have you had any updates regarding the notifications text appearing for the child text? 

    I have created a huge form - http://form.jotform.me/form/50601680503445? with a lot
    of configurable lists in this format. I would really appreciate if this was investigated further. See PDF response format below for example: 

    I feel, having tested your site to generate similar outcomes, this is the best and only way to consolidate and gather a range of information which provides a user friendly interface, for that reason I feel it would be hugely beneficial if a solution can be provided for this. Please advise if one can be devised. 

    To add to this development, in excel / CSV the response is collected within one column for each separate column on this form, which is displayed visually below.

    it would be great if this was separated to keep each individual response paired with the corresponding question / answer text. as it would make for easier reporting i.e. each configurable list appears in excel as it does on the form with the configurable list title sitting above each question as seen below

     

    Also, as discussed before, the attached file is showing as a file path in excel / CSV and not a hyper link as seen below, please advise if a fix for this is available.


    Apologizes for the putting so many queries in one thread but I though it would provide a good overview of my desired end result. feel free to transfer each query into separate threads. 

     

    Thank you in advance, 

    Regards,

    Martin. 


     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 04, 2015 at 09:54 AM

    Hi Martin,

    To better assist you, I've moved the other questions that you have on a separate thread, please do create a new thread for each topic that you would discuss so that we can easily track the progress of each thread. You can refer to the following links:

    http://www.jotform.com/answers/526726 

    http://www.jotform.com/answers/526729

    Regarding the first question you have, unfortunately, the appended static text that we did as a workaround won't show up in the notification. We might need to resort to another workaround, but we'll try to find another way for this.

    Kind regards.

  • Profile Image

    Answered by martinbond on March 04, 2015 at 11:35 AM

    Ok, I'll sadly admit defeat on this one if you're sure you exceptional dev team cannot find a   workaround in this format. Please forward this request to them asap as we are planning to role these questionnaires out to our Procurement Partners in the not too distant future. During which time we will be signing up to the pro account for our branch. If you're system can give us a near perfect solution we will be using Jotform at group level, which will be over 30 individual pro accounts.

     

    Thank you again for you continued pleasant and informative support, really professional service which is not going unnoticed on our part.

     

    Regards,

    Martin.  

  • Profile Image
    JotForm Support

    Answered by Charlie on March 04, 2015 at 12:10 PM

    Hi Martin,

    Thank you for your patience and understanding, I would, however, recommend that you just use the default fields if you would like the static text to be visible in your form, I would recommend that you just use the common or default fields found in the Form Tools and create a table like display. Here's an example, the main function of the configurable list widget is to allow your users to add multiple rows or items with different input types, here you have a fixed table with a fix number of rows. 

    So it's safe to say that you can replace these items with more manually constructed table using combination of form fields. I hope that gives you an idea.

    Thank you.

  • Profile Image

    Answered by martinbond on March 04, 2015 at 12:39 PM

    Hi, 

    I do not grasp what you mean, I assume the screenshot above is of my existing configurable list?

    A normal field configuration will not satisfy my requirements as all the fields will be separate so we will not be able to easily to relate and manage  the results. With the configurable list I can achieve what I need. 

    Please advise / demo if you can create exactly the same as the screenshot above without using configurable list, if so, I have no issues of transferring to another method.

     

    Regards,

    Martin. 

  • Profile Image
    JotForm Support

    Answered by Charlie on March 04, 2015 at 01:01 PM

    Hi Martin,

    Apologies for the confusion, the only problem with the configurable list widget with this design is that the static text we include using the CSS won't appear in the responses or submissions, this is because it only for design purposes and not actual data.

    I'll try to test the workaround that I was thinking, but it seems far fetch from now. I'll discuss with my colleagues if we can find another way.

    Thank you.

  • Profile Image

    Answered by martinbond on March 04, 2015 at 01:43 PM

    Hi, 

    Yes please do discuss with your colleagues.

     

    I look forward to hearing from you.

     

    Regards,

    Martin.  

  • Profile Image

    Answered by Ben on March 04, 2015 at 02:46 PM

    Hi Martin.

    Please note that this is now a very long thread that is very hard to follow to see what is still an issue or what has been resolved (and most importantly to find what is expected as the outcome).

    For this reason I would like to ask you to always open a new thread using our contact page when the question or issue is not directly connected to the one on the thread.

    This will allow us and you to find the resolution faster or to be able to raise a thread to our developers that would not have any issues following the thread and jumping onto the development or the thinking process.

    Now from my understanding the issue is that your responses are not being recorded together with their titles. Do note that unfortunately this would not be possible to change because CSS is layout/style only. What the code did was hide the actual header and change it into something else for presentational purposes.

    Having that said and looking at the photo above:

    I would approach this a bit differently.

    This is my sample for you to see if that would work for you:

    http://form.jotformpro.com/form/50626089696973

    This would need a bit more style to be added to it to make it just perfect, but overall I believe looks exactly as you need it while in the same time gives you the labels in the emails.

    Please clone it to your account following the steps here: How to Clone an Existing Form from a URL

    Once you do take a look at the emails or thank you page (I presume that you want the emails to have titles only) and make a test submission and you will see how the data is outputted.

    It would also be relatively easy to add more such fields - not as easy as the widget, but should be easy enough.

    Do let us know what you think.

  • Profile Image

    Answered by martinbond on March 04, 2015 at 03:28 PM

    I'm not joking when I say this, I love you. Literally saved me a restless nights sleep & an awkward chastising from my superiors tomorrow. That work's perfectly. 

    I must confess, I have no clue as to how you constructed that little beauty. 

    Using your method, is it possible to replicate the following:

     

     

    A big Irish cyber hug & kiss in advance. 

     

     

    Regards,

     

    Martin. 

  • Profile Image

    Answered by martinbond on March 04, 2015 at 04:06 PM

    Hi,

     

    In addition to above, is it possible to select individual fields as required, case bein the comments column of the 1st screenshot is option but response column is mandatory.

     

    Below is all the formatting I had in my configurable lists, is it possible to implement the same formatting (perhaps not using CSS) using your method? Please review & advise. 

    col1, .col2, .col3, .col4 {

    margin: 3px 0;

    height: 50px;

    font size: large;

    }

    text {

    height: 30px !important;

    width: 400px !important;

    font-size: large;

    }

    th {

    font-size : 17px;

    }

    tr {

    font-family: arial;

    font-size: large;

    }

    select {

    height: 30px !important;

    }

    table {

    border-spacing: 2px !important;

    border-collapse: collapse;

    }

    #customFieldFrame_249 {

    padding-right: 20px !important;

    margin-right: 20px !important;

    }

    th {

    border: 2px solid #000000;

    padding: 5px;

    }

    tr td {

    border-bottom: 2px solid #000000 !important;

    border-left: 2px solid #000;

    }

    td {

    vertical-align: middle;

    }

    tr:nth-child(1) {

    background-color: #A0A0A0;

    }

    tr:nth-child(2) {

    background-color: #F8F8F8;

    }

    tr:nth-child(3) {

    background-color: #E8E8E8;

    }

    tr:nth-child(4) {

    background-color: #F8F8F8;

    }

    tr:nth-child(5) {

    background-color: #E8E8E8;

    }

    tr:nth-child(6) {

    background-color: #F8F8F8;

    }

    tr:nth-child(7) {

    background-color: #E8E8E8;

    }

    .col1 input[type="text"] {

    font-size : large

    }

    .col2 input[type="text"] {

    font-size : large

    }

    .col3 input[type="text"] {

    font-size : large

    }

    .col4 input[type="text"] {

    font-size : large

    }

    .col5 input[type="text"] {

    font-size : large

    }

    td.col1 input[type="text"]{

     width:200px;

    }

    td.col2 input[type="text"]{

     width:200px;

    }

    td.col3 input[type="text"]{

     width:200px;

    }

    td.col4 input[type="text"]{

     width:200px;

    }

    td.col5 input[type="text"]{

     width:200px;

    }

    td.col6 input[type="text"]{

     width:200px;

     

    }

     

     

     

     

  • Profile Image

    Answered by Ben on March 04, 2015 at 04:37 PM

    That is great to hear Martin and we will be happy to help you set it up.

    Now since someone might be looking for the solution with Configurable list and does not need to have headers shown in email this thread would help them a lot, while if we continue on it we would add a lot more complexity to it so I have moved this to a new thread where we will be replying to you shortly and help you set it all up like the sample jotform above.

    This is the link to the new thread: http://www.jotform.com/answers/527125

    will take into account the CSS codes here as well.