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

  • Profile Image
    perrymanku
    Asked 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

  • Profile Image
    Athans
    Answered 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
    khrisell
    Answered 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
    perrymanku
    Answered 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
    jefreylandicho
    Answered 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
    perrymanku
    Answered 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
    jeanettebmz
    Answered 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