- TwitterthonsAsked on November 13, 2011 at 01:06 PM
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.
- allanftdAnswered on November 13, 2011 at 01:29 PM
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.
- TwitterthonsAnswered 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.
windowTitle:'How Twitterthons Work!',
<a class="lightbox-13162100954" style="cursor:pointer;color:blue;text-decoration:underline;">How Twitterthons Work!</a>
- JotForm SupportidarktechAnswered on November 14, 2011 at 02:48 AM
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>
<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!
- TwitterthonsAnswered on November 14, 2011 at 02:53 AM
Thanks, I will give it a try.
- TwitterthonsAnswered 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.
- paoloumaliAnswered 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.
windowTitle:'Contact Us Sample',
<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.
- twitterthonsAnswered on November 14, 2011 at 05:25 PM
Looking forward to your next solution.
- paoloumaliAnswered on November 14, 2011 at 11:10 PM
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.
- TwitterthonsAnswered 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!
- paoloumaliAnswered on November 15, 2011 at 04:57 AM