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 make a form look like this?

    Asked by igrzysk 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?

    Make how a and setup href
  • Profile Image
    JotForm Support

    Answered by david 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

    Answered by igrzysk 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

    Answered by Sammy 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

    Answered by igrzysk 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

    Answered by Sammy 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

    Answered by igrzysk 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
    JotForm Support

    Answered by david 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.