What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to prevent the date field from expanding 100 percent width when mobile responsive is enabled

    Asked by e3geo on August 22, 2015 at 10:26 PM

    I've been experimenting with JotForm on and off for about 2 years. Sadly, it seems that no matter what I do, what I try, any combination, I can't get the field widths to format elegantly to be able to fit mobile environments using the builder.

    I've tried to make the form "mobile responsive" from the Designer. I have inserted the Mobile Responsive widget. I have used them both at the same time. I have used neither. I test on Dolphin HD, Firefox, and Chrome on a Droid Maxx and a Galaxy SIII both running Kit Kat and fully updated. No matter what I do, the Date Field, for example, formats so that the field for each dd / mm / yy spread the entire width of the page so that it forces them to stack and look like this

    4

    /

    17

    /

    15

    Most of the other input or selection fields spread the entire width of the page as well, such as, drop down menus. It doesn't resemble elegance and looks quite cheesy, quite frankly.

    Additionally, I had set up and very extensive form, set it up to browser cache save, and after it's expiration time, it totally ruined much of the formatting  and all the buttons stopped working completely. All attempts at fresh sessions no longer worked in either Firefox or Chrome mobile.

    Lastly, I have hopelessly tried to use the Mobile Responsive widget but it causes all images to become giant. Links using images use the entire width of the page and look incredibly ridiculous. :( :( :( :( 

    I would really like to be able to subscribe to JotForm, and I actually had subscribed for, if memory serves, about a year period in the past, I really like the ease of the builder but I can't deploy, demonstrate, and offer a product to a client that doesn't work reliably.

     

    Please help. Thank you.

     

    Steve

    Page URL:
    https://secure.jotform.us/e3geo/DTNAtest

    date field shrink date field mobile date field
  • Profile Image
    JotForm Support

    Answered by Welvin on August 23, 2015 at 05:10 AM

    Hi Steve,

    Our apologies for the troubles and inconvenience this may have caused you.

    The responsive option in the designer should be enough to all these stuff. But our mobile CSS queries will make all inputs to take the whole width of the mobile device, 100% in the responsive mode.

    http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

    I've cloned your form and made the necessary adjustments. Please take a look and let me know if the formatting is what you have desired so I'll let you know the whole steps.

    Here's the form URL: http://www.jotformpro.com/form/52342508962962

    If not, please let us know your preference so we can adjust if for you.

    Thanks

  • Profile Image

    Answered by e3geo on August 24, 2015 at 08:04 PM

    Hi Welvin.

    Thank you for your very rapid response! Yes, that is exactly what I am looking for. Will you provide the method to accomplish this to me please?

     

    Thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 25, 2015 at 12:56 AM

    Hello e3geo,

    I am not sure what changes my colleague have made this form. Your message has reached my colleague and he will get back to you as soon as we is available online.

    For now, I would suggest you to clone my colleague's form and start using it. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Thank you!

  • Profile Image

    Answered by e3geo on September 07, 2015 at 04:54 AM

    Hi. Thank you for responses and for addressing the issue and adjusting the form. It works as I wish for it to.

     

    Per your response above: I've cloned your form and made the necessary adjustments. Please take a look and let me know if the formatting is what you have desired so I'll let you know the whole steps.

    I would like to know how to do this myself so that I may apply it to any new form I create as opposed to being limited to starting a new form from the template as you have suggested. Please provide me the steps you mentioned in your initial response. Thank you.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 07, 2015 at 06:03 AM

    Hello e3geo,

    Please accept my apology for this delay. I have sent a message to my colleague @Welvin. He will get back to you soon.

    Thank you!

  • Profile Image

    Answered by e3geo on September 07, 2015 at 06:53 AM

    Thank you VERY MUCH!

  • Profile Image
    JotForm Support

    Answered by Welvin on September 07, 2015 at 11:49 AM

    I did the following:

    a. Set the mobile responsive in the form Preferences to "NO".

    b. Enabled the mobile responsive option in the designer.

    c. If you have added the mobile responsive widget, please remove that.

    d. Lastly, I have injected the following custom CSS codes to the form:

    @media only screen and (max-device-width: 550px){

        #month_16, #day_16, #year_16 {

           width : 80% !important;

        }

        #cid_16 > span:nth-child(1), #cid_16 > span:nth-child(2), #cid_16 > span:nth-child(3), #cid_16 > span:nth-child(4) {

            width : 24% !important;

        }

        input#input_6 {

            width : 145px !important;

        }

        input[type=text], input[type=email], input[type=tel], textarea {

            width : 100% !important;

        }

    }

     

    The codes are used to keep the width of the input boxes in the date field the same in mobile devices. Then make the other input fields such as the textbox to use 100% in mobile devices.

    Thanks

  • Profile Image

    Answered by e3geo on September 07, 2015 at 07:42 PM

    Thank you, Welvin, for both your making this work and for showing me how to do this!!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2015 at 10:33 PM

    @e3geo

    You're welcome. Should you have any other questions or concerns, feel free to open a new thread.

    Cheers! ;)