How to make a form look like this?

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?

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.

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)"; }

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

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

Hi,

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

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?

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.