Navigation bar with Lightbox

  • Profile Image
    Leegor
    Asked on July 28, 2011 at 05:24 PM

    How do you code a navigation bar link with a lightbox form? I would like the client to click "apply now" in the nav bar and have the form pop up. Is this possiple?

     

    Thanks to Jotform's great support team.

  • Profile Image
    allanftd
    Answered on July 29, 2011 at 02:42 AM

    Hi Leegor,

    Thank you for your message. For us to provide a more accurate response, may we ask for the URL of the webpage where you intend to embed your lightbox form? We'd like to eliminate the possibility of having JotForm's scripting conflict with your own scripts.

    We'll await your response so that we can assist you further. Thanks for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    Leegor
    Answered on July 29, 2011 at 09:42 AM

    I'm not live yet but here is part of the html code if that's what you're after. The only other script on the page is a button that links to Jotform/Lightbox. It's the "apply now" link in the nav bar that I'd like Lightbox form to pop up from if possible.

    Thanks!

      <div id="menu">
        <ul>
            <li><a target="_blank" href="#url">How do I Qualify?</a></li>
            <li><a target="_blank" href="#url">Bad Credit Car Loans</a></li>
            <li><a target="_blank" href="#url">Apply Online Here</a></li>
            <li><a target="_blank" href="#url">FAQ</a></li>
            <li><a target="_blank" href="#url">Contact Us</a></li>
            <li><a target="_blank" href="#url">Privacy Policy</a></li>
        </ul>
     </div>
    <div id="features">

    <ul><li class="col2">
    <h2 align="center" style="padding-bottom:15px;">Ontario Car Loans</h2>

    <p></p>
    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'11654703253',
    base:'http://www.jotform.com/',
    windowTitle:'Application',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:1,
    height:525,
    width:550,
    });
    </script>
    <a class="lightbox-11654703253" style="cursor:pointer;color:blue;text-decoration:underline;"><h4 align="center"><img align="right" src="images/torontocarloanbadcreditb.png" alt="Car Loan Toronto" ></h4></a>

  • Profile Image
    allanftd
    Answered on July 29, 2011 at 11:51 AM

    Hi Leegor,

    I hope I understood your question correctly. If you mean you want a lightbox form both in the navigation menu and another one as a button somewhere in the samepage. If so, there should be no conflict if you try the code below:

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'11654703253',
    base:'http://www.jotform.com/',
    windowTitle:'Application',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:1,
    height:525,
    width:550,
    });

    </script>
    <div id="menu">

        <ul>
            <li><a target="_blank" href="#url">How do I Qualify?</a></li>
            <li><a target="_blank" href="#url">Bad Credit Car Loans</a></li>
            <li>
    <a class="lightbox-11654703253" style="cursor:pointer;color:blue;text-decoration:underline;">Apply Online Here</a></li>
            <li><a target="_blank" href="#url">FAQ</a></li>
            <li><a target="_blank" href="#url">Contact Us</a></li>
            <li><a target="_blank" href="#url">Privacy Policy</a></li>
        </ul>
     </div>
    <div id="features">

    ...some content here...

    <a class="lightbox-11654703253" style="cursor:pointer;color:blue;text-decoration:underline;"><h4 align="center"><img align="right" src="images/torontocarloanbadcreditb.png" alt="Car Loan Toronto" ></h4></a>

    Please let us know if this addresses your concern correctly. Thank you for using JotForm!

    JOTFORM SUPPORT


  • Profile Image
    Leegor
    Answered on July 29, 2011 at 01:20 PM

    Thank you so much that worked perfectly!

    If I add a mouseover script will that conflict at all?

  • Profile Image
    allanftd
    Answered on July 29, 2011 at 09:55 PM

    Hi Leegor,

    Thanks for the update. I believe it should still work fine. Some factors to consider are the browser compatibility and how you plan to implement the mouseover script (a:hover CSS script or onmouseover Anchor attribute).

    Please let us know if you need further assistance. Thank you for using JotForm! 

    JOTFORM SUPPORT