How to collect numbers on configurable list widget, but show text on form?

Okay, so now how do I layout the form the way I need to? Can it all be done just with CSS? The form needs to have rows and columns, some columns will be a dropdown option, some will just be text. 

I would like to suggest to take a look at the following 2 guides:

How to Position Fields in JotForm

Video Course: Form Designer Basics

Now, if you are still not sure on how to achieve some layout or if you are having any issues doing so, please do let us know what is the form and what exactly should be changed and we would be happy to see and let you know if it can be done through CSS and if so, how.

Hi, I am still having issues getting the form to be styled correctly. I have tried css and but nothing is working. Maybe it has to do with the hidden fields. I've tried changing widths and using controls within Jotforms but can't get it to look the way it looks in the link below. I need it to be like that or something similar. 

https://files.jotform.com/jufs/forum/rahlness/1446759736form-layout.PNG

Can you please tell us what is the form?

Also, have you checked this widget: Spreadsheet or Advanced Spreadsheet?

They will allow you to show cells on your form without any styling on your part.

Alternatively you could use Matrix field (found under Survey Tools on the left).

Hi Ben, 

I did not know about Spreadsheet. It looks promising but I don't know if it will be capable of the functionality I need. I have been going back and forth with you and a number of other Support reps about this. 

My original post is here - http://www.jotform.com/answers/691222

To answer your question - the form example that I provided was made using Excel, but there are elements of capturing the data that I need Jotforms for. Please see Kiran's answer in the link I provided above - dated November 5th. That is the functionality I am needed along with the formatting. I have tried Matrix but it ended up not being able to have all the components I need.

When I click on Advanced Spreadsheet it says "Application Not Found". 

I actually had helped with a setup much like the one you are referencing.

I do however think that there is a way to make it as what you have referenced on the other thread in a simpler way than using individual fields, but do give me a bit of time to test this and I will update you about it here.

This is the text from the other thread that I will look to create:

For example "Gender" I need the selection options to be 1- Male, 2 - Female. "Race" - 1 - African American, 2- American Indian, etc.. But when I get the results, to only show a number.

 

That was me that wrote that LOL :)

 

Yes, you are right, that was what you wrote :)

I was not on that thread with my colleagues and your comment got moved to this new thread since it seemed that you were able to accomplish what you want, but needed some extra styling.

Now looking back, it will be far more easier to accomplish what you were after at the start than to create a whole bunch of fields and setting them to align nicely to one another - at least when looking at the updating later part.

This is a demo based on the text your wrote and the image that you posted:

This is the link to the demo form: https://form.jotform.com/53364994938979

Feel free to clone the form to your account for closer inspection. You can do that by following these steps: How to Clone an Existing Form from a URL

Now how it was done:

I set the configurable list to show the values that we want to see in report, so instead of using Male and Female, I set "1" and "2".

Now the same was done to other fields, so we ended up with this:

blank : static : Participant
*First Name : text : First Name
*Last Name : text : Last Name
*Gender : dropdown : 1, 2, three : Choose one
*Age Range: dropdown : 1, 2, three : Choose one
Race / Ethnicity : checkbox : 1, 2, 3, 4, 5, 6, 0
Primary Disability Diagnosis : checkbox : 1, 2, 3, 4, 5, 6, 0
Notes : text : Add your note

Once I did that I added the actual values through the CSS. This is the CSS used:

.col4 select > option:nth-child(2):after {
     content: " - Male";
}
.col4 select > option:nth-child(3):after {
     content: " - Female";
}
.col5 select > option:nth-child(2):after {
     content: " - < 15";
}
.col5 select > option:nth-child(3):after {
     content: " - 15-17";
}
.col5 select > option:nth-child(4):after {
     content: " - 18-22";
}
.col5 select > option:nth-child(5):after {
     content: " - 23-25";
}
.col5 select > option:nth-child(6):after {
     content: " - >26";
}
.col6 .checkbox:nth-child(1)  label:after {
     content: " - African American";
}
.col6 .checkbox:nth-child(2)  label:after {
     content: " - American Indian or Alaskan Native";
}
.col6 .checkbox:nth-child(3)  label:after {
     content: " - Asian American";
}
.col6 .checkbox:nth-child(4)  label:after {
     content: " - Caucasion (Non-Hispanic)";
}
.col6 .checkbox:nth-child(5)  label:after {
     content: " - Hispanic";
}
.col6 .checkbox:nth-child(6)  label:after {
     content: " - Other";
}
.col6 .checkbox:nth-child(7)  label:after {
     content: " - Decline";
}
.col7 .checkbox:nth-child(1)  label:after {
     content: " - Autism Spectrum Disorder";
}
.col7 .checkbox:nth-child(2)  label:after {
     content: " - Downs Syndrome";
}
.col7 .checkbox:nth-child(3)  label:after {
     content: " - ADHD/ADD";
}
.col7 .checkbox:nth-child(4)  label:after {
     content: " - Intellectual Disability";
}
.col7 .checkbox:nth-child(5)  label:after {
     content: " - Other Disability";
}
.col7 .checkbox:nth-child(6)  label:after {
     content: " - No Disability";
}
.col7 .checkbox:nth-child(7)  label:after {
     content: " - Decline";
}
th.col1 {
    visibility: hidden;
}
.col1 {
    min-width: 100px;
}
.col2 > input, .col3 > input {
    max-width: 90px;
}
td.col6 {
    min-width: 260px;
}

td.col7 {
    min-width: 210px;
}
tr:nth-child(2) > td.col1 span:after {
    content: " 1";
}
tr:nth-child(3) > td.col1 span:after {
    content: " 2";
}
tr:nth-child(4) > td.col1 span:after {
    content: " 3";
}
tr:nth-child(5) > td.col1 span:after {
    content: " 4";
}
tr:nth-child(6) > td.col1 span:after {
    content: " 5";
}
tr:nth-child(7) > td.col1 span:after {
    content: " 6";
}
tr:nth-child(8) > td.col1 span:after {
    content: " 7";
}
tr:nth-child(9) > td.col1 span:after {
    content: " 8";
}
tr:nth-child(10) > td.col1 span:after {
    content: " 9";
}
tr:nth-child(11) > td.col1 span:after {
    content: " 10";
}
tr:nth-child(12) > td.col1 span:after {
    content: " 11";
}
tr:nth-child(13) > td.col1 span:after {
    content: " 12";
}
tr:nth-child(14) > td.col1 span:after {
    content: " 13";
}
tr:nth-child(15) > td.col1 span:after {
    content: " 14";
}
tr:nth-child(16) > td.col1 span:after {
    content: " 15";
}
tr:nth-child(17) > td.col1 span:after {
    content: " 16";
}
tr:nth-child(18) > td.col1 span:after {
    content: " 17";
}
tr:nth-child(19) > td.col1 span:after {
    content: " 18";
}
tr:nth-child(20) > td.col1 span:after {
    content: " 19";
}
tr:nth-child(21) > td.col1 span:after {
    content: " 20";
}
tr:nth-child(22) > td.col1 span:after {
    content: " 21";
}
tr:nth-child(23) > td.col1 span:after {
    content: " 22";
}
tr:nth-child(24) > td.col1 span:after {
    content: " 23";
}
tr:nth-child(25) > td.col1 span:after {
    content: " 24";
}
tr:nth-child(26) > td.col1 span:after {
    content: " 25";
}
tr:nth-child(27) > td.col1 span:after {
    content: " 26";
}
tr:nth-child(28) > td.col1 span:after {
    content: " 27";
}tr:nth-child(29) > td.col1 span:after {
    content: " 28";
}tr:nth-child(30) > td.col1 span:after {
    content: " 29";
}tr:nth-child(31) > td.col1 span:after {
    content: " 30";
}

Now, you have probably noticed, the "Participant" label, in the form, if not, here is the screenshot of the configurable list that I had used:

The Participant was set to just that "Participant" in the fields configuration since it is being repeated. Now to make it like the screenshot you made, I added CSS that adds 1, 2, etc (as you can see), making it appear as "Participant 1", "Participant 2", etc.

Since it is done through CSS it is limited to 30 rows, so I set the maximum number of entries on the widget to 25.

OK, so most important part is the submission and how it looks.

So this is the screenshot of the same:

*If I understood you correctly, that is what you were after :)

Do however make your tests and let us know how it goes for you.

Hi Ben, 

Wow, thank you for this. I think this is the closest to getting there.

I think just two things.

1.) Instead of having 1 or 2 for Male or Female, I need need the selectiont o be Male or Female and the results to show either 1 or 2. Same for Age Range. 

2.) The form still looks pretty bare and the fields are very scrunched together. Will I be able to style it more using CSS? 

Thanks so much again for your terrific support. 

You are welcome :)

Glad to hear that it is something that you are after.

Now in regards to the numbers. Based on your previous text, I understood that you want the numbers to be shown on the form. Making them not shown, would be a bit more trickier to do, but hopefully possible :)

2.) The form still looks pretty bare and the fields are very scrunched together. Will I be able to style it more using CSS?

Yes, the form example above is just that, you can add any other fields and CSS to it, as well as to the widget itself (as long as it does not change what we need to make it look properly)

Do give me a bit of time to look into this since CSS used will be different than the above if we can hide the numbers.

I will update you soon on this thread in regards to this.

 

Thank you, Ben. You don't know how much this really helps. 

Regarding the 1 or 2. I do need those, but those need to show in the results of the form. So say if someone chooses Male I would see 1 in the results for that field. If Female, I would see 2. Hope that makes sense!

Yes, I understood that as the most important thing :)

Now, I was able to craft the CSS that hides the numbers, while shows the text, but that is only while you are selecting the value.

Once you select some value it will show you a number - instead of male it will show 1 for example.

This is a default dropdown behavior and we can not change it - at least not without CSS alone.

You can see the form here: https://form.jotform.com/53366435833965

Aside this the only option would be to create all of the fields one by one and then style them into the proper layout.

Then take such form and do modifications on the source code of it to be able to achieve the desired result.

I think we're getting there!! :) I don't mind it changing to a number once someone selects that option. Hopefully client I'm working with won't either. 

I tried the new url you sent, but it is still showing 1 or 2 :/

Hi rahlness,

I can see what you are saying, I can see only 1 and 2 in the select field, and I tried to make it work , but I can not find a way, I will ask for some help to my collegue Ben, and also will keep working on it for try to achieve it.

Thanks.

My colleague has left a note for me in regards to this, and I can see the same issue when testing in Chrome browser.

If you check the same form in FireFox it will work properly: https://form.jotform.com/53366435833965

Unfortunately, Chrome is not a browser that has all of the features of the FireFo browser, so it leaves rendering of the select (dropdown) and all of its elements to your own system, so someone might see it as on FireFox and someone might not.

I had used FireFox since its first steps and dislike using Chrome, so it is a bad on my part for not testing on it as well (thought that they would support it).

The same seems to be happening in the old IEs, but should work on IE9 and above (based on what I saw while looking into this).

Unfortunately the only way to actually do this would be to use single fields and position each in the way you prefer, but once you have it all set up as you are after - you would need to grab the source code of your form and make custom scripts on it, which would allow you to show one thing and have the same submitted in the other manner.

Alternatively, what you could do is to capture the form as it is (Male, Female) and then use webhooks to send you the submitted data to your website.

Once sent, a script on your website could check if it is Male or Female and save the data within your own database as 1 or 2.

Hi Ben, 

Shucks.. just my luck, only works on Firefox. 

It looks like we have a good percentage of it complete. The solution may to just be get the data and do a find and replace in Excel once the form is submitted. 

Hi Ben, 

If it turns out that we just decide to do a find and replace in Excel, could I just create the form using a distribution list or the spreadsheet widget? 

If you are OK with having the values changed in the excel file then yes, that would work.

You can actually create this using any widget that you like, be it Distribution list, Spreadsheet widget, Configurable list, or set of fields.

However I do suggest checking how each widget sends its data to the excel (since some data will be in single cell per submission) so you can check and see what would work best for you.

We are of course here to assist as much as we can :)

Okay. Welp.. I'll see what happens. Thanks again.

You are welcome :)

As mentioned, we are here, just let us know if we can help :)