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

    Fields are appearing longer in IE

    Asked by noragood on March 31, 2014 at 10:50 PM

    please see attached, can you help solve this problem, the field in ie is longer than all the other browsers, appreantly opera does it too.

     

    thanks.

    Screenshot
    problem opera thanks attached
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 01, 2014 at 04:35 AM

    Hello noragood,

    Please inject the following custom css in your form and that should solve your issue:

    .form-textbox {

    width: 254px !important;

    }

    textarea {

    width: 254px !important;

    }

    Following guide should help you in injecting the custom css:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by noragood on April 01, 2014 at 07:09 AM

    Thx

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 01, 2014 at 07:19 AM

    Hello noragood,

    You are welcome.

    I'm very pleased that I was able to help you.

    Do get back to us if you have any questions.
    Thank you!
  • Profile Image

    Answered by noragood on April 03, 2014 at 07:22 PM

    now on mobile iphone it looks like this?

  • Profile Image

    Answered by Cesar on April 03, 2014 at 10:34 PM

    I see that your screenshots contain elements not found on the form itself. Are those elements part of an image where the form in being embedded to? If so you may need to position the embed code properly for your page. Please provide the URL of such page so that we may assist you better. Thank you.

  • Profile Image

    Answered by designfacet on April 04, 2014 at 07:21 AM

    Hi, Well The agent above gave me the code to fix the problem with desktop virewing, which did fix it. I know this is not a mobile version but using mobile browsers it looks like this. Yes those text are palced on the background. If I move the bars or embed code then on desktop it will look odd. Anyways my question was why with the code above now it looks fine on desktop browsers but on mobile it is screwed up? btw I am the designer behind this, that is why I responded on behalf of nora.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 04, 2014 at 10:36 AM

    Hello designfacet,

    Please share your web page URL where you have embedded your form. Your form does not have the labels which is overlapping in the screenshot which you have shared above. Your form with its direct URL looks like this:

    We need to check your webpage to be able to help solve this problem. I remember last time when I provided the custom css code, the labels were part of your form.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by designfacet on April 04, 2014 at 11:08 AM

    yes pleases follow this link.

     

    The client wanted that certain font and you did not have that font family. That is why I put in my own lables.

  • Profile Image

    Answered by jedcadorna on April 04, 2014 at 12:35 PM

    I'm testing your site using an online emulator and the Name, Email and Message are properply aligned. Since you are using those as your background and is not part of the form. You can try adjusting the positioning value. 

    Here's your code:

    position: absolute; left: 580px;

    You can edit and decrease the number of the position value to test whether it is properply aligned when viewed on iphone.

  • Profile Image

    Answered by designfacet on April 04, 2014 at 12:43 PM

    Thank you for your response, many of these emulators do not work similar to tha tof iphone and other mobiles. The one I use is a this 

     

    I just rendered it with different iphone modules and the results were the same.

    I am not concerned about this now, because only on mobile it looks like this. I will be developing a mobile site and will fix this, just letting you know that why does it look okay on desktop browsers but on mobile it does not?

     

    Your soultion of moving values will effect the desktop look and I do not want that.

  • Profile Image
    JotForm Support

    Answered by TitusN on April 04, 2014 at 02:35 PM

    Emulators are hardly accurate - if anything - you need a virtual OS - the actual SDK to emulate mobile environments on your computer - such that you will be running the actual IOS on your computer to get accurate outputs to your test-

    We use Browserstack to troubleshoot as well -

    Chrome also has a neat emulator that really hits close to home -try it out:

    Having said that - different browsers render HTML elements differnetly because each has their own defaulting Style Sheet if the current rules cannot be implemneted

    When you are working with a mobile environment - one of the best ways to make sure it works on desktop and mobile browsers is to make the width dynamic -

    For example

    /*Begin by declaring the main div container's maximum width*/

    main_div{

    max-width: 250px;

    }

    /*Then make the elements/classes/id's fit dynamically to 100% of the maximum width*/

    element_class/id {

    width:100%

    }

    I notice that you are working on a new form - once you've completed the form design - let us know and we shall advice with CSS that will align everything dynamically - that is, if you would like to. 

    Note  - the above method will put the field labels above the text-input fields  - may not be a big deal - but just thought you should know.

    Looking foward to your response.