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

    Form not displaying right on iPhone

    Asked by briankadar on March 21, 2014 at 06:04 AM

    If you look at it on an iphone the form is too long. Every other browser works fine. How do I fix this? I made the site with Everweb.

    Page URL:
    http://www.loveiscinema.com/contact.html

    site
  • Profile Image
    JotForm Support

    Answered by jonathan on March 21, 2014 at 09:27 AM

    Hi,

    I checked the form on your website and noticed that you were using the form's source code embed. 

    Can you please provide us more details why you need to use the source code? You can just embed the form using its default script embed or an iframe code.

    On certain conditions, you will need to make the form more mobile responsive by injecting CSS codes.

    You may refer to this thread for more helpful info.

    We will wait for your response.

    Thanks.

  • Profile Image

    Answered by briankadar on March 22, 2014 at 02:41 AM

    I have got to be missing something big here. I gave up trying, I don't even know what you meant in your response by using the forms source code embed. All I know how to do is design the form, and click the embed button, and insert that into an iframe and before it just worked. Now it's going all haywire. So I made a new form, tried inserting it, and the form shows up outside of the iframe! Look at the picture I attached. The iframe is selected and the form isn't even in it. What am I doing wrong?

  • Profile Image

    Answered by briankadar on March 22, 2014 at 02:45 AM

    I did notice that even though it looks all messed up in my web program called everweb by rage, it does publish correctly and looks right in Safari. But on my iPhone 5 it's still stretched. Please talk to me like I have never done this before. I don't know how to do the custom CSS you mentioned, you're speaking spanish to me, sorry. I appreciate the help but can you make it veryyyyy basic for me?

  • Profile Image
    JotForm Support

    Answered by Welvin on March 22, 2014 at 03:17 PM

    Please check this guide: Which Form Embed Code Should I Use?. This guide contains JotForm’s different Embed options such as the Source Codes method (How to Get Form Source Codes) which is mentioned by colleague Jonathan.

    Unfortunately, the image doesn't seem to be loading here so please kindly upload it using this method: How to upload and add screenshots to support forum?

     

    Anyway, the first step of fixing the issue is to re-embed your form using our iFrame Method: Getting the Form iFrame Code. After doing the changes, check the form using the same mobile device and update us here if it still not making difference.

    Thanks

  • Profile Image

    Answered by briankadar on March 22, 2014 at 03:36 PM
    That's strange, I'm looking at this thread on my iphone and the screenshot is showing up. And I do use the I frame method and that's what happens.
  • Profile Image

    Answered by briankadar on March 22, 2014 at 04:49 PM

    Here's another example on my phone

  • Profile Image
    JotForm Support

    Answered by jonathan on March 22, 2014 at 09:51 PM

    Hi,

    I was able to see your provided screenshot on your latest message.

    But then again, I checked the form on your website http://www.loveiscinema.com/contact.html and could see that the form was embedded using its source code. Refer to the attached image below

     

    As previous suggested by our colleague Welvin, you should try re-embedding the form using its iframe code instead. Use this guide (-Getting-the-Form-iFrame-Code)

    Make sure to clear first the old embedded code before re-embedding using the iframe code.

    Hope this help. Please continue updating us if the issue persist.

    Thanks.

  • Profile Image

    Answered by briankadar on March 22, 2014 at 11:24 PM

    you are right. I updated it, still stretches it on the iphone. :/

  • Profile Image

    Answered by briankadar on March 23, 2014 at 01:38 AM

    problem still exists after using iframe code

  • Profile Image
    JotForm Support

    Answered by liyam on March 23, 2014 at 06:17 AM

    Hello,

    What I noticed on the form is that the label goes top aligned when using a mobile device which is why it does fit in to the box of your background.  You will need to inject this CSS code in your form.

    @media only screen and (max-device-width: 550px){
         .form-label-left{
              float:left;
              display:inline !important
         }

    Please do check this user guide if you need to know how to inject CSS codes in your form.

    Thanks.

  • Profile Image

    Answered by briankadar on March 23, 2014 at 06:24 AM

    That did it! Thank you so much!! By the way, if I want to make the form shorter, how would I do that? The submit button is still kind of low and I was wondering is there a way to make the whole form not so long?

  • Profile Image
    JotForm Support

    Answered by liyam on March 23, 2014 at 07:02 AM

    That's good to know!

    You can add this CSS code (just be careful not to delete the existing one):

    .form-line {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    Feel free to adjust as well the number of pixels if you think it still has too much space between fields. The original number there for padding-top and padding-bottom are 10px.

    Feel free to let us know if you have more questions :)

    Thanks. 

  • Profile Image

    Answered by Lisa  on April 05, 2016 at 08:20 PM

    I have tried the above code injection and on iphone it is still aligning the title above instead of to the left. I have put in a frame as suggested, but it's still aligning the title above.

  • Profile Image

    Answered by Lisa  on April 05, 2016 at 08:29 PM

    I have tried the above code injection and on iphone it is still aligning the title above instead of to the left. I have put in a frame as suggested, but it's still aligning the title above.
  • Profile Image
    JotForm Support

    Answered by liyam on April 05, 2016 at 10:45 PM

    Hello Lisa, I have moved your question on a new thread. We'll answer your question there.

    Thanks.