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 all contents

    Asked by maxiimus on June 08, 2012 at 08:15 PM

    I have the form working but when I view the form on my iphone, all fields show except for SUBMIT and CLEAR button at the bottom.  Besides, the fields are wrapped and not in line with the field text.

    Besides viewing on my iphone, the form works great on desktop or ipad.  I have checked all codes and height of my webpage and they all look and add up fine.  I did modify my iFrame code to match the height but the bottom 2 buttons are cut off when viewing on iphone

     

    http://www.maxiimus.com

    Username:  guest

    Password:  12345!

    Page URL:
    http://www.maxiimus.com

  • Profile Image
    JotForm Support

    Answered by jonathan on June 08, 2012 at 09:55 PM

    Hi,

    For initial test only, can you please try setting the "scrolling" to "yes" in the iframe code.

    <iframe allowtransparency="true" src="//form.jotform.us/form/21547473687162" frameborder="0" style="width:604px; height:1010px; border:none;" scrolling="yes">

    </iframe>

    Please try if this is OK with you already if it work.

    Will await for your update. Thanks.

  • Profile Image

    Answered by maxiimus on June 08, 2012 at 10:48 PM

    It didn't make any difference with turning on the scrolling

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2012 at 12:03 AM

    Hi,

    It seems that the cut-off view on iphone is being cause by a conflict in a CSS class located at maxiimus.com. I tried duplicating your page with the form, and when using the maxiimus.com, I get a cut-off view. But when I remove it, I was able to view the whole form. (please see screen below)

    I tested it in iphone 4S simulator:

    You can also test on your iphone this page. Please see if you can view it in full.

    You may want to check on the stylesheet or the script that involves also the login prompt. Maybe you can trace the conflict there.

    Please inform us if you require further assistance. Thanks.

     

  • Profile Image

    Answered by maxiimus on June 09, 2012 at 12:50 AM

    your form views fine and i can see all but honestly I still cannot get my form to work.  I have checked my CSS and I really don't see a problem but I will continue to see if I can detect something

  • Profile Image
    JotForm Support

    Answered by abajan on June 09, 2012 at 02:11 AM

    @maxiimus

    The best way to detect the problem would be to comment out the entire CSS and then add each rule back in, one-by-one until the offending one is found. Alternatively, you could comment out one rule at a time. Unfortunately, both methods are pretty time consuming. Nevertheless, they are guaranteed to solve the problem.

  • Profile Image

    Answered by maxiimus on June 09, 2012 at 01:35 PM

    OK.  I got it to work.  I had to manipulate my DIV's height in CSS of couple colums and it shows up fine now on my iphone

  • Profile Image
    JotForm Support

    Answered by abajan on June 09, 2012 at 02:01 PM

    We're glad to know this.

    Enjoy the rest of your weekend.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2012 at 05:25 PM

    @maxiimus

    Great work! 

    I also share abajan's appreciation for the updated info.

     

  • Profile Image

    Answered by maxiimus on June 09, 2012 at 06:23 PM
    Thanks. My only concern now is, why are input fields below text. Website doesn't shift fields below text. Please help me fix that and I will be very content with the whole thing and all the help.
    Thanks
  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2012 at 09:04 PM

    Possibly a "no wrap" injected CSS in the form itsefl can prevent this.

    This is a normal behaviour since the form and page had to compensate for the mobile/iphone display screen width.

    I will try it also on my test page. I'll update you for the result.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2012 at 11:05 PM

    Hi,

    Unfortunatelly, a simple "no wrap" CSS does not seem to affect the form when viewed in iphone.

    The text labels continued to wrap and auto aligned on top of the input field.

    I will have to check further, than what I anticipated it to be.

    Also it is possible, my colleague who is the master on CSS can come up with the resolutioin before I do. We can wait for that also.

    FYI

    Thanks.

  • Profile Image

    Answered by maxiimus on June 10, 2012 at 12:24 AM
    Yes. That will be much appreciated. I will wait for a solution.
    Thanks
  • Profile Image
    JotForm Support

    Answered by abajan on June 10, 2012 at 06:40 AM

    I doubt that any amount of injected CSS will change that formatting in mobile devices. This is because the selector for the rules governing the display of our forms on mobile devices contains an @ symbol and that symbol cannot be used as part of any injected CSS. If you save injected CSS containing that symbol and then view the CSS again, you'll notice that the @ has been converted to //. This is probably to protect our system from the injection of harmful code.

    Here is the section of the main JotForm stylesheet (Version 3.0.3635) that governs the display of forms on mobile devices. (I've reformatted it for easier to reading.) This article explains the unusual nesting of the rules within a parent rule.

    Anyway, the third rule (lines 8 to 11) needs to be overriden with the declarations defined earlier up in the said stylesheet for the form-label-left class and since the @ symbol can't be used in injected CSS, you'll have to embed the full source of the form into your page's source and add the CSS there. Here's how:

    1. Load the form into the form builder and while on the Setup & Embed tab, click Embed Form > Source

    2. When the next panel is displayed, copy the source to your clipboard

    3. Go into your page's source and replace the form's iFrame with what you copied to the clipboard

    4. Near the top of the form's source, you'll see its embedded styles. Immediately after the last rule, add the following code and save the change:

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

    That should do the trick. If you need clarification on anything, please let us know.

  • Profile Image

    Answered by maxiimus on June 10, 2012 at 09:19 AM
    When you mention to copy the source in #2, do you mean to select the full dreamweaver code?
  • Profile Image
    JotForm Support

    Answered by abajan on June 10, 2012 at 10:18 AM

    I meant that you should copy the source code provided by the JotForm Embed Form Wizard after you click the Source button found therein. But if the Dreamweaver method is more suitable for your purposes, click the Dreamweaver button instead and follow the eight steps provided by the wizard:


    I'm not really that familiar with Dreamweaver but I think the CSS code I provided should be inserted after Step 5 and before Step 6.

    For information on the various embed options at your disposal, please see Which Form Embed Code Should I Use in the Share Forms section of our user guide.

  • Profile Image
    JotForm Support

    Answered by abajan on June 10, 2012 at 10:33 AM

    Here's the demo form I used to test my solution. You'll notice that it's displayed the same in an iPhone as it is regular browsers. If you view the page's source, you'll see the extra code inserted from Lines 55 to 60, after the last rule in the embedded CSS.

  • Profile Image

    Answered by maxiimus on June 10, 2012 at 10:20 PM

    Yes it works, except now everything is either left justified or centered.  Fields are not properly aligned

  • Profile Image

    Answered by maxiimus on June 11, 2012 at 01:38 PM

    Here is what we see from my iPhone.  As you can see in the image, the fields have shifted center or left justified instead of all being properly aligned to the left and the whole form centered on the page 

     

    Contact Form

  • Profile Image
    JotForm Support

    Answered by jonathan on June 11, 2012 at 07:10 PM

    Hi,

    I cannot see the screen capture you provided on your reply.

    Please try to follow this guide (-How-to-insert-embed-a-screen-shot-a-k-a-screen-dump-into-a-post) on how to include images on your posts.

    I actually tested Abajan's demo form on the iphone 4S, and the view seems to be proper and as intended. Here is the screen

    Please update us and provide us more info if the issue persist.

    Thanks.

  • Profile Image

    Answered by maxiimus on June 11, 2012 at 07:24 PM

    Thanks.  Basically the screen capture was nothing more than the "contact us" form on my site.  What is seen on the site is how it is on my iphone

     

    Hence please go to http://www.maxiimus.com

    username:  guest

    password:  12345!

    Then go to SUPPORT and CONTACT US and you will see what I mean as far as the fields aligning.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 11, 2012 at 07:39 PM

    There must be a latency on my end... I tried maxiimus.com before I replied, I cannot seem to get the Contact page.

    Now I do. And now I can see the difference in you page view as compare to Abajan's.

    Let us check this further...

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on June 11, 2012 at 11:33 PM

    @maxiimus

    There's a conflict between your page's CSS and that of the form. The only workaround I can currently think of to overcome this would be the following:

    1. Cut the form's source from your Contact Us page and paste it into a blank page on your site (that is, a page not linked to any stylesheets)

    2. Wrap the form's source in a div and give that div an ID of myform or whatever you wish

    3. Insert an iFrame in the Contact Us page to call the div containing the form by its ID. For example, if the ID of the div is myform and the URL of the page containing the form is http://www.maxiimus.com/formpage, the iFrame would be coded like this. (If you prefer, a relative URL can be used instead of an absolute one)

    4. Save the changes

    For additional info on iFrames, see the following links:

    iFrame HTML, tips, tricks and code
    HTML iframe src Attribute

  • Profile Image

    Answered by maxiimus on June 12, 2012 at 07:43 AM

    I will definitely try the above option but here is my CSS code for the specific column where this form resides

     background-color: #CFC6A4;
     width: 604px;
     height: 750px;
     margin-bottom: -1px;
     float:left;

    Just curious if commenting out any part or whole of this CSS will resolve the issue? 

  • Profile Image
    JotForm Founder

    Answered by aytekin on January 22, 2013 at 03:24 AM

    Update on this thread: We are now allowing usage of @media inside the Custom CSS Injects.