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

    Responsive Layout

    Asked by dhidalgo on April 23, 2013 at 01:46 PM

    I have a problem with a form where three of the fields are allign to the left and the main Text area is to the right with the submit button.Looks perfect on Desktop but the button and the text area do not drop down in line for mobile... can anyone help?

    This is my unpublished form http://form.jotformpro.com/form/31123751319952

    Thanks,

    Page URL:
    http://form.jotformpro.com/form/31123751319952

    layout problem Mobile thanks
  • Profile Image
    JotForm Support

    Answered by KadeJM on April 23, 2013 at 02:30 PM

    Hi there, I think that instead of the Responsive Layout you are more looking for something that is Mobile-User-Friendly Perhaps? Such as having the current layout you have for your form fitting a Mobile Device's screensize after being detected.

    Our forms are already relatively responsive and Optimized for Mobile Devices for the most part. I could easily see and prepare to use the form on my iPhone after testing this out just to check it. 

    Now if you want something more pristeen and fitted this is something you would have to apply to the form's source code to then be detected after embedding it somewhere or you could use a third party service that can also do this for you.

  • Profile Image

    Answered by dhidalgo on April 26, 2013 at 09:00 PM

    Sorry I was out for a while... yes the form works on I-Phone but the text field needs to drop down below the e-mail field for mobile devices which does not right now, in other words how do you make it responsive?. Also the button gets kind of lost... 

  • Profile Image

    Answered by moonzkie on April 27, 2013 at 01:05 AM

    Hi,

    I am not sure what you meant that it "needs to drop down below the email field". Can you please explain what you meant by this? As stated above by my colleague the forms are already optimized for almost all parts, so the how you set the form on a computer will depend on what all you have in your phone.

    Thank you.

  • Profile Image

    Answered by dhidalgo on April 29, 2013 at 10:22 AM

    Righ now the text area is Alligned to the right of the E-Mail, Phone and Name Fields... As you can see in my example. For Responsive, or Mobile devices I need the Text are to move below the e-mail field. As mentioned right now on mobile devices the Text Area gets cut off...does that make sense?

  • Profile Image

    Answered by jefreylandicho on April 29, 2013 at 11:30 AM

    Please try to move the button at the bottom part of your form and replace the current CSS code in your form styles with the CSS code below and see if it works. 

    body, html{

    background:transparent !important;

    }/*--position textarea---*/

    @media screen and (min-width: 640px) {

    #id_5{

    position: absolute;

    top: 0px;

    left: 200px;

    }

    #id_1{}

    #id_3{}

    #id_6{}/*--form all styles--*/

    .form-all{

    margin-left:0px;

    padding-top:0px;

    padding-left: 0px;

    width: 735px;

    height: 100%

    }

    }

    @media screen and (max-width: 600px) {

    .form-all { width: 97%; }

    .form-line.form-line-column {

    width: 97%

    }

    .form-line-error input, .form-line-error textarea, .form-validation-error,textarea {

    width: 97%;

    }

    }

    For additional reference,  I made a clone form that can be found on your account in this link.

  • Profile Image

    Answered by dhidalgo on April 29, 2013 at 11:35 AM

    Jefrey - Your Code worked like a Charm!!! Thank you so much!!!!!!

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 08:51 AM

    Hope you guys can still help with this because for some reason the code stopped working. If you can take a look at my site and see what can be happeneing, i would really appreciate it... www.soberforever.net form below the red call to action. THANKS!!!!

  • Profile Image

    Answered by jefreylandicho on May 21, 2013 at 09:42 AM

    In your Custom CSS, please try adding a semi column at the end of the css style value and see if it works.

    If the issue still persist, please contact us again.

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 09:53 AM

    Jefrey,

    I tried that and the problem persist on cell phone devices... 

    it looks fine on desktop except for IE where the 'how can we help box' moves one down. 

     

    Thanks

  • Profile Image

    Answered by jefreylandicho on May 21, 2013 at 10:17 AM

    Will you be able to provide us a screenshot of the issue you are expriencing with mobile devices ?  

    I have also tested your website in IE10 but was not able to replicate any issue. Can you tell us what IE version you are currently using?

    I also checked the responsiveness of your site in this link and it looks fine on my side.

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 10:27 AM

    Explorer 8 gives problems...  Thhe screen shoot is from an Iphone using safari - droid using chrome doesnt seem to give any problems... notice it doesnt let the site resize... if i take the code off it works just fine

     

    Thanks for helping me on this Jefrey

    I Phone

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 21, 2013 at 11:53 AM

    I took a look at this on my iPhone and I think I can see what you mean. This problem is actually occuring because of the Form's Size. It seems as though it's not resizing correctly.

     

    To help correct this problem please modify this Code Line on part of your form's Injected CSS:

    .form-line.form-line-column {

    width: 100%;

    Note: Try changing the width from 100% to somewhere around 80 - 90% to see if this fixes the offset on your website for mobile devices.

     

    From browser

     

    As for the IE8 Problem if I understand this issue correctly it appears to be occurring because the browser engine is older and is not recognizing the newer code which specifies it's current css layout.

    To try to help correct this problem please try specifying the Form's Doctype by changing it to this - 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Internet Explorer 8:

     

    Internet Explorer 10:

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 01:08 PM

    I tried making those edits with no success... 

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 21, 2013 at 01:51 PM

    Hello, I took another look and it looks like it's changed but I forgot to make a second edit to the form code you used so that is my fault. I say that since the button was not moved over either and that is why I think the gap is still appearing on your form.

     

    Try adding this change to the form css and then adjust the % as needed. this will move the button to the left some.

    #id_7 { width: 90%; 

     

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 21, 2013 at 01:54 PM

    Pardon, I made a mistake on the code to add into it.

     

    Use this -

    #id_7 { width: 90%; }


    I accidently left off the end " } " which is important to make sure it's in there.

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 02:00 PM

    ok this is what i have so far in the custom css which still displays wrong... 

    body, html{

    background:transparent !important;

    }/*--position textarea---*/@media screen and (min-width: 640px) {

    #id_5{

    position: absolute;

    top: 0px;

    left: 200px;

    }

    #id_7 { width:90%;}

    #id_1{}

    #id_3{}

    #id_6{}

    /*--form all styles--*/

    .form-all{

    margin-left:0px;

    padding-top:0px;

    padding-left: 0px;

    width: 670px;

    height: 100%;

    }

    }

    @media screen and (max-width: 600px) {

    .form-all { width: 97%; }

    .form-line.form-line-column {

    width: 80%;}

    .form-line-error input, .form-line-error textarea, .form-validation-error,textarea {

    width: 97%;

    }

    }

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 21, 2013 at 02:33 PM

    Okay thank you for letting me know. Try using this clone of your form here http://form.jotform.us/form/31404192345144 which I was using to try to configure this more for you. You will notice it probably looks a little bit different than what you have.

    I have the similar code setup but it is ordered a little differently which creates the layout you see -

     

    body, html{

    background:transparent !important;

    }/*--position textarea---*/

    @media screen and (min-width: 640px) {

    #id_7 { width: 90%;  }

    #id_5{

    position: absolute;

    top: 0px;

    left: 200px;

    }

    .form-all{

    margin-left:0px;

    padding-top:0px;

    padding-left: 0px;

    width: 735px;

    height: 100%;

    }

    }

    @media screen and (max-width: 600px) {

    .form-all { width: 97%; }

    .form-line.form-line-column {

    width: 90%;

    }

    .form-line-error input, .form-line-error textarea, .form-validation-error,textarea {

    width: 97%;

    }

    }

     

    Please try using it this way to see if there is any difference on your end for your website.

    Additionally you will notice that the #id_7 is in a different spot and I also removed the unnecessary id's that were empty. They were only in there if you wanted to stylize them as an example note.

     

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 02:55 PM

    Sorry to say same problem... nothing seems to help really. I think the main problem is the text area...

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2013 at 03:37 PM

    @dhidalgo 

    From your codes, can you please try to add this and see if this helps?

    .form-buttons-wrapper{

    margin-right: 48px !important;

    }

    Add it after this line,

    .form-line-error input, .form-line-error textarea, .form-validation-error,textarea {

    width: 97%;

    }

    I am about to check it here but I think you are currently working with your form so it may be hard for me to make a test. Let us know if this doesn't fixed it and we'll try another one. Don't worry, we will not stop until this gets sorted.

    We'll wait your reply. Thanks!

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 03:57 PM

    Thank you very much for helping me... still doesnt work... you can feel free to edit the form as i have placed it on a test page. the page is located here:

    http://www.soberforever.net/testpage.cfm

     

    I was able to create another one and got it working, although the layout is different, however it doesnt work in droid devices... you can see the form in any of our other pages.. the id is 31405055668959

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2013 at 04:07 PM

    @dhidalgo

    Thanks for providing a test page, that's very helpful. We will check this and get back to you later today. I can see that your CSS codes needs some refinement as well. Also, would it be OK instead of moving the button to the right on mobile view, make it stay to the left? I think this would be better to prevent misalignment of the button. Or, we'll see what we can do.

    Thanks!

  • Profile Image

    Answered by dhidalgo on May 21, 2013 at 04:11 PM

    no that will be completely fine... thank you! i will wait for an update! you guys are super helpful THANKS

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2013 at 05:53 PM

    @dhidalgo

    With the help of my colleague Kade, I think it's displaying OK now. Hopefully you like the new layout. I've made some changes on the text boxes and text area to expand more when viewed on small screen devices.

    I have made the changes directly on your form: http://www.jotformpro.com/form/31184144133949

    Test page: http://www.soberforever.net/testpage.cfm

    Chrome:

    Kindly check and let us know if you want further changes.

    Best Regards!

  • Profile Image

    Answered by dhidalgo on May 22, 2013 at 11:54 AM

    Thank you to al the Jotform team!!!! you guys took the time (a lot of it) and i do appreciate it. THANKS

  • Profile Image

    Answered by jeanettebmz on May 22, 2013 at 12:11 PM

    On behalf of the entire Support Team , I truly appreciate your cheerful comments towards our service. Seeing people's issues getting resolved is what make us to keep up working with a big smile .

  • Profile Image

    Answered by dhidalgo on May 29, 2013 at 10:01 AM

    Hi there me again :( ... i just run into another problem with the form and wonder how to go about it.

    The Form works and displays great in all platforms and devices except for our Blog (Wordpress) we installed the Jotform plugin and it works just fine in desktops but not on mobile devices, at least IPhone... the form ID is 31484037748965 (clone of the original) ... Can you guys help?

     

    Thanks,

  • Profile Image

    Answered by jefreylandicho on May 29, 2013 at 10:10 AM

    Please try using the IFRAME embed tag and see if it help resolves the issue.

    If it does not resolve the issue, please contact us again.

  • Profile Image

    Answered by dhidalgo on May 30, 2013 at 01:39 PM

    Thanks Jefrey... it took a while but now is all good. THANKS!!!

  • Profile Image

    Answered by jeanettebmz on May 30, 2013 at 01:57 PM

    @dhidalgo

    I am very glad to know the issue was sorted out. For future inquiries, please open a new thread so we can help you in an efficient manner rather with your new problem