How can I make a transparant form and remove the border and shadow around the form?

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

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;

}

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
...

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.