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

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? 

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 

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: 

Get the fields label ID: 

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. 

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

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. 

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

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. 

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

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

Thanks. 

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

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.

Hi David,

Thanks for coming back to me. 

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.