What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    I can't get the lightbox to work... can anyone help?

    Asked by granulka on June 14, 2011 at 07:20 AM

    I've created my first form... no probs there (well impressed with jotform) and I can get it to open as an iframe, pop-up window, etc.

    But, I really like the lightbox option to embed the code in my site and it simply won't open. I've added it to a button image aswell as simply copying the code provided on the jotform website.... but to no avail.

    Could other javascript on the page be interfering with the jotform script?

    Are lightboxes in general less likely to open across all browsers? ie Am I shooting myself in the foot by picking the better looking method of presenting the form but not everyone will be able to access it?

    Thanks in advance for any help you can provide.

     

     

    Page URL:
    http://www.drivings-cool.com/test2/contact.php

  • Profile Image

    Answered by granulka on June 14, 2011 at 09:22 AM

    The lightbox code works fine on it's own in a blank doc but not in a 'new page from template' page (I'm using dreamweaver). It must be something to do with my 'other code'. If anyone can help spot it I'd be very grateful.

    Here's the code for my template with the lighbox added to main-content div:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>3-Column, Fixed-Width Layout with CSS</title>
    <link target="_blank" href="template stylesheet.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" target="_blank" href="styles.css" />
    <script language="javascript" src="matching_columns.js"></script>
    <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
    <script type="text/javascript">

    function MM_effectAppearFade(targetElement, duration, from, to, toggle)
    {
        Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    }
    </script>
    <!-- two lines that follow are for the jquery side of the navigation -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/nav_script.js"></script>
    <!--BEGIN Call Me Back Web Site Code------------------------------------------>
    <script language="JavaScript">
    <!--
    var popWin = null    // use this when referring to pop-up window
    var winCount = 0
    var winName = "popWin"
    function openPopWin(winURL, winWidth, winHeight, winFeatures, winLeft, winTop){
      var d_winLeft = 20  // default, pixels from screen left to window left
      var d_winTop = 20   // default, pixels from screen top to window top
      winName = "popWin" + winCount++ //unique name for each pop-up window
      closePopWin()           // close any previously opened pop-up window
      if (openPopWin.arguments.length >= 4)  // any additional features?
        winFeatures = "," + winFeatures
      else
        winFeatures = ""
      if (openPopWin.arguments.length == 6)  // location specified
        winFeatures += getLocation(winWidth, winHeight, winLeft, winTop)
      else
        winFeatures += getLocation(winWidth, winHeight, d_winLeft, d_winTop)
      popWin = window.open(winURL, winName, "width=" + winWidth
               + ",height=" + winHeight + winFeatures)
      }
    function closePopWin(){    // close pop-up window if it is open
      if (navigator.appName != "Microsoft Internet Explorer"
          || parseInt(navigator.appVersion) >=4) //do not close if early IE
        if(popWin != null) if(!popWin.closed) popWin.close()
      }
    function getLocation(winWidth, winHeight, winLeft, winTop){
      return ""
      }
    function getLocation(winWidth, winHeight, winLeft, winTop){
      var winLocation = ""
      if (winLeft < 0)
        winLeft = screen.width - winWidth + winLeft
      if (winTop < 0)
        winTop = screen.height - winHeight + winTop
      if (winTop == "cen")
        winTop = (screen.height - winHeight)/2 - 20
      if (winLeft == "cen")
        winLeft = (screen.width - winWidth)/2
      if (winLeft>0 & winTop>0)
        winLocation =  ",screenX=" + winLeft + ",left=" + winLeft
                    + ",screenY=" + winTop + ",top=" + winTop
      else
        winLocation = ""
      return winLocation
      }
    //-->
    </script>
    <!--END Call Me Back Web Site Code------------------------------------------->
    <link rel="shortcut icon" target="_blank" href="http://www.drivings-cool.com/favicon.ico" rel="nofollow noopener" type="image/vnd.microsoft.icon" />
    <!--END Favicon Code------------------------------------------->
    <meta property="og:title" content="DRIVING&#039;S COOL - Designer Driving Lessons" />
    <meta property="og:type" content="company" />
    <meta property="og:url" content="http://www.drivings-cool.com" />
    <meta property="og:image" content="http://www.drivings-cool.com/images/facebook-image.jpg" />
    <meta property="og:site_name" content="Driving&#039;s Cool" />
    <meta property="fb:admins" content="100000529690618" />
    <!--END Open Graph Tag for Facebook like button------------------------------------------->
    </head>
    <body>

    <div id="wrapper">
      <div id="header"><img src="images/DCLogoTransparent.png" alt="Driving's Cool" width="980" height="110" onload="MM_effectAppearFade(this, 2000, 0, 100, false)">
      </div><!--end of header-->
    <div id="navHolder">
          <div id="navigation">
             <ul class="menuUL">
             <!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: -->
                    <li><a target="_blank" href="index.php" class="house">Home</a></li>
                     <li><a target="_blank" href="drivingTips.php" class="video">Driving Tips</a></li>
                     <li><a target="_blank" href="gallery.php" class="gallery">Gallery</a></li>
                    <li><a target="_blank" href="prices.php" class="info">Prices</a></li>
                     <li><a target="_blank" href="linkman" class="glove">Links</a></li>
                     <li><a target="_blank" href="franchise.php" class="mini">Franchise</a></li>
                     <li><a target="_blank" href="contact.php" class="envelope">Contact</a></li>
                    <li><a target="_blank" href="guestbook" class="smile">Testimonials</a></li>
          </ul>   
               
          </div> <!--end of navigation-->
        <div id="textRight">
       53 East Crosscauseway, Edinburgh, EH8 9HG   |      
          0131 622 2206</div>
        <div class="clear"></div>
    </div> <!--end of navHolder-->
          <div id="roofline"></div>
      <!--end of roofline-->
       
           
      <div id="column-left">
    <div id="column-bottom-left" class="column"></div>
        </div>
    <div id="column-center" class="column">
      <div id="stage">   
        <!-- The dot divs are shown here -->
        </div>
      <div id="main-content" class="glass">
        <div id="mirror">
          <div id="navigation">
            <ul class="mirrorMenu"><li><a target="_blank" href="bookOnline.php" class="computer">Book&nbsp;Online</a></li>
              </ul>
            </div>
          </div>
        <!-- end of mirror-->
        <h2>Sample Heading</h2>
        <p>&nbsp;</p>
       
        <script src="//www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'11633040963',
    base:'http://www.jotform.com/',
    windowTitle:'Request Lessons',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:2,
    height:520,
    width:700
    });
    </script>
    <a id="lightbox-11633040963" style="cursor:pointer"><img src="images/book_online_button.jpg" width="116" height="32" alt="book online button"/><br /></a>
       
       
        </div>
      <!--end of main content-->
      <div id="extra-info" class="glass">
        <h2>We'll Pay the Call</h2>
        <p>No waiting about either... Click and we'll connect you instantly! How's that for service?</p>
        <p>&nbsp;</p>
        <div align="center"><a target="_blank" href='JavaScript:openPopWin("http://www.voipfone.co.uk/callmeback.php?code=622af32094719d1d", 350, 400, "", 20, 20)'><img src="images/call-me-back.png" alt="Click to have us call you" width="120" height="60" border="0"></a> </div>
        <p>&nbsp;</p>  <div id="fb-root"></div><script src="//connect.facebook.net/en_US/all.js#appId=167213706674553&amp;xfbml=1"></script><fb:like target="_blank" href="http://www.drivings-cool.com" rel="nofollow noopener" send="true" layout="button_count" width="90" show_faces="false" colorscheme="dark" font=""></fb:like>
        </div>
      <!--end of extra info-->
    </div>
      <!--end of column-center-->
      <div id="column-right">
      <div id="column-bottom-right" class="column"></div>
        </div>
       
      <div id="footer">
    <div id="testimonials">
          <ul>
            <?php
               
                    $xmlFile = 'xml/testimonials.xml';
                    $xslFile = 'xml/transform.xml';
                   
                    $doc = new DOMDocument();
                    $xsl = new XSLTProcessor();
                   
                    $doc->load($xslFile);
                    $xsl->importStyleSheet($doc);
                   
                    $doc->load($xmlFile);
                    echo $xsl->transformToXML($doc);
               
                ?>
          </ul>
        </div>
      </div> <!--end of footer-->
    <div id="Copyright-Nav-Holder">
          <div id="navigation">
             <ul class="menuUL">
             <!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: -->
                    <li><a target="_blank" href="index.php" class="house">Home</a></li>
                    <li><a target="_blank" href="drivingTips.php" class="video">Driving Tips</a></li>
                     <li><a target="_blank" href="gallery.php" class="gallery">Gallery</a></li>
                    <li><a target="_blank" href="prices.php" class="info">Prices</a></li>
                     <li><a target="_blank" href="links.php" class="glove">Links</a></li>
                     <li><a target="_blank" href="franchise.php" class="mini">Franchise</a></li>
                     <li><a target="_blank" href="contact.php" class="envelope">Contact</a></li>
                    <li><a target="_blank" href="guestbook" class="smile">Testimonials</a></li>
                
          </ul>   
          </div> <!--end of copyright-navigation-->
        <div id="textRight">
          <p><strong>Driving's Cool &copy; 2003-2011 All Rights Reserved.</strong></p>
        </div>
        <div class="clear"></div>
    </div>
    <!--end of copyright-nav-Holder-->
    </div><!--end of wrapper-->
    <!-- JQuery library and js file for testimonials -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="Scripts/testimonials_script.js"></script>
    </body></html>

  • Profile Image

    Answered by granulka on June 14, 2011 at 09:41 AM

    I got it...

    The php script at the bottom is stopping it working.

    Anyone know why?

    Or a workaround so I can keep my lightbox and my php code?

    Ta

  • Profile Image

    Answered by granulka on June 14, 2011 at 10:18 AM

    in case it helps anyone else....

     

    I got it working and kept my php script the code:

    <!-- JQuery library and js file for testimonials -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="Scripts/testimonials_script.js"></script>

    which was at the end of the body tag is now moved to the end of the head tag and all is well.

     

    Phew!

  • Profile Image
    JotForm Support

    Answered by mliz on June 14, 2011 at 09:49 PM

    Hi,

    Good to know that this was all sorted out.

    Thank you for posting the information as well.

    Best Regards,
    Mliz

  • Profile Image
    JotForm Support

    Answered by NeilVicente on June 14, 2011 at 10:15 PM

    Hi granulka,

    I've just taken a look at your site and found out that your lightbox button isn't working. Upon inspecting the source code, I discovered that you have embedded the lightbox codes twice, which as far as I know, would not work.

    I advise that you remove one of those embed codes to make your lightbox form work. Hope this helps.


    Neil