Customise States for Address Field

  • Profile Image
    Padraig_McGrath
    Asked on June 01, 2021 at 08:38 AM

    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?


  • Profile Image
    ashwin_d
    Answered on June 01, 2021 at 09:39 AM

    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.

  • Profile Image
    Padraig_McGrath
    Answered on June 01, 2021 at 10:27 AM

    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.

  • Profile Image
    ashwin_d
    Answered on June 01, 2021 at 11:51 AM

    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.

  • Profile Image
    Padraig_McGrath
    Answered on June 01, 2021 at 02:03 PM

    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

  • Profile Image
    Jed_C
    Answered on June 01, 2021 at 06:36 PM

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

    1622586933_60b6b6356967f_county.gif

    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%;
    }

    1622586983_60b6b6679186f_Clone of Young

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

  • Profile Image
    Padraig_McGrath
    Answered on June 02, 2021 at 05:26 AM

    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.

  • Profile Image
    Padraig_McGrath
    Answered on June 02, 2021 at 05:37 AM

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

  • Profile Image
    Jed_C
    Answered on June 02, 2021 at 06:56 AM

    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?

  • Profile Image
    Padraig_McGrath
    Answered on June 02, 2021 at 07:36 AM

    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.

  • Profile Image
    Sam_G
    Answered on June 02, 2021 at 08:35 AM

    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.

    1622637318_60b77b06852fb_

    I hope this helps.

    Let us know if you need further assistance.


  • Profile Image
    Padraig_McGrath
    Answered on June 02, 2021 at 08:51 AM

    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:

    1622638210_60b77e827944f_screenshot02062

  • Profile Image
    Richie_P
    Answered on June 02, 2021 at 10:49 AM

    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;
    }
    }
  • Profile Image
    Padraig_McGrath
    Answered on June 03, 2021 at 04:53 AM

    Hi Richie_P,


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

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

  • Profile Image
    ashwin_d
    Answered on June 03, 2021 at 06:26 AM

    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.