/    Sign up×
Community /Pin to ProfileBookmark

CoffeeCup Form in LightBox or Layer?

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:

[CODE]<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>[/CODE]

Thanks in advance.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@dawgmomauthorDec 27.2009 — 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. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planning is to use the CSS and JS in an external file rather than in the <head>:

[CODE]<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>[/CODE]


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

[CODE]<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>[/CODE]


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

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

I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers!
×

Success!

Help @dawgmom spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...