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

    Issues with viewing form on iPad/iPhone

    Asked by optizign13 on January 29, 2014 at 01:58 PM

    On my iPad/iPhone (my Android looks fine), the the form is resizing the page so it looks zoomed out. When I took out the iFrame code of the form, the page's looks normal again (isn't zommed out).  I added a meta tag viewport so pages would look normal when viewing it on other devices. I added a table in hopes to "contain" the form but it doesn't work.

    Can you fix this ASAP please? 

    I am sending a screen shot.

    Page URL:
    http://optimized360.net/roshedental.com/promotions

    Screenshot
    ipad iframe code meta Android
  • Profile Image
    JotForm Support

    Answered by TitusN on January 29, 2014 at 03:16 PM

    Hello,

    Thank you for contacting us.

    Inside your mobile viewport - possibly any screen lower than 360px wide (or your smallest viewport style), enter the following rules:

    #input_6 {
    margin-top: 0px;
    margin-left: 0px;
    }

    #id_9 {
    top: 0px;
    margin-left: 0px;
    }

    #id_2 {
    top: 0px;
    margin-left: 0px;
    }

    Remember to fox the Iframe inline style rules as adviced on this thread.

    Please let us know if this helps.

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 04:36 PM

    Hello,

    I am not sure I understand what you mean. 

    This is the viewport I add to the header of my website: <meta name="viewport" content="width=1000">

    I added this CSS above to my style.css and nothing happens. 

     

    Does "Fox the iFrame" mean to add it inline? So should I add this inline and it doesn't works.

  • Profile Image
    JotForm Support

    Answered by TitusN on January 29, 2014 at 05:04 PM

    My apologies,

    I meant to fix the Iframe, which I noticed you did on the linked support thread.      

    I should have also clarified that you need to inject the CSS code into the form for it to apply. 

    As an Iframe, your CSS text file for your site would not apply the rules to the form.

    Please inject the following CSS codes to this end:  

    @media screen and (max-width: 400px) {

    #input_6 {
    margin-top: 0px;
    margin-left: 0px;
    }

    #id_9 {
    top: 0px;
    margin-left: 0px;
    }

    #id_2 {
    top: 0px;
    margin-left: 0px;
    }
    }

    To test it, reduce the size of your browser window to below 400px, and see if the elements align. 

    Let us know.   

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 05:24 PM

    Hi. Is there a reason why theres only a max-width and no min-width? 

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 05:30 PM

    Hello. I have injected it to the jorm's CSS and no luck.

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 29, 2014 at 06:59 PM

    @optizign13 

    The form is embedded as iframe so I think it should not affect your page. Can you please embed the form using the following code?

    <div style="width:100%;">

    <iframe id="JotFormIFrame" allowtransparency="true" src="https://secure.jotformpro.com/form/40276339488970" frameborder="0" style="width:100%; height:280px; border:none;" scrolling="no"></iframe>

    <div>

    I'm not quite sure if this helps but it's worth a try.

    Let us know if this doesn't help so we can check this in depth.

    Regards!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 29, 2014 at 07:08 PM

    I think the problem isn't on the form, try to removed the form and enter any content. The problem might still be there. If the above solution doesn't work, try this. Simply inject this CSS on your WP style.css stylesheet.

    body.full-width #content{

    width:95% !important;

    }

    Check if this helps. Thanks!

  • Profile Image

    Answered by optizign13 on January 30, 2014 at 01:02 PM

    Hello. I have added the <div> </div> code into my content area, as well as added the CSS into my style sheet and no luck. 

    For sure the form is the issue. When I remove the form, the page views correctly because I added a meta tag viewport that will allow it to view correctly. 

    When I define the form width to a small number like "100px" the page views correctly on the iPad/iPhone but the form is cut off on all browsers/devices, of course. When I resize it to the 770px (actual size of form), on browser looks fine but only on the iPad and iPhone, it is zoomed out. 

    When I resize my browser to make it smaller, the form does adjust. However, this rule doesn't apply to iPad/iPhone. 

    Please help! 

  • Profile Image
    JotForm Support

    Answered by TitusN on January 30, 2014 at 02:37 PM

    Hello,

    The form has some CSS that would prevent a responsive view, even in a syled viewport.

    I removed the following rules from your form (live editing with Chrome Dev Tools):

    #input_6 {
    margin-top: -250px;
    margin-left: 280px;
    }

    #id_2 {
    top: -250px;
    margin-left: 550px;
    }

    #id_9 {
    top: -250px;
    margin-left: 550px;
    }

    and the preview is shown below:

    The look above can be adopted to respond to virtually all screens. But I am not sure whether you like this look.

    I'm mentioning all this because with the rules above, the form will never be responsive to screen sizes. It will always spill over.

    You have two options:

    1. Make the Iframe scrollable

    2. Adopt a responsive width for the form, because if the elements are arranged horizontally, small screen devices will not be able to view it. The responsive width begins with removing those margin rules.

    Would you like us to approach a solution in this light?

  • Profile Image

    Answered by optizign13 on January 30, 2014 at 03:47 PM

    Hello.

    I want the form to look like the way I created it (3 colums instead of one), so, no, I don't want to remove the defined CSS for the inputs. 

    When you say, .."the form will never be responsive to screen sizes. It will always spill over," this arguement is not valid because as I mentioned before, on my Android phone, it looks perfectly fine. I am sending a screen shot. It is soley on iPad/iPhone that is having the issue. 

    With regards to your options:

    1) Scrollable in what aspect? I want it 3 colums so the form is already short so there won't need to be a scroll option.

    2) I don't want to remove my injected CSS. 

    What other options do I have? 

  • Profile Image

    Answered by optizign13 on January 30, 2014 at 03:52 PM

    Here is the link on my Android phone: https://www.dropbox.com/s/0zz7m4x0z66ymyz/Screenshot_2014-01-30-12-44-09.png

  • Profile Image
    JotForm Support

    Answered by TitusN on January 30, 2014 at 04:25 PM

    My apologies.

    The presumption was made on a difference in perspectives.

    Here's what I see on my HTC1 Android:

    I guess different mobile browsers yield different results....

    I will consult with my colleagues, and respond on this thread.

  • Profile Image

    Answered by optizign13 on January 31, 2014 at 11:59 AM

    Hello. Any luck? I need this fix ASAP please! 

  • Profile Image
    JotForm Support

    Answered by TitusN on January 31, 2014 at 02:00 PM

    Please pardon the delay.

    We are still deliberating on various options for your form - the issue being compounded by various outputs across different mobile devices - as well as the fact that it is hosted on a wordpress site.

    While we consider possible solutions, please try embedding the form using the Wordpress Plugin

    Thank you for your patience.

  • Profile Image

    Answered by optizign13 on February 03, 2014 at 12:50 PM

    Hello. Please F/U with me. Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 03, 2014 at 02:08 PM

    @optizign13

    We are truly sorry for the latency. We are about to grab your website source code and test it locally but as of this writing, the page is showing 404 page not found error. Can you check and provide the correct URL again?

    Thank you in advance.

  • Profile Image

    Answered by optizign13 on February 03, 2014 at 03:00 PM

    Hello. Sorry about that! I moved the website recently. Here is the new url: http://roshedental.com/promotions/

  • Profile Image
    JotForm Support

    Answered by Welvin on February 03, 2014 at 03:52 PM

    Thanks for providing the correct web. We'll check this and get back to your for the solution. Thanks for your patience.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 03, 2014 at 04:18 PM

    Please follow this steps to fix it:

    1. Remove the div tag codes given by my colleague EltonCris, <div style="width:100%;"> <div>

    2. Change your form width from 100% to 770px

    The issue should be fixed after this changes. Example Page: https://shots.jotform.com/welvin/pages/optizign13.html. This contains your actual form and the changes made above.

    Thanks

  • Profile Image

    Answered by optizign13 on February 04, 2014 at 05:26 PM

    Hi. IT WORKS! I should of thought about defining the width within the iFrame script. I am very grateful. Thank you so much.