Not having luck making form conform to mobile

  • kevinponeill
    Asked on April 21, 2014 at 9:54 PM

    Hi JotForm team,

     

    I have a squarespace site that I'm trying to embed a form into, and while it's kind of responding to my iPhone 5's screen resolution, some of the fields are bleeding over to the right side of the page.

     

    Here's my form's URL: http://form.jotform.us/form/40575028465154

     

    I've tried using multiple JotForm-provided suggestions, including adding the code posted in the thread below, and still no luck getting several of the fields to respect the appropriate size/resolution of the screen.

     

    URL for JotForm thread on responsive forms: http://www.jotform.com/answers/240130-How-to-make-the-form-mobile-responsive

     

    I've also tried reverting my form to the default template with no CSS injections, and it still runs over the right edge of the page.

     

    I would really appreciate it if someone could help me get my form to display with equal margins on both left and right sides.

     

    Here's the URL of the page I've embeded the form into: https://k-o-k2br.squarespace.com/get-a-quote/

     

    Any feedback would be super appreciated.

     

    Thank you!

    Jotform Thread 365317 Screenshot
  • kevinponeill
    Replied on April 22, 2014 at 2:03 AM

    Hi. Can anyone help? I'm trying everything I can think of, but nothing seems to work. :-(

  • kimotomaina
    Replied on April 22, 2014 at 2:08 AM

    Hi kevinponeil.

    Sorry for this problem with the form on iphone 5.but did you use the latest responsive custom css for iphone 5 on that same
    http://www.jotform.com/answers/240130-How-to-make-the-form-mobile-responsive      link?

    Thank you.

  • kevinponeill
    Replied on April 22, 2014 at 2:17 AM

    Hi kimotomaina

    Thanks for getting back to me! Yes. I've tried that, but it still looks the same. :-/ I know you're trying to help, but I'm so frustrated at this point. (GRRR)

    The trouble spots seem to be the "Please include any specifics or questions below." text area (which ideally should be reasonably stretched to the right but being squashed to a very narrow text box, and the whole address field, which is completely bleeding over the right side of the screen and throwing off the alignment of the whole page.

    Please view on iPhone 5 if possible.

    Thank you!

  • kimotomaina
    Replied on April 22, 2014 at 3:16 AM

    Haloo Kelvinponeill.

    Some issues come with new technology but be sure something is being done about it.Most people have an issue with iphone 5 responsiveness,so dont be frustrated it has to workout.

    Please try replacing the current media query:

    @media screen and (max-width: 480px)

    with

    @media screen and (max-width: 568px)

    because Iphone 5 has a slightly different screen resolution.

    I will keep on looking at the best way to solve this to make sure it works.
    Thank you.
  • jonathan
    Replied on April 22, 2014 at 5:34 AM

    @kevinponeill

    Hi,

    First, I suggest that you re-embed the form in your website 

    https://k-o-k2br.squarespace.com/get-a-quote//?r=46693602 using the iframe code embed.

    Use this guide -Getting-the-Form-iFrame-Code  

     

    When I check the form on the website, I noted that it was having script conflict with the other existing scripts on the website, so it is not being displayed correctly

    Not having luck making form conform to mobile Image 1 Screenshot 30

     

    --

    As for the mobile responsive CSS code, please try addin this CSS codes to your form

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    I tested this on a form, and in mobile browser it become responsive like this
    Not having luck making form conform to mobile Image 2 Screenshot 41

     

    Please inform us if you need further assistance.

    Thanks!

  • kevinponeill
    Replied on April 22, 2014 at 3:06 PM

    Thanks, but none of the above has solved the issue. I tried adding the responsive code suggested by Jonathan and re-embedding the form as an iFrame, but doing these two things results in the following:

    1) The text area labeled "Please include any specifics or questions below." and the address fields both bleed over the right of the page when viewed on my iPhone 5. This also causes the page to "float" left-right as a user scrolls the page.

    2) The font (and overall form) becomes tiny.

    3) Loss of all button CSS styling when viewed on desktop (looks fine on my iPhone 5...?)

    4) A huge margin between the bottom of the form and the footer of my site.

    The form is currently embedded as an iframe. Here's the code I currently have injected:

    @media only screenand (min-device-width : 320px)and (max-device-width : 480px) {.form-all {width: 320px !important;}.form-line {padding-top: 0px !important;padding-bottom: 0px !important;padding-left: 3px !important;}

    /* Remove Country */

    [id$='country'] {

    display:none;

    }.form-submit-button {

    box-shadow: 0px 0px 0px !important;

    text-shadow: 0px 0px !important;

    -webkit-border-radius: 0 !important;

    -moz-border-radius: 0 !important;

    border-radius: 0px !important;

    font-family: Arial !important;

    color: #000000 !important;

    font-size: 16px !important;

    background: #ffffff !important;

    padding: 10px 20px 10px 20px !important;

    border: solid #000000 2px !important;

    text-decoration: none !important;}.form-submit-button:hover {

    box-shadow: 0px 0px 0px !important;

    text-shadow: 0px 0px !important;

    -webkit-border-radius: 0 !important;

    -moz-border-radius: 0 !important;

    border-radius: 0px !important;

    font-family: Arial !important;

    color: #ffffff !important;

    font-size: 16px !important;

    background: #000000 !important;

    padding: 10px 20px 10px 20px !important;

    border: solid #000000 2px !important;

    text-decoration: none !important;}

  • kevinponeill
    Replied on April 22, 2014 at 3:16 PM

    Also, the form appears to be centered on the page in desktop view? *sigh*

  • Mike_T Jotform Support
    Replied on April 22, 2014 at 5:33 PM

    Please try the following CSS on your form, and let us know what needs to be fixed.

    http://pastebin.com/raw.php?i=fVQcHp6t

    Note that the iFrame code does not come with the auto-height option, so the large empty space between the bottom of the form and the footer of your site is related to used conditional logic on form and iFrame embedding method. You might try a standard Embed code to see if that helps with the empty space issue.

  • kevinponeill
    Replied on April 23, 2014 at 10:19 PM

    Thanks. I tried re-embedding the form using both embed and source methods after injecting the CSS posted in the response just above this reply, but the *original* issue still exists:

    The text area labeled "Please include any specifics or questions below." and the address fields both bleed over the right of the page when viewed on my iPhone 5. This also causes the page to "float" left-right as a user scrolls the page.

    What I need is for the whole form to respond to a device's resolution like the form on the below page:

    https://k-o-k2br.squarespace.com/artists/

    Note the above form was created using the Squarespace form builder.

  • Elton Support Team Lead
    Replied on April 24, 2014 at 1:36 AM

    @kevinponeill 

    Remove all the CSS codes injected to your form and replace it with this http://pastebin.com/raw.php?i=cSnarxQb.

    Result:

    Not having luck making form conform to mobile Image 1 Screenshot 20

    Check this cloned form as demo: http://form.jotformpro.com/form/41131132602940?. Resize the browser and see how it looks like.

    Hope this helps!

  • kevinponeill
    Replied on April 24, 2014 at 2:38 AM

    @EltonCris,

    That works nearly perfect! The layout works really well -- thank you.

    The only issues seem to be in desktop Chrome and in Firefox (everything looks correct in Safari). Specifically, all of the field labels are bulleted (?) and the layout of the various fields in the Address group is all messed up.

    In mobile Safari and mobile Chrome (for iOS 7), everything looks great.

    If you could help me figure out the bulleting and Address field issues for desktop Chrome and Firefox, I would REALLY appreciate it.

    Thanks again for the awesome help and service!

  • Ashwin JotForm Support
    Replied on April 24, 2014 at 6:44 AM

    Hello kevinponeill,

    Upon checking your web page, I found that you have used your form's source code to embed your form. Please embed your form using its iFrame embed code and that should solve your problem and rule out any conflict issues. The following guide should help you grab your form's iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Do get back to us if the issue persists.

    Thank you!

  • kevinponeill
    Replied on April 24, 2014 at 1:18 PM

    @ashwin_d,

    The issue I have with this is that the I need the form to be dynamic and therefore "grow" vertically, depending on selections a user makes. Using an iframe, I would have to set the height of the iframe to allow for this (which leaves a HUGE white gap between the bottom of the form and my site's footer. This is less than ideal.

    Is there no way to correct the formatting via CSS or editing the script? NOTE: I noticed that both Chrome and Firefox cite the blocking of "unsafe" scripts. If I "unblock" those scripts (in Firefox), the layout of the Address fields display correctly and bullets are all removed. For some reason, this has no affect in Chrome (I seem unable to "unblock" the "unsafe" scripts in Chrome for some reason), but it does appear to be an issue with the way Firefox and Chrome are interpreting the "safeness" of jotform scripts.

    Thanks again for any help you can provide.

  • Mike_T Jotform Support
    Replied on April 24, 2014 at 2:31 PM

    The issue is caused by regular non-ssl form code on your httpS page. In order to fix this, you will need to use secure version of the code, simply check a 'Secure form' option, and then you will be able to get the secure form code for embedding.

    Not having luck making form conform to mobile Image 1 Screenshot 20

    Thank you.

  • kevinponeill
    Replied on April 24, 2014 at 3:54 PM
    Ah-ha! I'll give that a try. Thanks!
  • kevinponeill
    Replied on April 25, 2014 at 1:08 AM

    Using the secure version of the form seems to have corrected everything. You guys rock! Thank you. :)