Installing Lightbox in DNN (DotNetNuke)

  • Profile Image
    TrainingAdvisor
    Asked on March 17, 2014 at 08:53 PM

    Hi,

     

    Really hope that I can get some assistance on this. I am currently trying to install lightbox forms using JotForm on our website that operates on DNN v6. 

    All other code's work on the site includign popup's. This is the code I am dropping into the iframe.

    Thanks.

    Matt

     

    <script src="//cdn.jotfor.ms/static/feedback.js?3.2.929" type="text/javascript">

    new JotformFeedback({

    formId:'40520457613852',

    base:'http://jotform.co/',

    windowTitle:'Ask a Question',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-40520457613852" style="cursor:pointer;color:blue;text-decoration:underline;">Ask a Question</a>

  • Profile Image
    jonathan
    Answered on March 17, 2014 at 10:12 PM

    Hi Matt,

    Can you please share to us the URL of your DNN website where we can test the form? We need more details to be able to provide the appropriate response and give suggestions.

    Using the JotForm guide https://www.jotform.com/help/189-How-to-add-a-form-to-DotNetNuke ,
    you may also try embedding the lighbox code into the html widget of the DNN editor

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

  • Profile Image
    TrainingAdvisor
    Answered on March 17, 2014 at 10:46 PM

    Hi Jonathan,

     

    Thanks for this, I have no problem installing iframe or popup code this way in DNN. But light box code does not work this way. I input the code and click the link and nothing happens... 

    The site is not currently on the web so can't share the link publically sorry.

     

    Matt

  • Profile Image
    TrainingAdvisor
    Answered on March 17, 2014 at 10:47 PM

    How can I install Lightbox's using Jotform in DNN? might be a better question for me to ask.

     

    Thanks,

     

    Matt

  • Profile Image
    jonathan
    Answered on March 17, 2014 at 11:29 PM

    Hi Matt,

    What I think you can do is embed first the lighbox code to a separate webpage then use that webpage as the source page when in the iframe code you will embed in the DNN html widget.

    Steps:

    1. Create new blank page i.e. http://mywebsite.com/testblank.html 

    2. Using the new page, add the lightbox code to it.

    3. Use the iframe code to embed the created page in step#1  into the DNN html widget. The iframe code should look similar to this

    <iframe allowtransparency="true" src="//mywebsite.com/testblank.html" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="no"></iframe>

    noticed the highlighted src referring to the created external page.

    Hope this help. Inform us if you need further assistance.

    Thanks.

     

  • Profile Image
    TrainingAdvisor
    Answered on March 18, 2014 at 02:18 AM

    When you say add the code to that page do you mean the headero or skin? or a module on that page?

     

    Thanks,

     

    Matt

  • Profile Image
    TrainingAdvisor
    Answered on March 18, 2014 at 02:54 AM

    I fixed the issue by swithching from the Rich Editor to the Basic Editor and applying the code in text html.

     

    I used this code.

    <script src="//cdn.jotfor.ms/static/feedback.js?3.2.930" type="text/javascript">new JotformFeedback({formId:'40520457613852',base:'http://jotform.co/',windowTitle:'Ask a Question',background:'#FFA500',fontColor:'#FFFFFF',type:false,height:350,width:550});</script><a class="lightbox-40520457613852" style="cursor:pointer;color:blue;text-decoration:underline;"><img alt="Ask a question button" src="/portals/0/Buttons/Internal%20BB%20Nav/BB%20Ask%20a%20Question.jpg" longdesc="Ask a question button opens a lightbox form" style="width: 180px; height: 50px;" /></a>

     

    Thanks,

     

    Matt

  • Profile Image
    TrainingAdvisor
    Answered on March 18, 2014 at 03:10 AM

    I should also add that to get it to work on DNN you cannot have duplicate code on the same page or it will get confused and open more than one light box. I also did as Jon advised and installed the full script on a test page, check it worked then recopied the shortened code to the pages it is to be used on.

     

    Cheers,

     

    Matt