Log in

View Full Version : Resolved CoffeeCup Form in LightBox or Layer?


DawgMom
12-27-2009, 05:58 AM
Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI).

I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine.

This is the code on the HTML page:



<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");so.addParam("salign", "lt");
so.addParam("wmode", "transparent");
so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527");
so.write("flashcontent");</script>

Thanks in advance.
jscheuer1
12-27-2009, 11:45 AM
That's not really a form, it's javascript. The fact that it's javascript that loads up Flash that probably ends up looking and acting like a form isn't as important to getting it to work as imported content as is the fact that it is javascript.

Of the options listed in your post, Thickbox, using its iframe method would probably have the best chance of working.
DawgMom
12-27-2009, 09:03 PM
Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect.

Anyway, someone did help me and I wanted to share the code in case others can use it. Yep, John, it uses an iframe that opens in a new layer but it's not ThickBox. I could not get that to work and I think this code is a lot lighter. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>:


<style type="text/css">
div#OVERLAY
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 1200px;
background-color: black;
-moz-opacity: 0.70;
opacity: 0.60;
filter: alpha(opacity=70);
z-index: 10;
display: none;
}
div#FORMHOLDER
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-color: transparent;
text-align: center;
z-index: 15;
display: none;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;
}
div#FORMHOLDER span.closer
{
padding-left: 100px; padding-right: 100px;
color: #E5BC9D;
background-color: black;
}
div#FORMHOLDER iframe
{
width: 653px;
height: 527px;
margin: 0px;
padding: 0px;
background-color: #000;
}
</style>

<script type="text/javascript">
function overshow()
{
var hold = document.getElementById("FORMHOLDER");
hold.style.display = "block";
var stop = parseInt(document.body.scrollTop);
if ( isNaN(stop) ) stop = 0;
if ( stop == 0 )
{
var stop = parseInt(document.documentElement.scrollTop);
if ( isNaN(stop) ) stop = 0;
}
hold.style.top = stop + 50 + "px";
document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
document.getElementById("OVERLAY").style.display = "none";
document.getElementById("FORMHOLDER").style.display = "none";
}
</script>

Next, use the <div> and an <iframe> tag in the fist line after the <body> tag:


<div id="OVERLAY"></div>
<div id="FORMHOLDER">
<span class="closer" onclick="overoff()">Click here to close</span><br />
<iframe src="form.html" scrolling="no" frameborder="0"></iframe>
<br /><span class="closer" onclick="overoff()">Click here to close</span>
</div>

Finally, when you link to the form page CoffeeCup creates, the code is:


<a href="#" onclick="overshow(); return false;">link</a>

I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers!
jscheuer1
12-29-2009, 03:32 AM
That means that it would also work with Thickbox. But only with Thickbox's iframe method, it has several.

But, if it is working for you as you have it, that's great!