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

    Next button on my form is not responsive

    Asked by avijfr on May 08, 2017 at 03:04 PM

    Hi Support Team,

    My question is in regards the responsiveness of a button on my form.

    On mobile the button isn't responsive on my iphone 6: http://imgur.com/NH7KJks

    On my desktop it's fine: http://imgur.com/pLAlE7z

     

    Thanks

    Page URL:
    https://www.justfundraising.com/startnow/cookiedough/

  • Profile Image
    JotForm Support

    Answered by Kiran on May 08, 2017 at 04:25 PM

    I have checked your JotForm and see that the width of the next button is set to 300px in the custom CSS code. Please change this to 270px and add the following CSS code to the form to display the button correctly on the mobile device and desktop as well.

    @media screen and (min-width: 10px) and (max-width: 540px){

    .form-all .form-pagebreak-next-container {

       margin-left: 4% !important;

    }

    }

    Hope this information helps! 

     

  • Profile Image

    Answered by avijfr on May 09, 2017 at 09:12 AM

    Hi Kiran,

    I implemented that code but now the following has happened when I'm on desktop:

     

    The button has gotten smaller: http://imgur.com/R9DFQkI

  • Profile Image
    JotForm Developer

    Answered by Helen on May 09, 2017 at 10:56 AM

    Hello,

    Thank you for contacting us.

    Please change your button from 270px to 300px again. Your CSS codes must be like this:

    #form-pagebreak-next_21 {

        background : #00d689 !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : 0px;

        width : 300px;

        height : 60px;

        font-size : 20px !important;

        text-shadow : 0 0px #000 !important;

    }

    Then add this custom CSS code to code that my colleague sent you before. Here is a this custom CSS code:

    @media screen and (min-width: 10px) and (max-width: 540x){

     

    .form-all .form-pagebreak-next-container {

          margin-left: 4% !important;

    }

    #form-pagebreak-next_21 {

      width: 270px;

      }

    }

     It will solve your issue, your form will shown properly on mobile.

    Please try this solution, if the issue still persists, please let us know.

    We will be waiting for your response.

  • Profile Image

    Answered by avijfr on May 09, 2017 at 11:13 AM

    Hi Helen,

    My button on mobile is fine now, but on desktop it no longer spans across the whole form. It is cut short. 

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 09, 2017 at 12:42 PM

    Please inject this code to solve the issue: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #form-pagebreak-next_21 {

        width: 390px;

    }

    Result:

    Let us know if you need more help.

  • Profile Image

    Answered by avijfr on May 09, 2017 at 12:51 PM

    That makes it worse, and messes up the mobile responsiveness

  • Profile Image
    JotForm Support

    Answered by Kiran on May 09, 2017 at 02:18 PM

    I have checked your web page and it seems that you have changed the form. Could you provide us with the form URL that you are working on so that we can check it further.

    We will wait for your response. Thank you!