Cannot see form or lightbox.

  • Profile Image
    Twitterthons
    Asked on November 13, 2011 at 01:06 PM

    I have a website that is a single image with many hotspots. Many of the hotspots are links to forms. I am using Dreamweaver and linked the hotspot to the form using an "OnClick" command - I used the Java Script Code given by JotForm (<script type="text/javascript" src="//form.jotform.com/jsform/13162100954"></script>) as the Java Script behavior.

    I expected the form to overlay the site using inside a lightbox. However, I'm seeing nothing.

     

    Please let me know what I am doing wrong.

  • Profile Image
    allanftd
    Answered on November 13, 2011 at 01:29 PM

    Hi Twitterthons,

    Thank you for your message. The default script that you used will embed your form within the webpage along with the other contents of your website. It is actually not intended to behave like a lightbox that floats on the webpage. You can achieve that effect by using either the Feedback embed code or the LightBox embed code in your Embed Form Wizard.

    Please try these options and let us know if it will work for you or not. 

    Allan
    JOTFORM SUPPORT

     

     

  • Profile Image
    Twitterthons
    Answered on November 13, 2011 at 03:22 PM

    Thank you. I embedded the code into the OnClick blank in Dreamweaver, however, I'm still getting nothing. Perhaps the code is supposed to be broken up but I'm not sure. Here is the website and the form is linked to a hotspot bounding the words "How it Works!" at the top of the page: http://twitterthons.com/Website.html. I made the very simple for now and simply loaded a picture into the form and will build it from there once I understand how the coding works. Please let me know what I should do.

    The embed code is: <script src="//www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'13162100954',
    base:'http://www.jotform.com/',
    windowTitle:'How Twitterthons Work!',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:1,
    height:500,
    width:750
    });
    </script>
    <a class="lightbox-13162100954" style="cursor:pointer;color:blue;text-decoration:underline;">How Twitterthons Work!</a>

  • Profile Image
    idarktech
    Answered on November 14, 2011 at 02:48 AM

    Hi,

    You can check this code as an example:

     

    <img src="http://www.idarktech.com/test/upload_button.png" onclick="document.getElementById('lightbox-13035601593').click()"></a>

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'13035601593',

    base:'http://www.jotform.com/',

    windowTitle:'UPLOAD',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:2,

    height:570,

    width:700

    }); 

    </script> 

    <input id="lightbox-13035601593" style="display:none" type="submit" value="lightbox"> 

     

    Just replace the Form ID, Form Title and Image Link, you can check here for the preview.

    Just inform us if you need further assistance. Thank you and have a great day!

  • Profile Image
    Twitterthons
    Answered on November 14, 2011 at 02:53 AM

    Thanks, I will give it a try.

  • Profile Image
    Twitterthons
    Answered on November 14, 2011 at 10:03 AM

    Thanks idarktech, but it didn't work - although it may be me and the way we're trying to do things and not the code.

    Maybe we are not explaining what we are trying to do properly. We want to link the activation of the form in a Lightbox to several hotspots on a single image so that when that hotspot is chosen the correct form is shown. The hotspots are presently link using ON CLICK commands that open the forms (without Lightoxes) in popup windows. We want to change that so that the forms instead upon up in Lighboxes over the parent page. The code you proposed will not accomplish that in its native form.

    Our site is located at http:howitworks.twitterthons.com. Please take a look at the source code and tell me what I need to replace in each each of the area shape/onclick couplets to change the action so the form comes up in a Lightbox as desired. For instance, what is the correct code that needs to be replaced in this couplet:

    <area shape="rect" coords="264,520,346,542" onclick="MM_openBrWindow('http://form.jotform.com/form/13164243873','LenaSignUp','resizable=yes,width=700,height=650')" />

    The lightbox embed code for one of our links is located in our previous postings above.
  • Profile Image
    paoloumali
    Answered on November 14, 2011 at 01:13 PM

    Hi, I strongly advise that you add content on your page for SEO. Although I haven't used image maps lately, you can easily add classes on those map areas.

    The script you embed for Lightbox would trigger an event whenever an element with a particular class is clicked.

    Here's a sample code.

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'12953920476',

    base:'http://www.jotform.com/',

    windowTitle:'Contact Us Sample',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-12953920476" style="cursor:pointer;color:blue;text-decoration:underline;">Contact Us Sample</a>

    Notice that anchor with class="lightbox-12953920476" ?

    Just make sure that your map areas are with the corresponding class and the right form will be loaded when such area is clicked.

     

    Please try something like below.

    <area class="lightbox-12953920476" shape="rect" coords="1070,660,1115,707" >

    That will trigger the lightbox when the area is clicked. Let me know if it works for you.

  • Profile Image
    twitterthons
    Answered on November 14, 2011 at 05:25 PM

    I appreciate the suggestion. Actually, this is prelaunch site to show how the launch site will work once it has been coded with CSS and is no longer just an an image with hotspots. In addition, we've asked quite a few people and no one seems to be able to tell us how to assign a hotspot to a class. Of course, it doesn't seem to be needed for what we want to do given that we don't need SEO at this stage of the site's development. Finally, it would seem that we are very close to what we want to do by simply modifying your suggestion. Couldn't we get the same results if we used a CLICKON statment for the hotspot and link it to a "Call Javascript command" and then put the code you suggested after the image map. And if we do this, which part of the code above would be the Javascript command to point to.

    Looking forward to your next solution.

    Thanks

  • Profile Image
    paoloumali
    Answered on November 14, 2011 at 11:10 PM

    I have yet to learn Prototype as I'm getting mixed up with my jQuery introduction when I learned JavaScript.

    But http://www.jotform.com/min/g=feedback is responsible for all things when embedding using the lightbox method. A quick search of lightbox will lead you to the portion specifying the events and listeners. What I'm sure of at the moment is that you may trigger the event by clicking a particular class which is specified when you use the JotForm code.

    I just made something up which you might just follow below. Please check the source code. Since you need several forms in a page, you have to create corresponding instances of those.

    http://goo.gl/x9uR7

  • Profile Image
    Twitterthons
    Answered on November 15, 2011 at 04:28 AM

    Paoloumali, YOU ABSOLUTELY ROCK! This is exactly what I needed and wanted. I was able to understand it and now can zip through and lay em' down - even if I use your example as a crutch. I now have one more question for you and it likely is just a modification of what you just showed me. I now want the link I have on one of the Lightbox forms, which opens up like I wanted it to, to open another Lightbox form on top of the one already showing. For instance, a light box form is covering the parent webpage and has a text link at the bottom that says, "Click here to see an example of a completed form." Since this link is not on the parent page but is instead on a server-side form, I can't use the same solution you taught me yesterday.

    Do you have a suggestion for this one?


    Thanks again, you really came through!

  • Profile Image
    paoloumali
    Answered on November 15, 2011 at 04:57 AM

    I'm afraid we won't be able to add any extra javascript within an iframe. If we find any other workaround, we will have it posted here.

    Wouldn't a small image within the lightbox form suffice? Under 'Power Tools', please try the Free Text (HTML) so you can embed an image. Apparently, that HTML option strips out any JavaScript as a security requirement.