Classic Forms/Multiple Columns Form: Ability to identify fields from different columns.

  • Profile Image
    nealbryant
    Asked on February 19, 2018 at 06:37 PM

    Thanks for your help i've finally got around to fixing the columns and am now happy with how it's all looking. 

    When the data is recorded (and delivered in the submission) I would like the fields within column 1 to somehow be identifiable as from that column and the same for column 2. Is that possible? 

    1519079457Screen Shot 2018-02-19 at 22.3


    At the moment we are recording similarly labelled data within both columns so it's difficult to distinguish which is which when the submissions comes through. i.e. name is recorded in both columns (one field relates to the individual and one to a partner/relative). 

    This is only relevant at the top of the form.

    Thanks in advance for your help. 

    Neal 

  • Profile Image
    Kevin_G
    Answered on February 19, 2018 at 06:57 PM

    Unfortunately, it's not possible to distinguish the fields based on the column they are placed in, the only way that I think it may be possible to achieve would be adding a prefix and hiding it with some CSS code.

    You may add a letter as prefix: 

    15190844841.png

    Get the fields label ID: 

    15190845721.png

    Replace the copied id on the id on the code below: 

    #label_45::first-letter {

        font-size: 0px !important;

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    nealbryant
    Answered on March 21, 2018 at 01:29 PM

    Hi Kevin,

    Thanks for coming back to me, apologies for the slow reply I had missed the response.

    That seems to work, but is there a way of adding entire words and hiding that? 

    I'm aiming to record the info into google docs, is there perhaps something in that set-up that will allow me to organise the fields within their parent column?

    Ideally I would like all of the fields under "Partner / in" to be presented in a way that's clear that they relate to that column. At the moment the information is recorded left to right, so you get "Name" from column 1 followed by "Name" in column 2, which doesn't make it easy to pull the info out once it's been submitted.

    Any tips of wisdom would be really appreciated. 

    Thanks,
    Neal

  • Profile Image
    Kevin_G
    Answered on March 21, 2018 at 02:22 PM

    It's not possible to do the same with a word, at least, it's not possible to do it with CSS, JavaScript can handle this, but it would require you to work on the form's source code as the form builder does not accept JavaScript codes. 

    The only thing that I can think may help yo identify the fields would be using a configurable list widget to display the fields from each column, you can edit the widget to be displayed in a block and then display both widgets inline. 

    You will find the widget here: https://widgets.jotform.com/widget/configurable_list 

    This guide will help you adding the widget to your form: https://www.jotform.com/help/252-How-to-Add-a-Widget-to-Your-Form 

    And the following guides will help you configuring the widget and editing its layout, the codes are for mobile responsive, but adding them without the media query will affect this no matter if the form is loaded in a desktop computer. 

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

    https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

    I hope this helps. 

  • Profile Image
    nealbryant
    Answered on March 26, 2018 at 10:34 AM

    Hi Kevin,

    Thanks for the response and the advice. I'm not very familiar with javascript, so that's probably best to avoid. 

    I've tested adding the widget as suggested, and after having a play I think this may present it's own issues. You're right that it does show the fields together, but it presents the info as a list within one cell. I presume there isn't much that can be done about that? 

    Also it doesn't seem to like autofill and translate when used in Chrome, whereas the rest of the form plays nicely. 

    It's possible to organise (changing the order of the fields) the email submission so that everything makes sense there, but i'm struggling to get google sheets to play ball in the same way as changing any ordering to help with signposting seems to be messing things up.

    At the moment it seems that the best way to do this is to manually set-up a separate sheet and then import from the specific cells into that new one, which would then become the master sheet. This is probably going to take a while and is open to manual error, so let me know if you have any further ideas that might help get around the problem. 

    Thanks,
    Neal

  • Profile Image
    nealbryant
    Answered on March 26, 2018 at 10:42 AM

    Hi again,

    I also meant to ask a further question about google sheets, as some of the test submissions that I have submitted have come through as long strings of characters (example below). Any ideas why that is happening?

    Thanks,
    Neal


    fJAzhaY4E4c0Ljo1pLobwvSU8G/25L/lEpeBuOMoYHLhqN893a5OlRibRt5MmtA4HV6Gd4TYjGEpxm1FB9tCW5sMZDTbsPjojYmRGrM4kGP7dbUyF9BbIh85HD6PujyejJa+l/MJooP1q9dYidDeyMEIZK3LypyslP99Nyzbc4+Ts36kMZ5ZIsYOjpympKA6ZpUOPpuqHe43J6eINDE78fYHcgSgSXMn27XM+Cy5NA22ICTbHa6QcKC3lLyVqHqTNt31jsVdQHmXdYNAdC/PmxGo6HQD+cTvFxAkh8ONXIcxvUiQpjwr2b9Zve8OzUIIA80h5q5+6HVQkrqxdLHLBA==

  • Profile Image
    Kevin_G
    Answered on March 26, 2018 at 12:16 PM

    Yes, the widget will send the information in a single sheet, unfortunately, I do not think there is any other way to achieve this, the only workaround available with CSS code is adding a letter as identifier and hiding it or using the widget. 

    We may open a feature request for this if you want, although we cannot provide an ETA or ensure this will be implemented, we will keep you updated via this thread. 

    Regarding your last question about the Google Spreadsheet integration, I have moved it to another thread in order to assist you better, we will help you as soon as possible here: https://www.jotform.com/answers/1426006 

    Thanks. 

  • Profile Image
    nealbryant
    Answered on March 26, 2018 at 01:53 PM

    Hi Kevin,

    Thanks for the response and for raising it as a feature request. I see being able to identify/organise info in that way quite useful, especially for larger forms this this example. 

    For now it sounds like the best thing to do it to pull the info across into a separate google sheet so that everything can be organised as usefully as possible.

    Neal

  • Profile Image
    Kevin_G
    Answered on March 26, 2018 at 02:19 PM

    Yes, the request has been already opened and we will keep you updated via this thread. 

    Thanks. 

  • Profile Image
    nealbryant
    Answered on March 28, 2018 at 10:25 AM

    Hi again Kevin,

    One thing I hadn't considered with this was responsive design. As soon as the form is viewed on a mobile it throws it out, and all of the fields become mixed up (as everything collapses from left to right down the page). Is this avoided if the widget is used? 

    Thanks,
    Neal

  • Profile Image
    david
    Answered on March 28, 2018 at 11:46 AM

    If a configurable list widget is used and it is styled so that each field is on it's own line, then it wouldn't matter if the form was viewed on desktop or mobile.  Though the layout might be a bit less visually appealing on desktop compared to your current layout.

  • Profile Image
    nealbryant
    Answered on March 28, 2018 at 12:10 PM

    Hi David,

    Thanks for coming back to me. 

    If I wanted to prevent the form from shrinking below a certain width and maintain both columns what would be the best way of doing that? I think that would be preferred at this stage than getting into reworking. Would the best way of doing that be for everything to scale together rather than reordering?


    It's a very small percentage of users who use the end site on mobile, so I don't see this as being a problem. 

    Thanks,
    Neal
  • Profile Image
    Kevin_G
    Answered on March 28, 2018 at 01:21 PM

    I think it may not be possible to keep the form displaying both columns inline, this is basically due to the space on mobile devices, this is ok on desktop and other devices without a small screen since the fields can be ordered inline; however, while on mobile the fields would be displayed a bit piled up. 

    Also, it would require a lot of CSS code to re-order the fields to be displayed properly on mobile devices; however, I have been playing with a workaround and I think I found a better way to, at least, avoid the fields to be distorted on mobile. 

    In order to avoid getting this thread longer and since this is a new matter I have moved the request to another thread, we will assist you as soon as possible here: https://www.jotform.com/answers/1428714 

    Thanks.