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

    How to disabled a custom background when form is not visible in edit mode

    Asked by perrymanku on August 08, 2013 at 12:56 AM

    Hi,

     

    I have created my form:

     

    http://form.jotformpro.com/form/32125042363947?

     

    but it is not visible in creation mode it just shows a white background and only hte video element with my fields off the bottom

    I have cleared browser cache

     

    perry

    not visible video cache
  • Profile Image

    Answered by Athans on August 08, 2013 at 01:23 AM

    Hi,

     

    I'm not a pro on this one but I would love to help you out.

     

    If I understand correctly did you mean that your form is not visible in edit mode?

     

    Have you tried duplicating your form or importing your form and see if you can view them on creation mode?

     

    Here is the step by step:

    1) Click Create Form

     

    2) Click Import Form

     

    3) Importing your form

     

    4) Duplicating your form

     

    I hope this helps.

  • Profile Image

    Answered by khrisell on August 08, 2013 at 05:15 AM

    Hello perymanku,

    I am able to replicate the issue.

    It is because of the injected CSS codes. Especially this line.

    .form-all {

    background: url("http://www.uccc.co.uk/img/competitions/25voucher/UCCC_AppleComp_Sc2_BG.jpg") no-repeat;

    height: 1000px;

    }

     

    That is why you are having a hard time viewing it properly.

    I highly suggest that you clean-up your injected code.

    And the workaround for you to be able to see its actual view of your form while editing is to preview it.

     

    Kindly let us know if you need further assistance so that we could help you further.

  • Profile Image

    Answered by perrymanku on August 08, 2013 at 06:47 AM

    Hello,

     

    thanks. How do I clean the injected CSS code. I am not a coder so have just been using your snippets of injected css tips.

     

    I can see when I preview but it makes it difficult when editing if I cant see the background.

     

    Do i need to chenge the above code?

     

    PErry

  • Profile Image

    Answered by jefreylandicho on August 08, 2013 at 08:55 AM

    You can use quote line to temporarily disable the injected CSS code in your form. To do this, you will need to add <!---  at the beginning of the code and --->  at the end of the CSS code you want to disable .e.g.

    <!--- .form-all { background: url("http://www.uccc.co.uk/img/competitions/25voucher/UCCC_AppleComp_Sc2_BG.jpg") no-repeat; height: 1000px; }  --->

    With this method, you will be able to maintain the CSS code and  enable/disable as you please. If you need to activate the injected CSS again, simply remove the line in the beginning and end of the code which is <!---   and ---->. 

    If you need further assistance, please contact us again.

  • Profile Image

    Answered by perrymanku on August 08, 2013 at 10:29 AM

    Ok is this the easiest way?

     

    Will I never see my background in edit mode

  • Profile Image

    Answered by jeanettebmz on August 08, 2013 at 12:32 PM

    Actually, if you want to simply wipe that code out,  follow this guide in order to edit or delete the current code, while you are editing your form

    You can copy that code and save it in a txt file as your backup if you plan to use that later on

    Otherwise, while on this screen,

     

    Please inject the code below, highlight everything, delete and replace by this one. It already contains the code suggested by JefreyLandicho

    @charset "utf-8";
    /* CSS Document *//* Injected CSS Code */

    <!--- .form-all { background: url("http://www.uccc.co.uk/img/competitions/25voucher/UCCC_AppleComp_Sc2_BG.jpg") no-repeat; height: 1000px; }  --->

    .form-all input, select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    }
    .form-line-error {
    background: none;
    }
    .form-textbox {width: 200px !important;}.form-dropdown {width: 207px !important;}
    #id_1 {
    position: absolute;
    top: 590px;
    margin-left: 300px;
    }#id_2 {
    position: absolute;
    top: 590px;
    margin-left: 520px;
    }#label_1, #label_2 {
    display: none;
    }#id_3 {
    position: absolute;
    top: 640px;
    margin-left: 300px;
    }#label_3 {
    display: none;
    }#id_4 {
    position: absolute;
    top: 640px;
    margin-left: 520px;
    } #label_4 {
    display: none;
    }#id_5 {
    position: absolute;
    top: 685px;
    margin-left: 300px;
    } #label_5 {
    display: none;
    }
    #id_6 {
    position: absolute;
    top: 745px;
    margin-left: 143px;
    } #label_6 {
    display: none;
    }
    #id_7 {
    position: absolute;
    top: 730px;
    margin-left: 299px;
    font-family: Tahoma;
    font-size: 10px;
    } #label_7 {
    display: none;
    }
    #id_8 {float: right;margin-top: 120px;margin-right: 12px;}

     

    Should you need further assistance, let us know