How to make a form look like this?

  • Profile Image
    igrzysk
    Asked on June 30, 2015 at 05:03 PM

    Hi,

     

    How to make a form look like this?

    I mean how do you setup the background to be this way and how do you

    make the rest transparent but still in some shade of a color.

     

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

     

    Maybe you can give me some more tips on how to achieve such an effect?

  • Profile Image
    david
    Answered on June 30, 2015 at 07:20 PM

    Hi,

    The background effect is just an image:

    https://s3.amazonaws.com/jufs/vanvell/form_files/home-office-593383_19202.jpg

    To adjust the opacity and color of the form background, here is our long guide:

    http://www.jotform.com/help/122-How-to-Adjust-the-Opacity-of-a-Form-s-Background

    Sample code would be something like this:

    .form-all { background:rgb(51, 102, 0); background:rgba(51, 102, 0, 0.6); background:transparent\9; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99336600, endColorstr=#99336600); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99336600, endColorstr=#99336600)"; }

    If you have any further questions, just let us know and we will be happy to help.
  • Profile Image
    igrzysk
    Answered on July 01, 2015 at 03:16 AM

    Hi David,

     

    Thank you for a quick reply. Would you be able to provide me with a code that makes a background on the form only white + Transparent?, so it looks ok with the image?

    This makes it green .form-all { background:rgb(51, 102, 0); background:rgba(51, 102, 0, 0.6); background:transparent\9; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99336600, endColorstr=#99336600); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99336600, endColorstr=#99336600)"; }

  • Profile Image
    Sammy
    Answered on July 01, 2015 at 03:40 AM

    Hi kindly try the following

    .form-all { 

      background: rgb(255, 255, 255) !important; /* Fallback */

     background: rgba(255, 255, 255, 0.3) !important;

    }

    The color code for white is 255,255,255 the lat number adjusts the transparency from 0 to 1

  • Profile Image
    igrzysk
    Answered on July 01, 2015 at 04:23 AM

    Thanks for the anwers Sammy, I will try that later Today.

     

    One last thing is that I want to use the image David provided in my form which I intend to send to a company as a part of a comercial project. Is it ok with you guys if I use it as background in the form?

    https://s3.amazonaws.com/jufs/vanvell/form_files/home-office-593383_19202.jpg

  • Profile Image
    Sammy
    Answered on July 01, 2015 at 04:44 AM

    Hi,

    You are free to use the image of your liking, kindly let us know once you have tested the CSS

  • Profile Image
    igrzysk
    Answered on July 01, 2015 at 11:32 AM

    Thank you for the confirmation about the image, I apprecie it.

    The provided code works like charm; however, there is one more thing. While the form becomes transparent the image doesn't. 

    http://monosnap.com/image/GTEFlxcJS41vDJG5tPanbjLauPzJcR

    Is there a CSS to make it transparent too?

  • Profile Image
    david
    Answered on July 01, 2015 at 11:46 AM

    If you would like to make the images in your form transparent too, you can add this code:

    .form-image {
        opacity: 0.4;
    }

    Adjust the value to the desired opacity.