https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay Gravity Support Forums Topic: Need help getting form to work in overlay en-US Tue, 21 Apr 2026 22:09:55 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59763 Mon, 21 May 2012 20:12:40 +0000 Rob Harrell 59763@https://legacy.forums.gravityhelp.com/ <p>Awesome, Dave is the man. Glad you got it working! </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59757 Mon, 21 May 2012 19:35:10 +0000 Trisha 59757@https://legacy.forums.gravityhelp.com/ <p>Bingo!</p> <p>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!</p> <p>THANK YOU! </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59752 Mon, 21 May 2012 18:39:46 +0000 David Smith 59752@https://legacy.forums.gravityhelp.com/ <p>Hi Trisha,</p> <p>It looks like your lightbox is grabbing the HTML of whatever element you specify (in this case the "lightboxpopup" element) and then adding it into the lightbox content area. The issue is, the events that were bound to the original form HTML are no longer bound to this copied form HTML. You need to reinitilized your date fields after the popup has been launched.</p> <p>What you'll want to do is bind your datepicker init scripts to colorboxes onComplete method or you can use event hooks (more info on their page):</p> <p><a href="http://www.jacklmoore.com/colorbox" rel="nofollow">http://www.jacklmoore.com/colorbox</a></p> <p>Here is the example they have on their documentation modified to indicate where your code should go:</p> <pre><code>[js] // Example of using an event listener and public method to build a primitive slideshow: $(document).bind(&#39;cbox_complete&#39;, function(){ // your custom date picker code here });</code></pre> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59656 Mon, 21 May 2012 13:08:54 +0000 Trisha 59656@https://legacy.forums.gravityhelp.com/ <p>Hi Rob,</p> <p>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.</p> <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59215 Wed, 16 May 2012 20:06:12 +0000 Rob Harrell 59215@https://legacy.forums.gravityhelp.com/ <p>Well, I viewed the source of your page. I def didn't see the date picker js anywhere. However, I did see two loads of jquery (both 1.7.1) and I see that there are two different Gravity Forms conditional logic JS files loading: <a href="http://www.evernote.com/shard/s212/sh/ddb80bb7-3506-440a-a7d7-2b8e76614cf9/cb54a6e3dae792a1e56cd9289f389f4f" rel="nofollow">Screenshot</a> Are you manually placing any script files? </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59213 Wed, 16 May 2012 19:44:49 +0000 Trisha 59213@https://legacy.forums.gravityhelp.com/ <p>Hmmm......so even though I already have the appropriate scripts enqueued in the header.php file, they need to be enqueued a second time? </p> <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59198 Wed, 16 May 2012 16:49:16 +0000 Rob Harrell 59198@https://legacy.forums.gravityhelp.com/ <p>Ah ha! It's because it's not including the datepicker js. Sounds like you just need to enqueue your scripts/styles for the form because of how you are placing it. See info here, all the way at the bottom:</p> <p><a href="http://www.gravityhelp.com/documentation/page/Embedding_A_Form" rel="nofollow">http://www.gravityhelp.com/documentation/page/Embedding_A_Form</a> </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59197 Wed, 16 May 2012 16:39:52 +0000 Trisha 59197@https://legacy.forums.gravityhelp.com/ <p>Sorry I had forgotten to include that.....</p> <p><a href="http://www.bestallinclusive.com/azul/test/" rel="nofollow">http://www.bestallinclusive.com/azul/test/</a></p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59185 Wed, 16 May 2012 15:46:59 +0000 Rob Harrell 59185@https://legacy.forums.gravityhelp.com/ <p>How do I see the lightbox version of the form with the non-working calendar? </p> https://legacy.forums.gravityhelp.com/topic/need-help-getting-form-to-work-in-overlay#post-59181 Wed, 16 May 2012 15:27:57 +0000 Trisha 59181@https://legacy.forums.gravityhelp.com/ <p>Thanks Rob - here's the live site with the form and calendar working on the left sidebar.......</p> <p><a href="http://www.bestallinclusive.com/azul/azul-beach/" rel="nofollow">http://www.bestallinclusive.com/azul/azul-beach/</a></p> <p>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:</p> <pre><code>$(function() { $(&quot;#input_6_5&quot;).datepicker( { &quot;showOn&quot;: &quot;both&quot;, &quot;numberOfMonths&quot;: 2, &quot;buttonImage&quot;: &quot;http://www.bestallinclusive.com/img/calendar.gif&quot;, &quot;buttonImageOnly&quot;: true, &quot;minDate&quot;: 0, &quot;onSelect&quot;: function(dateText, inst) { $(&#39;#input_6_6&#39;).datepicker(&#39;option&#39;, &#39;minDate&#39; ,new Date(dateText)); } } ); $(&quot;#input_6_6&quot;).datepicker( { &quot;showOn&quot;: &quot;both&quot;, &quot;numberOfMonths&quot;: 2, &quot;buttonImage&quot;: &quot;http://www.bestallinclusive.com/img/calendar.gif&quot;, &quot;buttonImageOnly&quot;: true, &quot;minDate&quot;: +1 } ); });</code></pre> <p>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. </p>