Jane
Member
Hi all,
Just wondering how I would get an effect similar to Traffic Regenerator. I know that's just one of many - but it's the sort of thing someone wants done.
Is it possible to use another wordpress plugin and insert a Gravity Form right into it?
And what technology does it use? AJAX or javascript?
Thanks!
It's probably just Javascript. I'm not sure. I am sure that it's really annoying. It looks like there are some third party plugins to do similar stuff but I have no idea if they will work with Gravity Forms or not.
Jane
Member
Thanks Kevin. This is what I was after: http://forum.gravityhelp.com/topic/form-in-modal-lightbox-window
And your answer, http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/
Jane
Member
So I followed your instructions, and a had a problem with the header file. Downloaded 1.2.1 from http://fancybox.net/ and it gave me this error: http://cl.ly/929499eb2c659647f433
Using Wordpress 3.0.1
Steps taken:
1. Install fancybox zipped folder (could not activate because of prob with header)
2. Added script to <head> in theme header.php
3. Created plainpage.php (exact code) in root theme folder
4. Created new form sub-page under Main Page and changed template to "plain page" (didn't exclude pages yet)
5. Added code to "Main Page": http://pastie.org/1137522
6. Click on link and the form opens, same window in an un-themed page (where I assume the problem is the original fancybox installation is not working)
Tried installing Fancybox for Wordpress but no luck, and didn't really know what instructions to follow. http://blog.moskis.net/downloads/plugins/fancybox-for-wordpress/
The original topic was closed, so had to continue the discussion here. Thanks for the help!
Did you try to install the FancyBox script via the plugin installer? From the error you posted, it looks like that might be the case. If so, that's probably the issue. It's not a WordPress plugin, just a standalone script.
You just need to unzip the fancybox zip file, then upload the "fancybox" folder with the scripts and images via ftp to your theme directory. Once you've done that, you just need to make sure you have the paths correct for the scripts, CSS, etc.
The other steps look fine. It sounds like you just need to get the scripts put in the right place and linked up.
Jane
Member
Sorry for the delay. I've replicated the steps on my live site and still no luck. Here are some screenshots.
Here's where I've put fancybox:
http://cl.ly/58c16fb11c9a9b7ef397
The contents:
http://cl.ly/d282f8a0f2b0f38d19a5
header.php (I note in the video you mention wp_header as necessary, but it's not in your code):
http://cl.ly/457705145016c1a7c462
plainpage.php:
http://cl.ly/1e5e0676e97f123973c9
The launch page:
http://cl.ly/78ef3a3f0e6b605774d9
Form embedded in a page:
http://cl.ly/01a89af3f30a7c4580eb
Can you share a link to the page you want to launch the form from? It will be easier to debug if I can see it.
Also, I noted on your plain form page at http://campaignit.com.au/test-page/test/ that the path to the jQuery .js file is incorrect. You'll want to adjust that so things like the datepicker, conditional logic, etc. will work properly.
As a note, the 1.4 version of GF released yesterday includes an option to submit the form via ajax. This means that the page doesn't have to refresh, and you can use other popup options that don't have to rely on using the iframe & plainpage template approach. Here's a link to some info on that.
http://www.seodenver.com/gravity-forms-ajax/
Most of the modal window scripts allow you to wrap a div around inline content such as a form shortcode and then launch it in the modal window. The problem before was when the form refreshed the page, if the validation failed, the modal window was closed and you couldn't see it. With the ajax submission enabled, this isn't an issue now and you have a lot more options.
Fancybox was one that supported modal iframes so it was my choice for the original tutorial but you should be able to use any of these as well.
http://speckyboy.com/2009/03/31/10-image-and-gallery-lightbox-solutions-for-wordpress-plugins/
Kathy
Member
Is this code from the original article about creating a form in a modal window correct?
<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/includes/js/jquery-142.js?ver=1.4.1'></script>
Also, <?php wp_head(); ?> is missing from the plain page template.
The code worked as of the last post revision. The wp_head() function was removed from the plainpage.php template so other unnecessary scripts weren't loaded and the Gravity Forms scripts were pathed to manually.
It doesn't really matter as long as you adjust the path in the code to point to wherever the jQuery script file is actually located.
