Hi All, 

I created a form that users fill out. I have noticed that the form looks just as I want it to while i;m filling it out, however after it has been submitted, If i look at the submission under the results tab, that image is wrong/jumbled up, and then if i look at the form that is saved into the repository, that one is also different. Using forms 9.2

I was under the impression that whatever we see when we hit submit, that is what gets saved. I have a feeling this has to do with custom CSS that i have written into the form to alter the positioning of the fields. 

There are also some fields that are supposed to be hidden, but they show up on the saved form as well.

Below is what I see as I am filling out the form. Depending on which of the 3 nodes selected, different fields show below them.

Everything looks good when I hit submit. This next image is what the submission shows in results tab

As you can see, the formatting has changed. Below is what is saved into the repo.

So it still has the messed up formatting, but it also shows the hidden fields. I'm not the best using CSS, so there could be things that I am missing here. But i coded the CSS to make the form look the way I want it to when users are filling it out. Below is my attempt to write CSS.

#q2 label {width: 50px;}
#q5 label {width: 100px;}

#q42 label {width: 80px;}
#q7 label {width: 150px;}

/* First middle last name */
#q2 .cf-field {width: 160px; min-width: 160px}
#q2 .cf-medium {width: 160px;}

#q3 .cf-field {width: 180px;}
#q3 .cf-medium {width: 180px;}

#q4 .cf-field {width: 100px; min-width: 100px}
#q4 .cf-medium {width: 100px;}

/* Student Id, Dob, other name*/

#q42 .cf-field {width: 60px; min-width: 60px;}
#q42 .cf-medium {width: 60px;}

#q5 .cf-field {width: 120px; min-width: 120px;}
#q5 .cf-medium {width: 120px;}

#q7 .cf-field {width: 200px; min-width: 200px;}
#q7 .cf-medium {width: 200px;}

/* Email + daytime#*/
#q8 label {width: 110px;}
#q9 label {width: 170px;}

#q8 .cf-field, #q9 .cf-field {width: 220px; min-width: 220px;}
#q8 .cf-medium, #q9 .cf-medium {width: 220px;}


#q2, #q3, #q4 {display: inline-block;}
#q5, #q42, #q7 {display: inline-block;}
#q8, #q9 {display: inline-block;}

/* HS Diploma*/

#q19 .cf-field, #q20 .cf-field, #q22 .cf-field {width: 200px; min-width: 200px;}
#q19 .cf-medium, #q20 .cf-medium, #q22 .cf-medium {width: 200px;}


#q19, #q20, #q22 {display: inline-block;}

#q25 label {width: 280px;}
#q26 label {width: 140px;}

#q25 .cf-field, #q26 .cf-field {width: 100px; min-width: 100px;}
#q25 .cf-medium, #q26 .cf-medium {width: 100px;}


#q25, #q26 {display: inline-block;}

/* GED */
#q29 label, #q33 label {width: 30px;}
#q30 label {width: 1px;}


#q29 .cf-field {width: 300px;}
#q28 .cf-field, #q30 .cf-field, #q31 .cf-field, #q32 .cf-field, #q33 .cf-field, #q36 .cf-field, #q37 .cf-field {width: 240px; min-width: 240px;}
#q28 .cf-medium, #q30 .cf-medium, #q31 .cf-medium, #q32 .cf-medium, #q33 .cf-medium, #q36 .cf-medium, #q37 .cf-medium {width: 240px;}

#q36 label {width: 220px;}
#q43 label {width: 60px;}
#q28, #q29, #q30, #q31, #q32, #q33, #q36, #q43{display: inline-block;}

Any tips greatly apperciated