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

    Not having luck making form conform to mobile

    Asked by kevinponeill on April 21, 2014 at 09: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!

    Page URL:
    https://k-o-k2br.squarespace.com/get-a-quote/

    Screenshot
    Mobile JotForm size template
  • Profile Image

    Answered by kevinponeill on April 22, 2014 at 02:03 AM

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

  • Profile Image

    Answered by kimotomaina on April 22, 2014 at 02: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.

  • Profile Image

    Answered by kevinponeill on April 22, 2014 at 02: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!

  • Profile Image

    Answered by kimotomaina on April 22, 2014 at 03: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.
  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2014 at 05: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

     

    --

    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

     

    Please inform us if you need further assistance.

    Thanks!

  • Profile Image

    Answered by kevinponeill on April 22, 2014 at 03: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;}

  • Profile Image

    Answered by kevinponeill on April 22, 2014 at 03:16 PM

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

  • Profile Image
    JotForm Support

    Answered by Mike_T on April 22, 2014 at 05: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.

  • Profile Image

    Answered by kevinponeill 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.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2014 at 01: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:

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

    Hope this helps!

  • Profile Image

    Answered by kevinponeill on April 24, 2014 at 02: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!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 24, 2014 at 06: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!

  • Profile Image

    Answered by kevinponeill on April 24, 2014 at 01: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.

  • Profile Image
    JotForm Support

    Answered by Mike_T on April 24, 2014 at 02: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.

    Thank you.

  • Profile Image

    Answered by kevinponeill on April 24, 2014 at 03:54 PM
    Ah-ha! I'll give that a try. Thanks!
  • Profile Image

    Answered by kevinponeill on April 25, 2014 at 01:08 AM

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