Ever used the pop-up form function in Web Form Builder? It makes your form pop up over a webpage that it's emedded in. If you want that pop-up to be transparent, you need to make a few simple tweaks to the form's exported code.

So to create a transparent Colorbox pop-up form, you first need to manually export the form. Do this by going to File > Manual Server Setup and following the directions. In the exported files, locate colorbox.css. Open it in a text or code editor and make the following changes. Simple right? :)

The colorbox.css should contain the code on the left below. Just change this code so it looks like the code on the right and you'll have a transparent pop-up.

How it looks when exported:

How it looks when changed:
#cboxContent {
background-color: #f8f8f8; }

#cboxTopLeft {
width: 22px;
height: 22px;
background: url(images/cboxTopLeft_plain.png) top left no-repeat; }

#cboxTopCenter {
height: 22px;
background: url(images/cboxTopCenter_plain.png) top left repeat-x; }

#cboxTopRight {
width: 22px;
height: 22px;
background: url(images/cboxTopRight_plain.png) top right no-repeat; }

#cboxBottomLeft {
width: 22px;
height: 115px;
background: url(images/cboxBottomLeft.png) bottom left no-repeat; }

#cboxBottomCenter {
height: 115px;
background: url(images/cboxBottomCenter.png) bottom left repeat-x; }

.multiplebgs #cboxBottomCenter {
background-image: url(images/cboxActionDivider.png), url(images/cboxBottomCenter.png);
background-position: right 26px, center bottom;
background-repeat: no-repeat, repeat-x; }

#cboxBottomRight {
width: 22px;
height: 115px;
background: url(images/cboxBottomRight.png) bottom right no-repeat; }

#cboxMiddleLeft {
width: 22px;
background: url(images/cboxMiddleLeft.png) top left repeat-y; }

#cboxMiddleRight {
width: 22px;
background: url(images/cboxMiddleRight.png) top right repeat-y; }

#cboxContent {
background: #fff; }

#cboxPrevious, #cboxNext, #cboxClose {
background-image: url(images/cboxControls.png); }		 #cboxContent {
background-color: transparent; }

#cboxTopLeft {
width: 22px;
height: 22px;
background: transparent; }

#cboxTopCenter {
height: 22px;
background: transparent; }

#cboxTopRight {
width: 22px;
height: 22px;
background: transparent; }

#cboxBottomLeft {
width: 22px;
height: 115px;
background: transparent; }

#cboxBottomCenter {
height: 115px;
background: transparent;}

.multiplebgs #cboxBottomCenter {
background-image: transparent;
background-position: right 26px, center bottom;
background-repeat: no-repeat, repeat-x; }

#cboxBottomRight {
width: 22px;
height: 115px;
background: transparent; }

#cboxMiddleLeft {
width: 22px;
background: transparent; }

#cboxMiddleRight {
width: 22px;
background: transparent; }

#cboxContent {
background: transparent; }

#cboxPrevious, #cboxNext, #cboxClose {
background-image: transparent; }