Forms field overlap and one is not accessable

  • reelance
    Asked on June 9, 2014 at 4:46 PM

    Hi, this is my form, http://www.jotform.co//?formID=41327536167860 and the problem is that my customers cant sellect the ciudad (city) and estado (state) opcion with their mouse, any idea how i can fix this with out change the position of the form?

  • David JotForm Support
    Replied on June 9, 2014 at 6:07 PM

    The problem is with overlapping for your form areas.  The Ciudad and Estado fields are currently hidden beneath for Calle y numero.  Due to the custom css you have it will not allow you to access those fields.  The simplest way to fix this would be to remove The part that contains the Ciudad and Estado fields and place them below the form with Calle y numero.

     

    Forms field overlap and one is not accessable Image 1 Screenshot 30

    Forms field overlap and one is not accessable Image 2 Screenshot 41

  • reelance
    Replied on June 9, 2014 at 7:35 PM

    to fix this we can edit width of the field of phone with css? Can you also tell me the id of the field please?

  • David JotForm Support Manager
    Replied on June 9, 2014 at 8:52 PM

    In order to get the ID of a field select a field and click on the "Properties" icon and choose "Show Properties".

    Forms field overlap and one is not accessable Image 1 Screenshot 30

    In the "Properties" window, you will see the field ID and Name under the “Field Details” section.

    Forms field overlap and one is not accessable Image 2 Screenshot 41

  • reelance
    Replied on June 9, 2014 at 9:36 PM

    How can i change the width of the field phone so the fields dont overlap?

  • Ashwin JotForm Support
    Replied on June 10, 2014 at 12:11 AM

    Hello reelance,

    Please take a look at the following cloned form and see if this works as expected :  http://form.jotformpro.com/form/41599509462970? 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

    If you want to resolve this in your own form, you need to just "Shrink" the phone field. That should solve your problem. Please check the following screenshot: 

    Forms field overlap and one is not accessable Image 1 Screenshot 20

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • reelance
    Replied on June 10, 2014 at 11:31 AM

    hi, can you tell me how you do this, because i have 20 form with the same problem! with integrations and diferent characteristics! and it would tike me a lot to clone and do everything again! i try shrinking but it moves all my forms

  • jedcadorna
    Replied on June 10, 2014 at 2:48 PM

    Hello,

    Please take a look at this image of how it was done.

    1. When you hover you mouse to Lada and Telefono you can see that it overlaps Ciudad and Estado.

    Forms field overlap and one is not accessable Image 1 Screenshot 40

    2. Just click on the wheel icon then shrink the Lada and Telefono field.

    Forms field overlap and one is not accessable Image 2 Screenshot 51

    3. You can now see that Ciudad and Estado fields are now cleared

    Forms field overlap and one is not accessable Image 3 Screenshot 62

  • reelance
    Replied on June 10, 2014 at 3:00 PM

    Hi, when i try to shrink it this happends! http://www.jotform.co//?formID=41605424349857, in doesnt shrinks in the place it coreespond.

     

    -this is the original http://www.jotform.co//?formID=41326568391863 so you can try shrinking this one to see if you are haveng the same results

  • jonathan
    Replied on June 10, 2014 at 4:23 PM

    @reelance

    Hi,

    Was the form http://www.jotform.me/form/41606594723458 created by our colleague Jedcardorna matches already your form requirement?

    You can actually also clone the form so that you can have a better understanding how it was created when you open the form in the form builder.

    The issue with your form http://www.jotform.co/form/41605424349857  was the "Phone Number" field needs to be Moved to New Line after shrinking so that it will aligned properly

    Forms field overlap and one is not accessable Image 1 Screenshot 30

     

     

    Forms field overlap and one is not accessable Image 2 Screenshot 41

     

    I did this on my own version of the form  http://form.jotform.me/form/41605963634458? and it works.

    Please try this modification on your form.

    Inform us if still not resolved.

     

    Thanks!