Form not displaying right on iPhone

  • briankadar
    Asked on March 21, 2014 at 6: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.

  • jonathan
    Replied on March 21, 2014 at 9: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.

  • briankadar
    Replied on March 22, 2014 at 2: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?

    Form not displaying right on iPhone Image 1 Screenshot 20

  • briankadar
    Replied on March 22, 2014 at 2: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?

  • Welvin Support Team Lead
    Replied on March 22, 2014 at 3: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

  • briankadar
    Replied on March 22, 2014 at 3: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.
  • briankadar
    Replied on March 22, 2014 at 4:49 PM

    Here's another example on my phone

    Form not displaying right on iPhone Image 1 Screenshot 20

  • jonathan
    Replied on March 22, 2014 at 9: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

    Form not displaying right on iPhone Image 1 Screenshot 20

     

    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.

  • briankadar
    Replied on March 22, 2014 at 11:24 PM

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

  • briankadar
    Replied on March 23, 2014 at 1:38 AM

    problem still exists after using iframe code

  • liyam
    Replied on March 23, 2014 at 6: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.

  • briankadar
    Replied on March 23, 2014 at 6: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?

  • liyam
    Replied on March 23, 2014 at 7: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. 

  • Lisa
    Replied on April 5, 2016 at 8: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.

  • Lisa
    Replied on April 5, 2016 at 8: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.
  • liyam
    Replied on April 5, 2016 at 10:45 PM

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

    Thanks.