-
akrevertsAsked on May 8, 2017 at 12:21 PM
is there anyway I can move the address fields to one line? Right now jot form automatically keeps address on a row, city & state on a row and zip code on a row. I print the submitted forms it would be great if I could consolidate a little to save on paper or page print formatting.
Thank you! -
RyanCReplied on May 8, 2017 at 1:33 PM
Please send link, so that custom css codes will be given.
-
Nik_CReplied on May 8, 2017 at 1:39 PMI wasn't sure for which form you wanted to line the address field, but I did for this: http://www.jotform.us/form/71236141888157And the CSS that you need to copy into the Custom CSS field is:#id_10 {height: 15px;}#input_10_city {position: relative;left: 330px;top: -55px;}#sublabel_10_city {position: relative;left: 330px;top:-55px;}#sublabel_10_state {position: relative;left: 330px;top:-55px;}#input_10_state {position: relative;left: 330px;top:-55px;}#input_10_postal {position: relative;left: 660px;top: -110px;}#sublabel_10_postal {position: relative;left: 660px;top: -110px;}div#cid_24 {position: relative;left: 790px;top: -18px;}That is for the first address field and it should align like this:For the second Address field this is the CSS:#id_11 {height: 15px;}#input_11_city {position: relative;left: 330px;top: -55px;}#sublabel_11_city {position: relative;left: 330px;top:-55px;}#sublabel_11_state {position: relative;left: 330px;top:-55px;}#input_11_state {position: relative;left: 330px;top:-55px;}#input_11_postal {position: relative;left: 660px;top: -110px;}#sublabel_11_postal {position: relative;left: 660px;top: -110px;}div#cid_25 {position: relative;left: 790px;top: -18px;}Let us know how it worked or if you had some other form in mind.Thank you!
-
akrevertsReplied on May 9, 2017 at 2:43 PMthank you so much! Here's the form, just a few things I'd like help making
adjustments on:
-phone number on separate line in both sections
-The zip code text fields in both sections is slightly lower, how do I make
an adjustment for this?
-Below the table, name, email phone, how can this be consolidated?
I was able to make some adjustments to the table code but not able to do
that with this code. Maybe I need to learn a little bit of this. Anyways,
any help is wonderful!
Here's how the form looks now: https://form.jotform.us/71236141888157
... -
Kiran Support Team LeadReplied on May 9, 2017 at 5:27 PM
-phone number on separate line in both sections
Please move the phone number to the next line after shrinking it from the field properties.
https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm
Then replace the following section of the code (blue colored) provided by our colleague in the previous post with the green colored code below:
div#cid_24 {
position: relative;
left: 790px;
top: -18px;
}
div#cid_25 {
position: relative;
left: 790px;
top: -18px;
}
to
div#cid_24 {
margin-top: 35px;
}
div#cid_25 {
margin-top: 35px;
}
-The zip code text fields in both sections is slightly lower, how do I makean adjustment for this?
The zip code fields seem to be displaying correctly at my end.
However, I see that the phone field is displaying a little lower. Since the phone number field is being moved down, it should be fine.
-Below the table, name, email phone, how can this be consolidated?
Please make sure that you position the fields on the form in the same row and then add the following CSS code to the form:
#label_14, #label_26 {
width: 15px !important;
}
Please take a look at the cloned version of your JotForm with the above changes.
https://form.jotformpro.com/71286288061965
Feel free to clone it to your account.
Please get back to us if you need any further assistance. We will be happy to help.