Separating fields

It's possible to do what you are asking with some custom styles (maybe something like max-width: 100%; on the field labels) but I'd be concerned about the user experience on mobile with that form design. Are you certain that nobody would ever be filling that form out on a handheld device? It would create some very difficult scrolling. Would your client allow you to change the way the questions are asked? Something like this could simplify the screen significantly:

Postal/Stamps
How many do you send every month?
1st class letters [_____________]
1st class large letters [_____________]
2nd class letters [_____________]
2nd class large letters [_____________]

etc.

hi esadmin,

thanks for the feedback on this. it may well be redesigning how we ask the questions on mobile but the client would have preferred that it mirrored the form ( attached in previous message ) but hey, you have to go with whats best. The problem i get is whenever i add a css class to the field, it effects the text as well. so if i wanted a small box at say 1/5 the text would also occupy that small space making it looked boxed across multiple lines. eg

how many first class stamps [      ]

would look like

how many

first class

stamps

[     ]

Yeah, those built-in styles will affect both the label and the field together, as a unit, so it can cause the label to stack like you've seen.

One way you could replicate that exact design would be to set the label position on all the fields to "none", and then use an HTML field to write the full text on each one. I don't care for this design as it makes it much harder to work with the data on the backend when you're setting up email notifications or doing something else with the data, but it could achieve the layout you're looking for on the frontend.

Each HTML field would have CSS layout of: frm_first frm_two_thirds
Each single-line text field would have CSS layout of: frm_third

I think this will get you the visual design you're trying for.

Hi Guys,

I might be missing something obvious but can't you do that just using some CSS?

I just had a play around this seems to work nicely:

/* Custom inline options */

.frm_primary_label.control-label {
width: 66% !important;
max-width: 66% !important;
}

input[type="text"] {
width: 33% !important;
}

I left the demo page up so you can see it in action HERE

You could specify the field ID's instead of using the generic input[type="text"] and also apply some padding for smaller screen sizes using the @media CSS class which would get rid of any issues with handheld devices.

Hope that helps.

Chris

Thanks Chris and esadmin, your solutions are both routes i will take and play with and see which fits best for what i want the finished article to look like. Thank you guys for doing this in your own personal time, its much appreciated.

best regards

Steve