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

    Squarespace embedded form is not mobile responsive

    Asked by leefuhr on May 10, 2016 at 03:10 PM
    Hrmkay, here's another one… I'm trying to get the form to be responsive,
    embedded in Squarespace.
    I have the width set to 960:
    Though it's also 1000px:
    And here I checked “Make this form responsive”
    I embedded using the Squarespace module under Publish > Platforms:
    But it's not resizing or anything on my site. Check it out, scroll down a bit:
    https://iqx.squarespace.com
    Any ideas?
    - Lee
    Founder & Creative Director @ Cozy cozydesign.com
    squarespace mobile responsive
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 10, 2016 at 03:32 PM
  • Profile Image

    Answered by leefuhr on May 10, 2016 at 04:17 PM
    Hmm, bummer… that didn't really help… this slider widget just isn't responsive-friendly. It's so wide with the three-column layout of question-slider-value. And crunched down there are a couple suboptimal layout issues:
     
    pasted.png
     
    Is there an option I'm not seeing to put the slider questions above the sliders instead of to the left of them? It'd be amazing if that was available only on really narrow (read: mobile) screens, but even if it was everywhere it'd be nice.
  • Profile Image

    Answered by leefuhr on May 10, 2016 at 04:45 PM
    That didn't really help… this slider widget just isn't responsive-friendly. It's
    so wide with the three-column layout of question-slider-value. And crunched down
    there are a couple suboptimal layout issues:
    Is there an option I'm not seeing to put the slider questions above the sliders instead of to the left of them? It'd be amazing if that was
    available only on really narrow (read: mobile) screens, but even if it was
    everywhere it'd be nice.
    - Lee
    Founder & Creative Director @ Cozy cozydesign.com
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on May 10, 2016 at 05:58 PM

    Using the form URL https://www.jotform.us/form/61254802251144 was responsive on moble browser when I test

     

    On the website https://iqx.squarespace.com/?r=85337764 it looks much better as well.

     

    Can you also share to us a screenshot on how it looks on your mobile browser on the website? It will help us identify more what could be the differnce on your side.

    We will wait for your update.

    Thanks.

     

  • Profile Image

    Answered by Lee on May 13, 2016 at 08:24 PM

    Hey, thank you for the comment. Looks pretty good on your screen, though on mine the filled bar blows out past its container when it gets pretty full. See the 15:

     

     

    Relatedly though, I'm trying to make the form fill the width responsively. So here it is on desktop; note that the slider bars are far narrower than their white container:

     

     

    The second thing I'd like to solve for is getting commas into that result number, so that "$174720" instead looks like "$174,720". Any leads there?

     

    Thank you so much! Support makes all the difference…

  • Profile Image

    Answered by leefuhr on May 13, 2016 at 08:25 PM

    (Looks like my images were lost, lemme try again, this time with backup links to them, in the body)

    Hey, thank you for the comment. Looks pretty good on your screen, though on mine the filled bar blows out past its container when it gets pretty full. See the 15:

     

    http://cozy.es/1kzQo

     

    Relatedly though, I'm trying to make the form fill the width responsively. So here it is on desktop; note that the slider bars are far narrower than their white container:

    http://cozy.es/11ysC

     

     

    The second thing I'd like to solve for is getting commas into that result number, so that "$174720" instead looks like "$174,720". Any leads there?

     

    Thank you so much! Support makes all the difference…

  • Profile Image
    JotForm Support

    Answered by Welvin on May 13, 2016 at 10:13 PM

    Can you check it with a real device? I checked this with iPhone 6S and it's already responsive on both portrait and landscape. Your screenshot seems like a mobile emulator of your browser, that doesn't provide a 100% accuracy on the result. 

     

  • Profile Image

    Answered by leefuhr on May 13, 2016 at 11:08 PM

    Hey there… looks like it was not working right when I resized the browser, but if I then refresh, it looks okay. I"m okay enough with this – most people will just load the page (at whatever size) once, and then be done with it.

    By the way, through CSS I overrode the display on this whole thing to switch it over to flexbox so I could get it truly responsive, control the widths, and even change the order of the columns. 

     

     

    So the only thing that remains is my "second thing":

     

    The second thing I'd like to solve for is getting commas into that result number, so that "$174720" instead looks like "$174,720". Any leads there?
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 14, 2016 at 12:05 AM

    Sometimes it happens when you are testing using an emulator, and it seems like you were using Google Chrome, then as you already noticed you need to refresh the webpage in order to load it responsively; however, it is good to know this is resolved. 

    Regarding to your second question, I have moved it to a separate thread and you will find it on this link: https://www.jotform.com/answers/839054

    We will assist you with that as soon as possible.