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 can I make a transparant form and remove the border and shadow around the form?

    Asked by plekkey on January 10, 2017 at 05:22 AM

    Hi there,

     

    Can I make a form transparant, so you don't see the borders and backgroundcolor of the form when I insert it on our website? Can I also take away the shadow on the border of the form? 

     

    Kind regards,

     

    Debbie Nahon

    Plekkey Kinderopvang

    Screenshot
  • Profile Image
    JotForm Support

    Answered by seth on January 10, 2017 at 06:03 AM

    Hello,

    There two ways that you can design JotForm. One is the Advanced designer, other one is to use CSS codes. Please have a look at how you can make transperent form via Advanced Designer:

    https://www.jotform.com/help/87-Making-the-Form-Background-Transparent

    To remove border and shadow around the form you can inject this code into your form:

     

    .supernova .form-all{

        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;    

    }

     

    Here is  a guide on injecting CSS to JotForm:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

     

    PS: Here is the CSS to make transparent background:

     

    .supernova, .jotform-form, .form-all {

        background-color : transparent !important;

    }

  • Profile Image

    Answered by plekkey on January 10, 2017 at 08:45 AM
    Thanks for your quick answer!
    I did it and it works, thanks.
    I have another problem. I have a transparent form now, see screendump:
    [cid:image001.png@01D26B4B.46786420]
    The problem is that if I click an option there still appears a background, see screendump:
    [cid:image002.png@01D26B4B.46786420]
    I looked and thought I have to change the background of the highlight style. But in the advanced designer that don’t work. See screendump for what I did:
    [cid:image006.png@01D26B4C.94509040]
    The advanced styler did not work on the background transparency. I had to use CSS for it. So maybe the advanced styler does not work well with me? Is there also a CSS code which I can use?
    By the way, I embed the form in a Wordpress website. Can that be he reason why the advanced designer does not quite working properly??
    I have another problem with the appearance of the form. The font size shows smaller in my Wordpress site than I’ve entered in Jotform. Are you familiar with this problem and can you tell me how to solve this?
    I hope you can answer this two questions for me!
    Hartelijke groet,
    DeBBIE NAHON
    [cid:image003.png@01D13412.70B0B6A0]
    Plekkey Kinderopvang - Centraal Bureau
    Utrechtseweg 91, 3818 EB Amersfoort
    088 - 40 10 300
    post@plekkey.nl - www.plekkey.nl
    [cid:image004.png@01D13412.70B0B6A0]
    [cid:image005.png@01D13412.70B0B6A0]
    Het versturen van deze e-mail levert 5 cent op voor Plekkey Foundation: voor en door jong Amersfoort | disclaimer
    Van: JotForm [mailto:noreply@jotform.com]
    Verzonden: dinsdag 10 januari 2017 12:03
    Aan: Plekkey Kinderopvang
    Onderwerp: Re: How can I make a transparant form and remove the border and shadow around the form?
    A new response has been received:
    [JOTFORM]
    Answered by seth
    Hello,
    There two ways that you can design JotForm. One is the Advanced designer, other one is to use CSS codes. Please have a look at how you can make transperent form via Advanced Designer:
    https://www.jotform.com/help/87-Making-the-Form-Background-Transparent
    To remove border and shadow around the form you can inject this code into your form:
    .supernova .form-all{
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    }
    Here is a guide on injecting CSS to JotForm:
    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
    I hope this answer helps. Please don't hesitate to contact us for your further queries.
    All the best!
    PS: Here is the CSS to make transparent background:
    .supernova, .jotform-form, .form-all {
    background-color : transparent !important;
    }
    View this thread on browser » Unsubscribe Thread
    1484046198
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 10, 2017 at 09:57 AM

    Glad to know the code given by my colleague worked. 

    To disable the highlight effect on your form you will need to go to the form preferences. 

    Once there go to the advanced tab and click on the show more button: 

    At the very bottom you will find the option to disable the highlight effect, once you set it to disabled and click on one of your fields while filling out the form the background color should not be present anymore. 

    Do note that is suggested to re-embed your form to get the changes applied to the embedded version. 

    If you have any question, let us know.