Form not displaying properly on mobile devices

  • Profile Image
    mcolon02
    Asked on June 08, 2012 at 10:43 PM

    I am using form collapse to separate 3 payment options.  I have the width set properly, but the form collapse boxes seem to display so wide that the "open" button" does not show up on the screen on Blackberries.  Problem is that this way, the user won't know to open the box.   All other sections display the correct size. 

     

    Also, I have given the form a proper name.  But when it loads, it starts by showing the name "form" then "preferences" (Which is one of the fields) instead of the form title.

    Form url is https://secure.jotformpro.com/form/21595078390965

    Any ideas as to what's wrong?

    Thanks.

  • Profile Image
    idarktech
    Answered on June 08, 2012 at 11:56 PM

    Hi,

    Please try if this helps:

    1. Inject the following css codes to your form:

     

    .form-collapse-table{

    width: 173px;

    max-width: 173px;

    }

    Follow this guide: How to Inject Custom CSS Codes to your Form.

    2. It might also help if you can hide the third collapse bar, here's how:

    a. Click the third collapse field, click on Visibility button on the toolbar then set it to 'Hidden'

    b. Check this screen:

    --

    With regards to the title of your form, it changes to 'Preferences' because of the header field on your form named 'Preferences'. If you'd like to change it to something else, then add another header field on the top of your form fields and apply a name, that would serve as your form title. Here's an example: http://form.jotform.me/form/21598749939477?. If you don't like the header title above, we can hide it with css, just let me know.

    Thank you!

  • Profile Image
    mcolon02
    Answered on June 09, 2012 at 08:24 AM

    Hi Idartech,

    I noticed the "submit" button under the invisible form collapse had a big gap (probably fromt he invisible form collapse.)  So I figures since this is the last step, why  not add a "submit" button on each of the form collapse areas.  The first one shows up great.   But the subnmit button unbder credit card shows over the city field on Blackberry and the rest of the form (tel. # and security code) are not displayed.  Thoughts?

  • Profile Image
    gori-mathew
    Answered on June 09, 2012 at 08:32 AM

    Hi,

    This problem may be caused by the browser not being able to properly identify the height to use for your form. Try using iframe codes instead.

    To get your form's iframe codes:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click iFrame



    4.  Copy the codes provided in the succeeding screen

     Also, when changes are made to your form and you feel that it has become longer, re-embed your form using the iframe codes.

    Hope this solution was of any help. Thank you for using Jotform.

  • Profile Image
    idarktech
    Answered on June 09, 2012 at 08:40 AM

    @mcolon02,

    This may be because of the shrunken fields. Can you try this, check if this fixes the problem:

    1. Right click on the "City" field and then click "Move to a new line"

    2. Just do the same with "Tel. #" field.

    As you've observe it doesn't do anything at all but it makes the two fields as 'display:block'

    Let me know if this doesn't help. Thanks!

  • Profile Image
    mcolon02
    Answered on June 09, 2012 at 11:17 AM

    Thanks.  This worked for the issue with the submit button.  The only thing still outstanding now is that the little triangle icon on the from collapse buttons (where you click t o open the box) does not display on Blackberry...

  • Profile Image
    abajan
    Answered on June 09, 2012 at 02:24 PM

    I have answered this in the other thread on this issue.