Customise States for Address Field

Hi, I need to create custom 'state options' for the address field. Its an option for card form layout but I can't find it on the classic form layout. Any ideas?

Unfortunately it is currently not possible to add custom state option in the address field of classic form layout.

I would suggest you to please hide the state option form the address field and add a separate dropdown field to list all the states you want to be displayed. We can then help you with custom CSS code to place the state dropdown field along with the fields of address field.

Hope this helps.

Do get back to us if you have any questions.

Hi Ashwin, it would be great if you could help with custom CSS code so that I can place the state dropdown field with the fields in the address field.

Please note that the custom CSS code will be field specific and that is the reason you need to first add the Dropdown field in the form, and then we can help you with the custom CSS code.

I have cloned your form and made the changes. Please take a look at the following cloned form and see if it displays the fields as expected: https://form.jotform.com/211514388357964

Feel free to clone this form in your account. The following guide should help you in form cloning: https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

Hope this helps.

Do get back to us if you have any questions.

Ashwin, that looks great - thank you! The form is actually on my other account https://form.jotform.com/211513427415346 and the change needs to be made to the address fields on pages 1 and 4. I have added the state field - it's named counties.

Thanks again!

Padraig

Before injecting the CSS code, please remove the label in your county field and put the word "County" in the sublabel.

Once done, inject this CSS into your form.

#input_23_city {

  min-width: 48% !important;

  max-width: 48% !important;

}

#id_127 {

  position: absolute;

  top: 811px;

  left: 371px;

  width: 44%;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thanks Jed, that's helpful, however, what Ashwin did seemed to work better in my form. The asterix wasn't visible eventhough it is a required field and the 'county' field was positioned exactly right. Also, the CSS only works for the 1st address field - I also have an address field on page four of my form that needs a dropdown 'county' field added also.

This is how it looks at the moment https://form.jotform.com/211513427415346

I have injected the CSS and fixed the alignment issue in your form. Can you please check if both county fields are now correctly aligned?

Thanks for this Jed! That seems to have done the trick at least for people who access the form in a web browser on their computer. I've tested it on mobile too though and noticed that the 'county' fields have disappeared from the form altogether and now its not possible to move beyond the first page because the county field is a required field.

Hello Padraig_McGrath,

Kindly add this CSS code.

@media (min-width : 304px) and (max-width: 717px){

  #id_127 {

    width : 44%;

  }

It should look like this on a mobile device.

I hope this helps.

Let us know if you need further assistance.

Thanks Sam_G, I've tried that but it doesn't seem to have worked. Its for the 'county' field which on my phone still appears off screen and I have to zoom in like so to view it:

Please try this custom CSS and let us know if this fits your requirements.

@media screen and (max-width: 480px){

#id_127 {

   margin-left: -371px;

  display: contents;

}

#cid_127{

   margin-top: -50px;

}

}

Hi Richie_P,

Thanks for your help. This brings the county field back in to view but it looks like this:

Also, the other address field on page four is still out of view.

I have injected few custom CSS code in your form. Please test your form and see if your fields are being displayed correctly in mobile device or not.

Do get back to us if you need any other changes.