-
m7ickeyAsked on September 9, 2016 at 6:32 PM
Hi, I have created a form and tried to size the text boxes so the make sense, for example, phone needs room for 10 digits, name field for maybe 20, email 25, etc. Below is a screenshot of my form. I cleared 95% of my formatting and am here to ask for help. Everytime I try to shorten or lengthen a field I run into more problems than solutions.
So, I want to:
1. Shorten Name, Street, City, State & Zip text boxes to an appropriate length for those inputs. (see 1st screenshot)
2. Fix the phone number field, in some views its good, others it too short. Weird. I like the masking effect.
3. do 1&2 without affecting the questions or comments space
4. For the checkbox/list area, leave it that width so the text appears in one line, I had to change "Form Layout" "Input Width" to accomplish what I wanted but when I did that it also made the Name, Street, City, etc fields too long.
I hope its clear what I'm trying to do, pretty much common sense things but when I make one field good=checkbox area, it affects all the others, very frustrating. Thanks in advance for any help.
Here you see what I want my checklist to look like on a bigger screen, but all fields below that are wrong lengths, name too long, phone to short, etc (email is good):
Here in phone view, the phone field is better, but still doesn't display all 10 digits
In this landscape phone view, the phone field is good (weird)
Here's a computer monitor showing phone:
And lastly, here's what happens to my checkbox list on a phone. Before I changed the setting to make the list look good on a computer monitor, this view was just one column on a phone, after my change, this is the result, which isn't terrible but a one column list looked better:
Thanks in advance for any and all help. My problems are holding up our website launch so I really appreciate it!
Page URL: https://form.jotform.com/62484612521149 -
Kevin Support Team LeadReplied on September 9, 2016 at 8:06 PM
I will work on the code to fix the issues you're facing on your form, it might take me some time as I have to test it on different screen resolutions, but I will get back to you as soon as possible with the needed code.
Thanks.
-
Kevin Support Team LeadReplied on September 9, 2016 at 8:45 PM
Please try injecting the next CSS code to your form.
This code helps to increase the phone field size:
input#input_23_full {
width: auto;
max-width: none;
}
This one helps to decrease the name fields size:
div#cid_18 {
width: 60%;
}
label#label_18 {
width: 100% !important;
}
This is to reduce the address fields size:
table.form-address-table {
width: 60% ;
}
And this is a responsive code that will help you to display your form properly on mobile devices:
@media only screen and (max-width:480px){
div#cid_18 {
width: 100%;
}
[data-type="control_phone"] .form-sub-label-container{
width: 100% !important;
}
table.form-address-table {
width: 100% ;
}
.form-multiple-column[data-columncount="3"] .form-checkbox-item {
width: 50%;
}
}
Finally here is how the form should look once you inject the code:
On a mobile device:
Here is the link to my cloned form of yours if you want to take a look: https://form.jotform.com/62528174895973
This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes
Hope this helps.
-
m7ickeyReplied on September 10, 2016 at 2:40 PM
Thanks. FYI, your cloned form link doesn't work. I'll try your codes and let you know how I make out.
-
m7ickeyReplied on September 10, 2016 at 3:01 PM
My results differ, see below phone view:
-
m7ickeyReplied on September 10, 2016 at 4:28 PM
Hi,
I gave up and started over. Now I only need one thing which is to get the entire phone number to appear in portrait mobile phone view. Everything else is good. Thanks. Here's the url of the new form:
https://form.jotform.com/62536119695161
-
m7ickeyReplied on September 10, 2016 at 4:41 PM
Ok, I solved the phone view problem. Now I the only other thing is the phone view of the checkbox list. I like your result above, much "cleaner" list. If you could sent me a code to just change that, I will finally be done. Thanks
-
Kevin Support Team LeadReplied on September 10, 2016 at 8:00 PM
I have checked your form and it seems like you have deleted it:
https://form.jotform.com/62484612521149
But I found this another form that seems the one where you're working on: https://form.jotform.com/62536119695161
I can see you have injected this CSS code to customize the check boxes width:
#cid_4 span.form-checkbox-item { -
m7ickeyReplied on September 12, 2016 at 11:10 AM
Thanks. Between what you offered and me re-doing stuff, we can consider this SOLVED!