PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Need help getting form to work in overlay

  1. Trisha
    Member

    I need to have a form display in an overlay and am using the Colorbox jquery code for the overlay. I have a link on a page with the rel="lightbox" and have tried linking to both a .php file and a .html file with no luck. The colorbox code works great on all other links where I'm just displaying some straight HTML. The problem is that I need to use PHP to call the gravity form.

    What happens is that when I have the link call the .php file, I get the error message:
    Fatal error: Call to undefined function gravity_form() in [followed by my filename and line number]

    Although it shouldn't be necessary, since they're already in the header.php file, I added to the .php file the calls to the various jquery and gravity forms scripts and stylesheets but still get that error message.

    When I link to the .html version, it displays nothing because it won't run the PHP from within an HTML file. When I add the line to my .htaccess file to run PHP in HTML, like so:

    AddType application/x-httpd-php .html

    then it wants to download the html file, not display it.....aaarrgh!

    I'm calling the colorbox script in my header.php like so:

    $(document).ready(function(){
    		$(".lightbox").colorbox({iframe:false, width:"875px", height:"85%"});
    	});

    What am I doing wrong? I'd rather use the colorbox overlay than simply pop up a new window to avoid problems with popup blockers or people accidentally clicking on another window and sending the form to the background.....I'm sure there must be something simple that I'm overlooking. Or is there an easier way?

    Posted 12 years ago on Friday May 11, 2012 | Permalink
  2. 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/

    Posted 12 years ago on Friday May 11, 2012 | Permalink
  3. Trisha
    Member

    Thanks for the very prompt response Rob.....I'll give this a try over the weekend and post my results back. :-)

    Posted 12 years ago on Friday May 11, 2012 | Permalink
  4. Trisha
    Member

    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?

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  5. You can't have the same form listed twice on the page as it will cause issues so that's going to be a no-go. Can you post a link to your form so I can see the calendar piece?

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  6. Trisha
    Member

    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.

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  7. How do I see the lightbox version of the form with the non-working calendar?

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  8. Trisha
    Member

    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.

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  9. 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:

    http://www.gravityhelp.com/documentation/page/Embedding_A_Form

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  10. Trisha
    Member

    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.

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink
  11. 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: Screenshot Are you manually placing any script files?

    Posted 12 years ago on Thursday May 17, 2012 | Permalink
  12. Trisha
    Member

    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.

    Posted 12 years ago on Monday May 21, 2012 | Permalink
  13. Hi Trisha,

    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.

    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):

    http://www.jacklmoore.com/colorbox

    Here is the example they have on their documentation modified to indicate where your code should go:

    [js]
    // Example of using an event listener and public method to build a primitive slideshow:
    $(document).bind('cbox_complete', function(){
       // your custom date picker code here
    });
    Posted 12 years ago on Monday May 21, 2012 | Permalink
  14. Trisha
    Member

    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!

    Posted 12 years ago on Monday May 21, 2012 | Permalink
  15. Awesome, Dave is the man. Glad you got it working!

    Posted 12 years ago on Tuesday May 22, 2012 | Permalink

This topic has been resolved and has been closed to new replies.