Contact form Inside of LightBox2

JavaScript
1

Here is the contact page for my website:
Bryson’s Contact Page

When you click the “GMAIL” logo, it takes you to another page which has the contact form. Instead of taking the user to another page, how do I incorporate the contact form into LightBox2, so that it swiftly pops out?
Lightbox 2

I’ve heard that it can get tricky when mixing scripts together. Thanks

2

The documentation page for LightBox2 says that it’s for images only. It cannot show HTML content (or any other type of content) other than images or pictures.

Are you open to using a similar one such as FancyBox instead?

It looks like their on-page example of “Iframe (75% width and height)” is just what you’re looking for.

3

I could use that one : )

I want to put this contact form in it:

[

](http://www.brysonprice.com/jformer.html)

Will this be hard to achieve? What do I have to be careful for when mixing the codes?

4

No.

Both your existing site and FancyBox use jQuery, so it should be easy to achieve.

5

So I messed around with it until I merged the files together. The only problem is that the pop out box is way too big and I can’t figure out if it’s FANCY BOX, or jFormer that’s causing this to happen. Also, the NAME, EMAIL, etc. are off from where they are supposed to be.

Can you please help me with this?

6

Can you help us to see what’s happening? Your earlier linked page doesn’t appear to show any update to it.

7

The example from the FancyBox page uses 75% of the screen size for the width and height.

You can provide your own alternative pixel dimensions instead of a percentage.

8

Paul,

I’m sorry, I thought I updated it. Here is the updated link:

Untitled Document

9

What code are you using to tell that gmail link to use fancybox?

10 
 <div class="slide"><a id="youtubefancy" href="jformer.html" title="Please fill out all fields."><img src="apple/img/sample_slides/gmailbigger.png" alt="side" width="850" height="260" id="Image5" onmouseover="MM_swapImage('Image5','','apple/img/sample_slides/gmailhover.png',1)" onmouseout="MM_swapImgRestore()"/></a></a></div>

the form I’m using is called “jformer”. Here is a link to it:Demos - jFormer

11

That’s only the HTML code. You also need to use a jQuery command to set up that link t use fancy box in a certain way.

For example:


$(function () {
    $("#youtubefancy").fancybox({
        'width' : '75%',
        'height' : '75%',
        'autoScale' : false,
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'type' : 'iframe'
    });
});
12

Here is the jQuery command and the part of it that I’m using for Gmail is:
$(“a#youtubefancy”).fancybox();

<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox();

			$("a#example2").fancybox({
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});

			$("a#example3").fancybox({
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'	
			});

			$("a#example4").fancybox({
				'opacity'		: true,
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'none'
			});

			$("a#example5").fancybox();
			$("a#gmail").fancybox();
			$("a#youtubefancy").fancybox();

			$("a#example6").fancybox({
				'titlePosition'		: 'outside',
				'overlayColor'		: '#000',
				'overlayOpacity'	: 0.9
			});

			$("a#example7").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example8").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>
13

I used the code you gave me and it resized the document box : )

But I think my problem is that the form itself is too big. Here is an updated link of what it looks like after your code:

Untitled Document

14

I greatly appreciate your help : )

15

Refer back to the code from post #11

Instead of using 75% for the width and height, you can instead use 460px, or whichever sizing specs you require.