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

    Need to duplicate fields depending on how many events are required

    Asked by cheapjoes on June 10, 2016 at 09:38 AM

    I am trying to create a form where people can list their art workshops. Form is complete but need to know how people can list from 1 to 30 workshops. Is there a way to click something and have a part of a form repeat itself as needed. Will send a screen shot of what I mean.

    Screenshot
    duplicate fields how many many
  • Profile Image
    JotForm Support

    Answered by Nik_C on June 10, 2016 at 10:41 AM

    I'm not sure I understood you completely, you could embed form inside of your form by using iFrame embed, and then with certain conditions to reveal/hide those embedded forms.

    Here you can find how to add widget to your form:

    https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form

    If you could give us more information about the workflow we'llbe glad to assist you!

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by cheapjoes on June 10, 2016 at 10:55 AM

    In other words, what you see that I sent you is static at this point and only one workshop listing can be added and then the whole form is submitted. If they want to add more than one workshop (different dates, place, etc.), what can I do to allow them to duplicate this form (or piece of form) from Sponsor name to Photo for Workshop and when finished adding workshops (1-30+) they can then submit whole form along with payment.

  • Profile Image
    JotForm Support

    Answered by KadeJM on June 10, 2016 at 12:04 PM

    We appreciate you clarifying the specifics of what you are trying to do above for your form.

    Because you are planning on allowing users to have 1-30 possible workshops I think for something of this magnitude it would be much to use something like our configurable list widget.

    With this widget you can add one or even several more such as in your case.

    You can also configure it how you want it including having it suit your needs with specific fields to allow users to add more in a listed format for multiple items of such.

    Please see https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.

    The only other alternative you have aside from this is to create a really super long form and hide what you don't need and allow more at the same time but that would use require a lot more work and literally a ton of conditional logic to reflect it properly.

     

  • Profile Image

    Answered by Terry  on June 14, 2016 at 10:35 AM

    Once that is done, is the data from the form still collectible in an excell or word format?

  • Profile Image
    JotForm Support

    Answered by KadeJM on June 14, 2016 at 11:46 AM

    Yes, the collected form submission data would also show up in your reports or submissions exports.

  • Profile Image

    Answered by cheapjoes on June 17, 2016 at 10:49 AM

    Have been trying to configure that widget and though I have been a graphics and IT guy for years it isn't working the way the instructions say it should. I added the widget and this is what I get on my form:

  • Profile Image
    JotForm Support

    Answered by Charlie on June 17, 2016 at 12:00 PM

    That would be the default setting of the configurable list widget, by default all the possible input types are listed (which is what is shown in your screenshot). You should be able to edit it by opening the widget wizard. Here's how:

    1. Add the Configurable list widget under the "More Fields".

    2. In the widget settings, you need to edit the "Fields Configuration" on what input types you want to display. 

     

    3. Now for example, I need to have 3 text boxes and 1 calendar in the configurable list widget, I need to edit the "Field Configuration" to this:

    Sponsor Name : text :

    Artist Name : text : 

    Workshop Title: text : 

    Calendar : date : m/d/y : 2000-2015

     

    And then remove the ones that I don't need. Below is a screencast on how it looks like:

     

    You can see on the screencast that the widget allows you to dynamically add rows or repeat the fields multiple times.

     

    To learn more about how to setup this widget, please do check this guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget 

    The tricky part is how to format your rows, you can do that by injecting your own custom CSS code. But you'll need to be familiar with CSS for this.

    I hope that helps.

  • Profile Image

    Answered by Terry Henry on June 20, 2016 at 08:38 AM

    Thanks. This was very helpful. Now I need to know how to stack the rows instead of having all the info stretched out and not on the page.

     

    For example:

    Artist Name:

    Workshop Title:

    etc.

    Instead of the way the widget sorts it.

    Artist Name: Workshop Title: Medium: etc., etc. etc.

    across one row which in my form goes off the page.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 20, 2016 at 09:54 AM

    Hi,

    Unfortunately, the Configurable List widget is rendered as table with each item rendered as a row. The fields cannot be stacked up the way you specified. I would suggest you try our Infinite List widget. It has feature similar with Configurable List widget but you can style it more freely.

    Please see demo here.

  • Profile Image

    Answered by cheapjoes on June 21, 2016 at 08:43 AM

    Thanks for that. Infinite List doesn't fit the bill either.

     

    Is there any way to duplicate or cut and paste several fields at a time. One way I can work this form is to just give the respondents several and let them fill out however many they want and then submit.

     

    Here is what I would want to duplicate:

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 21, 2016 at 09:44 AM

    Hi,

    I am quite not sure what you meant. Do you mean you need to copy a group of fields at a time? You can do so by following the steps below.

    Do let us know if you need further assistance.

  • Profile Image

    Answered by cheapjoes on June 21, 2016 at 11:10 AM

    Thanks.

    I have another question and hope I can explain it.

    We had a form last year called Photo Entry Contest Form.

    When I export the data from the entries to this form as a CSV file and open in Xcell and save as a .txt file, then copy the info into a text editor, highlight the text and remove formating, all the fields show as a hard return.

    1

    2

    3

    etc.

     

    This was a live (published) report and I can use that data to import into In Design and send to printer.

     

    When I do the same thing with the Clone of Clone of Workshop Sponsor form (preview and fill in the form and click enter), export report as CSV, save as a .txt file and copy and paste into the text editor, highlight all, remove formating, all the info disappears.

    What I notice is that even though I seem to have done everything the same in exporting, etc, when I copy from the .txt file in xcell, the fields paste differently into the text editor (the Photo form as cells and the other as a row).

    What I am wondering is if the published form and the preview form return different info so that an export would format differently.

     

  • Profile Image
    JotForm Support

    Answered by Charlie on June 21, 2016 at 11:57 AM

    You can actually format the Configurable list widget as you like, this is through CSS.

    Here's my sample form based on the current form you have: https://form.jotform.com/61724831026956 

    This is now how the widget looks like:

     You can add multiple instances of this block fields by clicking the "+" button.

     

    Unfortunately, it is not possible to add a file upload on this widget. You will probably need to enable the "Allow Multiple" option in the file upload option or setup multiple file upload fields elsewhere in the form.

    You can clone my form to have a copy of that form in your account and for you to study the CSS code that I created. Here it is for your reference:

    /* Force table to not be like tables anymore */

    table, thead, tbody, th, td, tr { 

    display: block; 

    }

     

    /* Hide table headers (but not display: none;, for accessibility) */

    thead tr { 

    position: absolute;

    top: -9999px;

    left: -9999px;

    }

    tr { border: 1px solid #ccc; }

    td { 

    /* Behave  like a "row" */

    border: none;

    border-bottom: 1px solid #eee; 

    position: relative;

    }

     

    td:before { 

    /* Now like a table header */

    display: inline-block !important;

     

    /* Top/left values mimic padding */

    top: 6px !important;

    left: 6px !important;

    width: 40% !important;  

    }

     

    /* Label the data */

    td:nth-of-type(1):before { content: "Sponsor Name: "; }

    td:nth-of-type(2):before { content: "Artist Name: "; }

    td:nth-of-type(3):before { content: "Workshop Title: "; }

    td:nth-of-type(4):before { content: "Media (Levels)"; }

    td:nth-of-type(5):before { content: "City, State & Or Country"; } 

    td:nth-of-type(6):before { content: "Workshop Start Date "; }

    td:nth-of-type(7):before { content: "Workshop End Date "; }

    td:nth-of-type(8):before { content: "Contract Person "; }

    td:nth-of-type(9):before { content: "Phone Number"; } 

    td:nth-of-type(10):before { content: "E-mail";}

    td:nth-of-type(11):before { content: "Web Address"; }

     

     

    /*Make the width of the date field 50%*/

    .dateContainer {

    width: 50% !important;

    display: inline-block !important;

    }

    /*Make the width of the text boxes 70%*/

    #list > tbody > tr > td > input[type="text"] {

      width: 70% !important;

    }

     

    /*Hide the original thead*/

    th.col1, th.col2, th.col3, th.col4, th.col5, th.col6, th.col7, th.col8, th.col9, th.col10, th.col11 {

    display: none !important;

    }

    }

     

    You can edit my code as you pleased. You can find the CSS code under the Widget settings->Custom CSS tab.

    I hope that helps.

     

    For the other concern that you have, please refer to this link instead: https://www.jotform.com/answers/865614. It's a different concern on this one so we need to have it separated to avoid confusion and for us to better assist you.

    Thank you.