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

    Alter my jotform responsive style for mobile devices

    Asked by woolalaa on October 07, 2014 at 02:55 PM

    Hi, how can I make my form optimised for different window size? I am trying to make the fields and buttons vertically aligned regardless of the window size when shrink.

    Page URL:
    http://form.jotform.me/form/42791037419458?

    Screenshot
    size alignment shrink different CSS mobile CSS alter layout
  • Profile Image
    JotForm Support

    Answered by Kiran on October 07, 2014 at 07:07 PM

    I'm working on it. Please allow me some time to work on this and get back to you with relevant information.

    Thank you for your patience.

  • Profile Image

    Answered by woolalaa on October 08, 2014 at 02:40 AM

    thanks Kiran 

  • Profile Image

    Answered by woolalaa on October 08, 2014 at 12:31 PM

    Hi, any solution to this?

  • Profile Image
    JotForm Support

    Answered by Kiran on October 08, 2014 at 01:27 PM

    Sorry for the delay in responding back.

    Here is the demo form http://form.jotformpro.com/form/42797387402969?. Please see if it works for you. You can clone this form to your account and make necessary changes as you need.

    Please let us know if we cab be of any further help. Thank you.

     

  • Profile Image

    Answered by angela on October 08, 2014 at 03:48 PM

    great! thanks.

    Now my button error message is missing. How do I get it to appear?

    I added

    .form-button-error {

    display: inline !important;

    position: relative;

    top: 80px;

    right: 330px;

    }

  • Profile Image

    Answered by woolalaa on October 08, 2014 at 04:02 PM

    Also, how can I make the red heading center? It seems that now some headings are centered while some are aligned right.

     Another issue is that I set the condition for the dropdown such that when it is empty, no fields will be shown. However, it didn't appear in the form as I wanted. Could you check where is the mistake I made in setting the condition?

     

    Thank you

  • Profile Image
    JotForm Support

    Answered by Kiran on October 08, 2014 at 06:09 PM

    Let me check on this and get back to you.

    Since we keep one issue per thread, I have moved the other question on the conditions to a new thread. It shall be addressed here http://www.jotform.com/answers/440534.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Kiran on October 09, 2014 at 09:14 AM

    I have made necessary changes to the form 

    http://form.jotformpro.com/form/42797387402969

    Please check now and let us know if you need further assistance.

    Thank you for using JotForm.

  • Profile Image

    Answered by woolalaa on October 09, 2014 at 11:42 AM

    Thanks Kiran, but the problem of the width size changing still remains when I reduced the width of my browser. Same problem when I view it on mobile. 

    http://form.jotform.me/form/42815639855467

  • Profile Image

    Answered by Ben on October 09, 2014 at 01:34 PM

    Hi,

    I can not find your jotform so I have cloned the jotform created by my colleague Kiran above.

    I see that the issue happens only after certain size is met, then another style once it gets even less in widgth, but this CSS will fix that - see here how to use it.

    @media screen and (max-width:640px)
    {
        button.form-pagebreak-back, button.form-pagebreak-next
        {
            width: 100% !important;
        }
        div.form-pagebreak-back-container, div.form-pagebreak-next-container
        {
            width: 100% !important;
        }
    }

    @media screen and (max-width:640px)
    {
        div.form-pagebreak-back-container, div.form-pagebreak-next-container
        {
            width: 95% !important;
        }
        .form-input-wide > input.form-textbox
        {
            width: 95% !important;
        }
    }

    You can see my jotform here http://form.jotformpro.com/form/42815845493969

    And you can clone it to your account following these steps: How to Clone an Existing Form from a URL

    Do let us know if this works as you wanted it.

    Best Regards,
    Ben

  • Profile Image

    Answered by woolalaa on October 10, 2014 at 12:51 AM

    Hi Ben,

    It works except for the last part of my form after the dropdown selection and the form submit button.

    I edited your css codes by adding in the highlighted parts but I think I have made a mistake as it doesn't seem to work. Could you let me know the right code to use?

    @media screen and (max-width:640px)

    {

    button.form-pagebreak-back, button.form-pagebreak-next, button.form-submit

    {

    width: 100% !important;

    }

    div.form-pagebreak-back-container, div.form-pagebreak-next-container, div.form-submit-container

    {

    width: 100% !important;

    }

    }@media screen and (max-width:640px)

    {

    div.form-pagebreak-back-container, div.form-pagebreak-next-container, div.form-submit-container

    {

    width: 95% !important;

    }

    .form-input-wide > input.form-textbox

    {

    width: 95% !important;

    }

    }

     

    The form is here

  • Profile Image
    JotForm Support

    Answered by Welvin on October 10, 2014 at 08:31 AM

    I noticed that you have added the mobile responsive widget to your form, and of the same time, you have enabled Responsive Form option from the form settings.

    Having all of these to your form is not adviseable because that would create a conflict to the CSS codes.

    If you want to inject a custom CSS codes, try to removed the mobile responsive widget and disable responsive form option.

    Thank you!