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

    Problem with contact form on mobile device

    Asked by Charlottesweb on September 17, 2014 at 05:09 PM

    Please checkout my form here: http://mmsinfo.org/page2.html using a mobile device. I use a Nexus 7 tablet and see two problems. One is the Comment Field is too wide and intrudes on the graphic on the right side. The major problem is no Captcha word loads. Viewed on a PC using W7, it is perfect. Thanks. --CL

    Page URL:
    http://mmsinfo.org/page2.html

    Screenshot
    contact form Mobile mobile device form width captcha
  • Profile Image
    JotForm Support

    Answered by jonathan on September 17, 2014 at 06:18 PM

    Hi,

    Please try removing also the Captcha field in your jotform.

    JotForm already have spam filter/prevention built-in on the back-end system, so it is not really that necessary to use the Captcha field anymore. 

    To make the TextArea field less wider try replacing the injected CSS code in your jotform to this

    /*---BACKGROUND IMAGE---*/

    img.form-image {

    z-index: -1;

    position: absolute;

    margin-left: -30px !important;

    }

    .form-line { background: none; }

    .form-header {

    margin-top: 60px;

    text-align: center;

    color: #000 !important;

    }

    .form-header-group {

    border-bottom: none !important;

    border-top: none !important;

    }

    #id_4.form-line {

    margin-top: -30px !important;

    }

    .form-textbox, .form-textarea, .form-radio-other-input, .form-captcha input {

    padding: 3px;

    border: 1px solid

    black;

    }

    .form-textarea{

        width: 285px !important;

    }

    User Guide http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is a modified demo jotform  http://www.jotform.me/form/42597220978466 that you can test on your device browser.

     

    Hope this help. Inform us if issue remains.

    Thanks.

     

     

     

     

     

  • Profile Image

    Answered by Charlottesweb on September 17, 2014 at 06:31 PM
    ------------------------------------------------------------------------
    Thanks for the quick response. I will try to fix the problems soon as
    you have outlined here.
    --CL
    ------------------------------------------------------------------------
    ...
  • Profile Image

    Answered by Charlottesweb on September 18, 2014 at 02:13 AM

    I fixed both problems.

    1. Removed captcha

    2. Changed width of "Comments and Question" field

    A. On the form page highlighted the "Comments and Question" field

    B. On that field right clicked, then left clicked on "Show Properties"

    C. Changed "Columns" (width of text area) from the default 34 to 32

    D. Clicked "Close Settings"

    E. Clicked "Save"

    F. Copied the new "Source Code" to my web page software and uploaded the changed page.

    G. This is a compromise between a regular page and mobile page, but it is satisfactory.

    Hope this helps others with the same problem.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 18, 2014 at 04:56 AM

    @Charlottesweb

    Glad to hear you've managed to resolve the problem and thanks for sharing the solution. We have also improved that template in the form templates page so its text area won't overlap on any other browsers.

    Regards!