Banner / Image background

  • Profile Image
    spitzy
    Asked on March 11, 2011 at 02:23 PM

    I plan to have a professional image / banner created with the idea that it would be the background to a JotForm on our web site. The idea is that the form fields and submit button etc, would appear to be embedded into the banner/image. Can this be done, and if so, how, and do you have any examples of this.

     

    Please see the attached example of what we are trying to create.

  • Profile Image
    mliz
    Answered on March 11, 2011 at 07:11 PM

    Hi Spitzy,

    With the use of custon inject css you can change the background of

    the form.


    1) Open your form to edit.

    2) On the top toolbar> Setup and Share > Preferences

    3) Write the text below in Inject Custom CSS.

    4) Click OK.

    You can find the code for changing the background from this link.

  • Profile Image
    spitzy
    Answered on March 14, 2011 at 11:15 PM

    I have tried this but it does not work. I copied the exact code you mentioned in the link, I then changed the 'Place holder" url to the one where the image is located on our word press web site. I saved the INject CSS,  then saved the form, re-copied the "Embed "Lightbox Code then repasted it into our test page and it did not work at all. Am I putting the code in he wrong place ? Am I doing something else wrong ? This keeps showing up as a light blue plain background

     

    Based on your previous message, Heres the CSS code and URL I used to enter into "Inject CSS":

     

    .form-all{

           backgound-image:url('http://www.priorityrealestate.com/wp-content/uploads/2011/03/abstract-backgrounds-vector-graphics-ibaa.jpg');
    }

     

    Am I doing something else wrong ? Does the image need to be stored on your server ? 

  • Profile Image
    liyam
    Answered on March 15, 2011 at 01:54 AM

    Hello,

    This sample page came from one of the users who asked for assistance for the same:

    http://www.jotform.com/form/10621818699

    Here is my CSS injection sample code that I did with my test form. 

    .form-all{
    background-image:url("http://url.to/image/here.jpg");
    background-repeat:no-repeat;
    }
    .form-line { background: none; }

    Let us know if this works for you.

    Thanks