Need help getting form to work in overlay

Here is a tutorial people have used on Gravity Forms in a lightbox type of modal window if you wanted to try this one out instead:
http://websitesetuppro.com/how-to-open-gravity-forms-form-in-a-lightbox/

Sorry for the delay in posting back - I've been really trying hard to get this to work and had to do a lot of testing to be sure of my results.

The link you sent was very helpful...although I didn't wind up using FancyBox or the Easy FancyBox plugin, I learned enough from their example to get it partially working using ColorBox, which I was already using for quite a few other overlays on the site.

However, I turned up two problems that I'm not sure how to solve:
1. By calling the same gravity form more than once on the page (the second occurrence being inside of the hidden DIV as shown in the FancyBox example at that link) it negates the first instance on the page - the form just doesn't appear - until the overlay is actually activated, then both forms appear. What I want is for the form to appear at the top of the page, and then at the bottom a link to the form opening in an overlay, so that someone doesn't have to scroll back up. If I use a *different* form (by duplicating the form), then it appears in both places fine, however, I'd prefer to use the same form so that all the entries are within the same form. The same problem exists even without using the overlay - the same form cannot be called twice on a page - only the second instance will appear;

2. I use the jQuery Datepicker for two dates on the form, so that if you click in a date field (or on the calendar icon) it overlays a calendar from which the user picks a date.....and it works great in an on-page instance of a form, but not in the overlay - the field is just inert. I'm not sure if the act of opening the form in the overlay is causing a jQuery conflict or not - it's a bit over my head.

Ideal: Same form twice, once on page and once in overlay, calendar working both instances.

Acceptable: Two different forms, once on page and once in overlay, calendar working for both.

Any thoughts?

Thanks Rob - here's the live site with the form and calendar working on the left sidebar.......

http://www.bestallinclusive.com/azul/azul-beach/

Having two different forms, while not ideal, would still be acceptable as long as the calendar works....it's just the stock out-of-the-box jQuery datepicker with a small amount of custom code to tie the two dates together, like so:

$(function() {
	$("#input_6_5").datepicker(
		{
			"showOn": "both",
			"numberOfMonths": 2,
			"buttonImage": "http://www.bestallinclusive.com/img/calendar.gif",
			"buttonImageOnly": true,
			"minDate": 0,
			"onSelect": function(dateText, inst) {
				$('#input_6_6').datepicker('option', 'minDate' ,new Date(dateText));
			}
		}
	);

	$("#input_6_6").datepicker(
		{
			"showOn": "both",
			"numberOfMonths": 2,
  			"buttonImage": "http://www.bestallinclusive.com/img/calendar.gif",
			"buttonImageOnly": true,
			"minDate": +1
		}
	);
});

I have to recreate this for every form because the input for the dates has a different ID on each form, and while I've tried to make this work using class instead of ID, so that I can use the same code for any form and not have to call multiple scripts in my header,php, but it just won't work if I don't use ID.

Sorry I had forgotten to include that.....

http://www.bestallinclusive.com/azul/test/

Click on the hideous green button that says "click for a free quote" - not finished with any of the styling until I can get it working.

Hmmm......so even though I already have the appropriate scripts enqueued in the header.php file, they need to be enqueued a second time?

I tried to post here (both with and without the backticks) the relevant lines from my header.php file to show that I am enqueuing the scripts and calling the appropriate .js files for the datepicker and it's customizations, but I get an error message from FireHost about blocking my post.

I have the script calls and enqueuing just above my wp_head(); line......where else should I be enqueueng the gravforms scripts to make this work? The part on the page that calls the second gravity form for displaying in the overlay is inline - as the fancybox example did it - I could not make it work by calling any type of external file on which the form was called, inline HTML/PHP was the only way I can get the overlay to display the form.

Hi Rob,

The datepicker code is definitely in the file called jquery-ui-1.7.2.custom.min.js, and the snippet of code that adds the calendar icon and ties the two dates together is in the RFQCal(x).js, with the x being the ID number of the form that uses it.

I didn't realize that the conditional logic for Gravity Forms was being called twice - I did add it manually to my header and I guess it's also being added by the plugin so I'll remove the first instance.

The datepicker works as expected on the page, just not in the overlay. And I know it's finding at least the custom code for the icon since they do show - it just won't accept input in the boxes for the dates, and it won't show the calendar when clicked.

Bingo!

I couldn't get the cbox_complete method to work, most likely because of my lack of coding knowledge, but this was totally helpful enough that by looking at examples elsewhere on using the callback (onComplete) method I could get it to work.....woo hoo!

THANK YOU!