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.

Opening a Form in a Lightbox Window

  1. I'm trying to build a website, and one of the things I am trying to do is load a form in a sized lightbox window. Can anyone help in how I might go about doing this? Even just loading a sized blank target window would work. I just want to have the window open outside the main page.

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  2. Here's a blog post on using a form in a modal window. It should get you pointed in the right direction.

    http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  3. Well I just tried to do this and it opens the form on only the blank page (plainpage.php) with no text other than the form, no logo, nothing. I uploaded the fancybox to /public_html/domain (which is root on my sites) as well as adding the script to the header.php file. The window does not resize and does not open the framed modal window. Any thoughts?

    You can view the form at http://www.xtremedjs.info looking towards the bottom where the h3 is Contact Us.

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  4. It looks like you paths are incorrect. Your theme is looking for the fancybox files here..

    JS

    http://www.xtremedjs.info/wp-content/themes/Tauren/fancybox/jquery.fancybox-1.3.0.pack.js

    CSS

    http://www.xtremedjs.info/wp-content/themes/Tauren/fancybox/jquery.fancybox-1.3.0.css

    but the files aren't there. You need to either adjust the paths back to the root, or move the fancybox files into the theme folder.

    I personally would move the files into the theme, there will be less to have to change (CSS background image paths, etc.)

    I'm pretty sure once you have the paths correct, you'll be up and running.

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  5. I tried putting them into both and im still not seeing it

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  6. I checked and your paths are still wrong. I tried pathing directly to the .js and .css files and ended up on your 404 page.

    It looks like you're using a newer version of fancybox (version 1.3.1) so your filename is actually incorrect. You need to path to these files.

    JS

    http://www.xtremedjs.info/fancybox/jquery.fancybox-1.3.1.pack.js

    CSS

    http://www.xtremedjs.info/fancybox/jquery.fancybox-1.3.1.css

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  7. that is the current path but it still is not working :( What else could i be doing wrong?

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  8. Okay, I found your bug.. this should be it this time.

    in the jQuery definition.. there is a misspelling in the "autoscale" setting. "flase" should be "false"

    'autoScale' : false,

    I copied your markup, made the correction and you can see a working test version of your page here.

    Let me know if that works for you this time.

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  9. That did it. Thanks very much for the help Kevin! Saved my butt!

    Posted 12 years ago on Thursday April 8, 2010 | Permalink
  10. I'm glad I could help. We whittled it down to size and showed it who was boss!

    Posted 12 years ago on Friday April 9, 2010 | Permalink

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