-
vnielsonAsked on April 13, 2018 at 2:26 PM
I am looking to change the layout of address field to be from
#input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_state, #input_7_postal, #input_7_country
to
#input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_county, #input_7_state, #input_7_postal
How would I make that change ?
-
Brody_SReplied on April 13, 2018 at 3:21 PM
Unfortunately, the address element does not offer "an easy" way to do this, if you could provide us with the form in question we can reposition the fields with custom CSS for you.
Thanks
-
vnielsonReplied on April 13, 2018 at 3:43 PMThank you very much.
https://form.jotform.com/80664857016159 (both shipping and billing address if you would be willing please)
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Brody_SReplied on April 13, 2018 at 4:06 PM
Could you please specify which elements you would like to switch for which, as you have mentioned six elements while there are only five in each form.
I apologize for the inconvenience.
-
vnielsonReplied on April 13, 2018 at 4:43 PMI was going to add country and change its name to county and move it between city and state
Get Outlook for iOS
________________________________
... -
Richie JotForm SupportReplied on April 13, 2018 at 5:24 PM
If you change the State Options to "AMERICAN STATES" it will only select the county available in the states.
However, if you want to use the country and change it to county, you can change it in the General tab of your address properties
then Sublabels and change the name Country to county.
Then we add the custom css codes.
#input_16_country{
position: absolute!important;
margin-left: -130px!important;
margin-top: -68px!important;
}
#sublabel_16_country{
position: absolute!important;
margin-top: -40px!important;
margin-left: -130px;
}
#input_16_state{
position: absolute;
margin-top: 40px!important;
margin-left: -180px;
}
#sublabel_16_state{
position: absolute;
margin-top: 70px!important;
margin-left: -170px;
}Just change my input_16 and sublabel_16 to input_7 and sublabel_7.
Here is a sample screenshot.
Please give it a try and let us know how it goes.
Thank you.
-
vnielsonReplied on April 16, 2018 at 7:43 AMI am a little confused here. The way I read this email was option 1 - change the state optioins to “American States” Which I did but no counties display, but the directions say “it will only select the county available in the states.”
Do I need to do the second option as well?
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Kevin Support Team LeadReplied on April 16, 2018 at 10:05 AM
Apologies for the confusion.
When you select "American States" on the "State Options" section of the field, the default country will be United States, but the country field will not be displayed on the form. Now, if you need to display the country drop down you only need to select the text box option on the "State Options" section, this will add the country drop down to the address and the users can select between the different countries listed there.
The second steps are to make sure the labels are as you want only, you may only check that each field is labeled correctly.
-
vnielsonReplied on April 16, 2018 at 1:43 PMI am even more confused. Option 1 – If I select American States , it forces a drop down of the states. No county selections or text field to enter county.
Option 2 – I am not needing to select a country, I need to have a text input for county. My thought on this was to change the css from country to county. Then place the county text field between city and state.
Is this at all possible?
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Brody_SReplied on April 16, 2018 at 3:07 PM
Unfortunately what you are looking for can't be achieved using the address element. It allows for an addition of one extra field -> country. While you can change its name to "county" it won't alter the dropdown options available (countries/US states).
You can, however, add a sperate short entry element with the question of "county" and have it positioned within the address element with CSS.
Please let us know if that is an acceptable solution to you, and provide us with the form you would like to do this on (after you add the short text entry element). We can provide you with the CSS necessary.
Thanks
-
vnielsonReplied on April 16, 2018 at 3:43 PMThank you, I have added two short text entries with county under each of the Address elements that I want the county text field added to ..
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
vnielsonReplied on April 16, 2018 at 3:43 PMDon’t know if the form url is still on the ticket https://www.jotform.com/build/80664857016159 (sorry if this is a duplication)
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Brody_SReplied on April 16, 2018 at 4:41 PM
Please change the short text entry sublabel into "County" (for both).
Then add the following CSS to your form:
@media only screen and (min-width: 770px) {
li#id_19 {
width: 170px;
position: absolute;
top: 500px;
left: 300px;
}
li#id_18{
position: absolute;
top: 822px;
left: 301px;
}
#label_19, #label_18{
display: none;
}
}
Please note that this will only work on browsers and not on mobile devices.
I hope this will help you!
Thanks
-
vnielsonReplied on April 17, 2018 at 11:43 AMThank you, although the County is not aligned with the rest of the text? Is that a screen resolution issue? Or would I need to adjust the CSS?
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Kevin Support Team LeadReplied on April 17, 2018 at 11:57 AM
I can see what you are referring to, please try adding this code to the form in order to change the field's position:
input#input_19 {
width: 146px;
}
You may add it right after the line "@media only screen and (min-width: 770px) {" on your current CSS code.
I hope this helps.
-
vnielsonReplied on April 17, 2018 at 12:43 PMStill shows off.
Is my code correct:
@media only screen and (min-width: 770px) {input#input_19 {
width: 146px;
}
li#id_19 {
width: 170px;
position: absolute;
top: 500px;
left: 300px;
}
li#id_18{
position: absolute;
top: 822px;
left: 301px;
}
#label_19, #label_18{
display: none;
}
}
Vernon Nielson
Teamwork makes the dream work
IT Coordinator | SouthEast Texas Regional Advisory Council
Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
1111 North Loop West | Suite 160 | Houston, TX 77008
Save our in-boxes! http://emailcharter.org
... -
Kevin Support Team LeadReplied on April 17, 2018 at 12:54 PM
Please try the code like this:
@media only screen and (min-width: 770px) {
input#input_19 {
width: 146px;
}
li#id_19 {
width: 170px;
position: absolute;
top: 500px;
left: 322px;
}
li#id_18{
position: absolute;
top: 822px;
left: 301px;
}
#label_19, #label_18{
display: none;
}
}
Also, the field may display a bit different depending on the screen size, if the problem persists on your end, you may change the "width" and "left" values in the code in bold text in order to change the position and set a value that displays the field properly on your end as well.
Thanks.