[Plugin: Form Lightbox] Open Contact form in Lightbox using button

Installed two plugins – Form Lightbox and Contact form 7.

Then used a text/HTML widget with the following code.

<p style="text-align: center;">[formlightbox_call title="lightbox form" class="1374826386773"]<button class="requestquote">Request Quote</button>[/formlightbox_call]
[formlightbox_obj id="1374826386773" style="" onload="false"][contact-form-7 id="1013" title="Contact form 1"][/formlightbox_obj]</p>

Where I defined the “requestquote” button class to style the default HTML button.
I used a CSS Style Button generator website to help me with the CSS styling to match the look and feel of the theme so I used the following –

.requestquote {
border: 1px solid #D1D1D1;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.08, #FFFFFF), color-stop(0.9, #D1D1D1) );
background: -moz-linear-gradient( center top, #FFFFFF 8%, #D1D1D1 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D1D1D1');
background-color: #FFFFFF;
-moz-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-webkit-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
text-shadow: 1px 1px 2px #FFFFFF;
font-weight: normal;
margin: 5px 5px;
padding: 6px 6px;
color: #174580;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
font-size: 18px;
width: 185px;
text-transform: capitalize;
text-align: center;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.requestquote:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.08, #D1D1D1), color-stop(0.9, #FFFFFF) );
background: -moz-linear-gradient( center top, #D1D1D1 8%, #FFFFFF 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1D1D1', endColorstr='#FFFFFF');
background-color: #D1D1D1;
}
.requestquote:active {
position: relative;
top: 1px;
left: 0px;
}

And DONE!!

thank you row321
I am able to open contact form 7 form in a light box but faces a problem
when i click on the button the forms open up and everything works fine, but if i close the form and try to open the form agian by clicking on the button it open the page in light box instead of the form…
any idea what is causing the problem??

I’m getting the same issue, did anyone get to solve this? I click once it works, but then when I close the lightbox and click the button/link again it lightboxes the whole page instead of just the form. WTF?