Problems submitting forms using mobile phones

  • Profile Image
    guest_30001814157037
    Asked on January 01, 2013 at 04:24 AM

    Feedback from submitters of my forms taught me that:

    * Certain mobile phone users cannot open the sections which can be folded and unfolded in a form. This issue can be "solved" temporarily by avoiding these sections. Because this is a very useful feature, I think Jotform should really look into this.

    * Certain mobile phone users cannot submit the form because the 'submit' button doesn't appear. Apparently the entire form is visible except the button at the bottom of the form. This is an urgent matter.

    I'm not sure that the problem is limited to iPad and/or iPod users, but these I hear more often. It looks as if Android users don't face this problem.

  • Profile Image
    NeilVicente
    Answered on January 01, 2013 at 08:06 AM

    Alex,

    Which particular forms are you having these issues with? Are they embedded on webpages, or are you using them as standalone (ie, http://www.jotform.com/form/xxxxxx)?

    If embedded, please give us the URL of the page where they have been placed. I'll look forward to your response.

    Thanks!

  • Profile Image
    alexklhiking
    Answered on January 02, 2013 at 04:45 AM

    NeilVicente,

    I'm not using the fold/unfold feature any longer because it wasn't visible on mobile phones. So I can't show you such form. Someone from Jotform wrote me that this was a Java issue, which could be the case, but I am convinced that it in fact it is a Jotform issue as Jotform should be using the technology which allows all users, no matter what device they use, to fill in forms. I hope you do agree on that... :)

    I use your forms as standalone and embedded. The standalone is less used and I don't know whether there's an issue with those iPad users.

    An example of the standalone form can be found at http://sn.im/s.p.industries(this is an active link until coming Saturday)

    An example of the embedded forms can be found at http://www.klhiking.com/participation3.htm (this is also an active link until coming Saturday)

    Hope this will help...

    Alex

  • Profile Image
    EduardoMendez
    Answered on January 02, 2013 at 08:55 AM

    Hi there, 

    I have tested your stand alone form on an Ipad simulator and was not able to spot any issues with the display of the form.  Here is a short video of what it looks like on an Ipad:

    http://screencast.com/t/zbn4YV4X

    As per the embedded form, I was also able to view it without any problems. Here is a short video of the embedded form:

    http://screencast.com/t/EQYMvbWfc

    Can you please further explain the issues you are having?

    We'll be glad to look into it for you!

  • Profile Image
    alexklhiking
    Answered on January 09, 2013 at 02:29 AM

    Hi Eduardo,

    The problem persists...

    I just published a form on the following web page

    http://www.klhiking.com/participation2.htm

    and received already two reactions of not being able to submit

    1-Razipah Ibrahim

    Alex , sorry I couldn't fill up the participation form via my iphone..... Tq

    2-Tan Min Jia

    Hi Alex, I have filled up the form but there is no submit button. I guess the page loading problem through the meet up app (phone). Alex, mine Iphone too.

    From previous forms I got similar reactions - here a few. Interesting is reaction 3 as he found a way to submit the form anyway.

    1 -Kumar Hi Alex, same issues as well, no signs of SUBMIT button from IPAD- Hi Alex, am also experiencing the same issues as Chin lip Kee had. Not been able to scroll down further to the SUBMIT button.

    2-Jag Lau

    Hey Alex, the same happened, dont see a submission button.

    3- crashdude

    Hi Team, just sharing, the submit button does not appear on my screen as well.

    My walk around was : After key in the validation password/keyword, just hit Enter on your keyboard. Works for me. :)

  • Profile Image
    idarktech
    Answered on January 09, 2013 at 04:33 AM

    @alexklhiking

    Re-embedding your form using iframe embed code should help fixed it. Here's How to get your Form's Iframe Code.

    After getting your iframe code, change "no" to "yes" on the scrolling attribute found on your form's iframe code. Example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/30082136012942" frameborder="0" style="width:100%; height:1990px; border:none;" scrolling="yes"></iframe>

    Please let us know how it goes. Thanks!

  • Profile Image
    alexklhiking
    Answered on January 15, 2013 at 09:02 PM

    Sorry, I can't vchange the iframe code as per your instructions.

    The iframe code can only be highlighted (blue colour) when clicked on, but no changes can be made. It can't be deleted either so a copy/paste won't work.

  • Profile Image
    Welvin
    Answered on January 16, 2013 at 03:30 AM

    Hi,

    You should be able to copy the iframe codes. Please try to do everything on your computer. Or, please try injecting this codes to your form:

    .form-all {

    height: 1987px !important;

    }

     

    I hope this helps. Thanks

  • Profile Image
    guest_30147554961052
    Answered on January 16, 2013 at 04:02 AM

    As soon as I click on the text in the iframe box the entire block is highlighted in blue. No alterations can be made (no delete, no change, no addition)

    Where do you want me to "inject" those codes? You say in the form, but where exactly?

    Cheers,

    Alex

  • Profile Image
    Welvin
    Answered on January 16, 2013 at 04:04 AM

    You will need to copy the codes using right click on your mouse and copy or using your keyboard CTRL + C button then paste it on your webpage.

    I am sorry, here's the guide to inject custom CSS codes to your form: How to Inject Custom CSS Codes

     

    Thanks

  • Profile Image
    idarktech
    Answered on January 16, 2013 at 05:10 AM

    @Alex

    Just some clarifications. You have to copy that code Ctrl + C  like what my colleague have mentioned, and paste it to notepad or any text editing tools you have so you can do some alterations. You can't do it directly on the code box as seen on the Embed Code Wizard since we do not allow it.

    Thanks!

  • Profile Image
    rcellars
    Answered on January 22, 2013 at 12:40 AM

    I had the same problem (no submit button showing) when embedding an iframe into my coldfusion-based mobile site and trying to view it from my iphone5.

    *Changing the scrolling option to "yes" did not fix the problem
    *Injecting the above suggested CSS caused the screen to lengthen (vertically) a great deal, but still didn't show the submit button.
    *After injecting the CSS, I refreshed the page on my native iPhone5 safari browser, then rotated my phone to render the site in landscape ("widescreen") mode, which finally showed the "Submit" button.

    Although the fix has basically already been suggested ("reduce width/size of form") - the concept isn't quite as intuitive in application.

    This issue was driving me nuts, but I finally got it working...

    Solution: Reduce the width of the form, as well as all the all fields/objects within the form.

    EDIT: your form should be properly resized to mobile specifications for aesthetic reasons (a professionally "clean" display) - however, you might find that the following is a "quick fix" ...

    >>Adjust "button align" on your submit button from the default (centered) to "left"

    Reason: The submit button is aligned (centered) to a midpoint which is relative to the size of the largest object in the form. So if you reduce the size of the form enough, as well as the size of all the objects in the form, then the submit button will center to those dimensions - if you've set those dimensions appropriately, it will then render properly to fit your iOS device display.

    I'm sure the dimensions depend on the specifics of your mobile site, or any other display controls. Here's how I got mine to work:

    1) Clone your form to create a "mobile" version for embedding into your mobile site

    2) Reduce width of clone form ("mobile form") - I arbitrarily opted for 250px

    3) Adjust *ALL* fields (by drag-and-resize for images, and by manually adjusting the "SizeSet number of characters users can enter"
    ----I chose 23 for input fields such as email address

    4) Once done, all fields should vizually fit within the dotted lines of the form in your WYSIWYG JotForm editor

    5) Ensure that ALL fields are in "shrink" mode (where labels are "word wrapped" to condense, and not scrolling outwards horizontally)

    If you follow the above steps, all fields should be contained within your "resized" proportions (in this example, 250px), and the "submit" button should finally be visible as expected.

    Note to developers: Confusing issue with the "shrink/expand" feature (specifically on a textbox with a long label)...: clicking "shrink" on the properties in-from drop-down menu causes the label to expand (remove "word wrap" and stretch the text horizontally) - which in turn changes the option in the list to "expand" ... clicking "expand" then causes the label to condense (word wrap) back into a "shrunken" size...bug, or oversight?

  • Profile Image
    idarktech
    Answered on January 22, 2013 at 04:40 AM

    Hi,

    Thanks for sharing your solution. We'll definitely take note of this.

    By the way, we have already released a new feature that allows media queries "@media" on CSS Injection feature so it is now possible to adjust your form width and styles depending on mobile device type. Here are some examples: Media Queries for Standard Devices | CSS-Tricks.

    Thanks!