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

    Form cuts off the bottom section

    Asked by Tinysumo on October 30, 2012 at 08:31 PM

    Hi,

    This form renders ok in all browsers except Firefox (where it cuts off the bottom section)?

    http://www.katherinecowan.co.uk/contact.php

    Any ideas?

    Thanks!

    Page URL:
    http://www.katherinecowan.co.uk/contact.php

  • Profile Image
    JotForm Support

    Answered by liyam on October 30, 2012 at 09:44 PM

    Hello Tinysumo.  On your contact.css file, you have an ID there called formxmedia.  Can you add this property with value there:

    height: 575px;

    Please let us know if you need further assistance.

  • Profile Image

    Answered by Tinysumo on January 14, 2013 at 04:46 PM
    Hi,
    Sorry - I can't seem to find the ID "formxmedia" in the CSS (show below) -
    maybe i'm missing something?
    /*--red border on error--*/
    .form-validation-error {
    border: 1px solid #FFB0B0 !important;
    }/*---form textbox styles fixed---*/
    .form-textarea, .form-textbox {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 4px;
    background:transparent !important;
    width: 390px !important;
    max-width: 390px !important;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    border: 1px solid #AEAEAE;
    color: #333;
    font-family:verdana !important;
    }/*--form all styles--*/
    .form-all{
    background:url('
    https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png')
    no-repeat;
    float:left;
    padding-left: 54px;
    padding-top: 0px !important;
    width: 480px;
    height: 578px;
    }/*---remove error message---*/
    .form-error-message {display: none !important;}
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    /*---button error move down---*/
    .form-button-error {
    display: block !important;
    }/*---submit button move--*/
    .form-submit-button{
    margin-top:0px !important;
    cursor: pointer;
    }#id_6{
    text-align: center !important;
    font-weight: bold !important;
    font-size: 25px !important;
    color: #3e83a5 !important;
    margin-right: 39px !important;
    font-family: arial !important;
    padding:0px !important;
    }
    #text_6{
    margin-right: 20px;
    padding-top: 10px;
    }
    .form-buttons-wrapper{
    margin-right: 60px;
    }.form-textarea:focus, .form-textbox:focus{
    outline:none !important;
    }/*--fix textarea height--*/
    #input_4{
    height: 95px !important;
    max-height: 95px !important;
    }/*--fix captcha--*/.form-captcha .form-textbox{
    width:130px !important;
    }
    *www.tinysumo.co.uk
    *
  • Profile Image
    JotForm Support

    Answered by Mike_T on January 14, 2013 at 06:17 PM

    Here is the path to the CSS file on your website:

    http://www.katherinecowan.co.uk/contact.css

    #formxmedia {
    margin-bottom: 32px;
    margin-top: 39px;
    margin-right: 0px;
    margin-left: 57px;
    position: relative;
    left: 0px;
    top: 0px;
    width: 573px;
    height: 575px;    /* Added */
    }

    Please check it out, and let us know if you need any further assistance.

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on January 14, 2013 at 06:37 PM

    Hi there, 

    I have tested the following CSS and it works well on Firefox.  You are welcome to give it a try in stead of the one you currently have:

    /*--red border on error--*/

    .form-validation-error {

    border: 1px solid #FFB0B0 !important;

    }/*---form textbox styles fixed---*/

    .form-textarea, .form-textbox {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

    padding: 4px;

    background:transparent !important;

    width: 390px !important;

    max-width: 390px !important;

    -webkit-appearance: none;

    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    border: 1px solid #AEAEAE;

    color: #333;

    font-family:verdana !important;

    }/*--form all styles--*/

    html { background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png) no-repeat; float:left;}

    .form-all{

    float:left;

    padding-left: 54px;

    padding-top: 0px;

    width: 480px;

    height: 578px;}/*---remove error message---*/

    .form-error-message {display: none !important;}

    .form-line-error {

    background:none repeat scroll 0 0;

    }/*---button error move down---*/

    .form-button-error {

    display: block !important;

    }/*---submit button move--*/

    .form-submit-button{

    margin-top:0px !important;

    cursor: pointer;

    }#id_6{

    text-align: center !important;

    font-weight: bold !important;

    font-size: 25px !important;

    color: #3e83a5 !important;

    margin-right: 39px !important;

    font-family: arial !important;

    padding:0px !important;

    }

    #text_6{

    margin-right: 20px;

    padding-top: 10px;

    }

    .form-buttons-wrapper{

    margin-right: 60px;

    }.form-textarea:focus, .form-textbox:focus{

    outline:none !important;

    }/*--fix textarea height--*/

    #input_4{

    height: 95px !important;

    max-height: 95px !important;

    }/*--fix captcha--*/.form-captcha .form-textbox{

    width:130px !important;

    }

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on January 14, 2013 at 06:40 PM

    Also, it seems that the stand alone form works fine.  Can you please try embedding the form using the iFrame method?  That will ensure there are no conflicts between the scripts on your page.  Here is a guide for that:

    http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code