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

    Map a portion of an image to a lightbox

    Asked by haskam on December 10, 2013 at 03:04 AM

    Hi

    I would like to know iif it is possible to embed the the lightbox code into an image, similar to an image map. For example when a user clicks a certain area on an image on my site, the lightbox pop up will emaerge. 

    Is this possible? And if so, How would I go about that?

     

    Thanks in advance.

    lightbox form image on lightbox image background lightbox background map image lightbox
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 10, 2013 at 05:12 AM

    Hi there,

    Yes that's possible. You can trigger the lightbox form by adding the lightbox class on your image code.

    Example on this lightbox embed code.

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

    new JotformFeedback({

    formId:'33432018594958',

    base:'http://jotformpro.com/',

    windowTitle:'Test Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-33432018594958" style="cursor:pointer;color:blue;text-decoration:underline;">Test Form</a>

    Just copy the class (strings in blue color) and put it on your image code under class attribute.

    Example:

    <img src="sampleimage.png" class="lightbox-33432018594958"/>

    If you still have difficulties about this, let us know here. Thanks!

  • Profile Image

    Answered by haskam on December 10, 2013 at 08:33 AM

    Hi,

    Thanks for the quick response. But I still need a little more help, as I am a novice here.

    Given the example you sent me, I.m still not sure exactly sure to paste the code. Where should I put what in the following code.

    This is the html code for the page I want the form code to go on including the image:

    <p>The budget package is designed for those that want to start out on a small budget but don't want to compromise quality</p>

    <p><img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design.jpeg" alt="budget package webdesign" width="650" height="410" /></p>

     

    And this is the coordinates for where I want the code to be clickable in the image: 221,308,408,339 I hope this helps. 

    Thanks again for your help!

    Regards

    Hassan

     

  • Profile Image

    Answered by EliezerN on December 10, 2013 at 10:39 AM

    @Hassan

    Do you need something like this: Light box Form

    I accomplished that by inserting the code of the image between the <a> tags of the light box code, example:

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

    new JotformFeedback({

    formId:'33433929023',

    base:'http://jotformpro.com/',

    windowTitle:'Contact Us',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-33433929023" style="cursor:pointer;">

    <img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design.jpeg" alt="budget package webdesign" width="650" height="410" />

    </a>

    The orange highlighted code is the the one for the light box form, the green highlighted code is for the hyperlink which if it's clicked the light box will appear, the blue one is the code of your image.

    Now, about the coordinates, I'll need to make some research to know where to define them or to add them to the code. I will notify you if can find how to define the coordinates, or maybe my colleague EltonCris can give us a hand with that.

    Will let you know if I can find some help.

    Thanks

  • Profile Image

    Answered by haskam on December 10, 2013 at 02:34 PM

    Hey 

    Yeah that is exactly how I want it to work, except only the order button would be clickable and not the entire picture. 

    To get the coordinates that I sent in the previous email, I used http://www.image-maps.com/ to get the right location for the link to go. I just got stuck when I didn't know where or how I should insert the lightbox code into the image on the next stage.

     

    Any solution you can find for this problem of mine will save me a lot of money, so I really appreciate all the fantastic support you have given me. 

     

    Regards 

    Hassan 

  • Profile Image

    Answered by EliezerN on December 10, 2013 at 06:07 PM

    @Hassan

    I wasn't able to find a way to use the coordinates you provided, however, I found an alternative solution using CSS codes. Please check this example: Light-box form

    You can find the whole HTML code I used here: http://pastiebin.com/52a79c19334ff

    However it has the Lightbox code of one of my form, I would be more than glad to elaborate the code for you using your own form code so that you can save all that work, but first I would need you to share the lightbox code of your form so that I can proceed to elaborate the code. 

    We'll wait for your reply so that we can help you to accomplish what you need.

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 10, 2013 at 06:11 PM

    In addition to my colleague, you can apply specific class or links on the specific coordinates of your image using HTML map tag. http://www.w3schools.com/tags/tag_map.asp

    Please let us know the website URL with the image that'd you'd like to link the lightbox form so we can check it here and provide you the map code. Meanwhile, you can try my colleagues solution, it should also work.

    Thanks!

  • Profile Image

    Answered by haskam on December 11, 2013 at 08:43 AM

    Hi Guys,

    My lightbox code is as follows:

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

    new JotformFeedback({

    formId:'33377495261360',

    base:'http://jotformeu.com/',

    windowTitle:'Budget Package - Web Design Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-33377495261360" style="cursor:pointer;color:blue;text-decoration:underline;">Budget Package - Website Design Form</a>

    THanks for all the help!!

  • Profile Image

    Answered by haskam on December 11, 2013 at 08:46 AM

    Oh and just to add, this is the html code of the page it needs to go on:

     

    <p>The budget package is designed for those that want to start out on a small budget but don't want to compromise quality</p>

    <p><img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design.jpeg" alt="budget package webdesign" width="650" height="410" /></p>

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 11, 2013 at 09:09 AM

    Hi,

    Ok here's how. Embed your lightbox script without the without the hyperlink tag anymore.

    Example:

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

    new JotformFeedback({

    formId:'33377495261360',

    base:'http://jotformeu.com/',

    windowTitle:'Budget Package - Web Design Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-33377495261360" style="cursor:pointer;color:blue;text-decoration:underline;">Budget Package - Website Design Form</a>

    And then replace your image code with the following.

    <p><img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design.jpeg" alt="budget package webdesign" width="650" height="410" usemap="#imgmap"/></p>

    <map id="_imgmap" name="imgmap">

    <area shape="rect" coords="214,300,415,343" class="lightbox-33377495261360"  target="_blank" href="javascript:void(0);" />

    </map>

    It should work similar to this: https://shots.jotform.com/elton/workaround/sample_image_map.html

    If you need further assistance, let us know here. Thanks!

  • Profile Image

    Answered by haskam on December 11, 2013 at 12:44 PM

    Hey Guys 

    It worked like a charm!

    However, when i try to do the same on my other forms, using the example above as a guide, I get 2 problems. Firstly the wrong form will come up! The form given above in the example still comes up even though I change the form name and ID, plus using a different form code for a different form, and i still get the same problem of the "budget PAckage" form still coming up instead.

    Second, The clickable area comes up in the wrong place even though I change the coordinates for it.

    What values do I have to change to make sure it is cinsistent and works as it should for different pages?

    I have added the full page code below of one the pages I am trying to embed a form into: you can see I have used the same method as the one you gave me but still get wierd results. Please tell me what is wrong ith the following;

     

    <script type="text/javascript" src="//cdn.jotfor.ms/static/feedback2.js?3.1.1363">// <![CDATA[

    new JotformFeedback({

    formId:'33413433089351',

    base:'http://jotformeu.com/',

    windowTitle:'Kickstarter Package - Web Design Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    // ]]></script>

    <p>A package designed to give your business the best possible start and launch you off to strong growth. With this package you get 3 pages designed to your specifications with sliding banner, 1 email account, contact form + more!</p>

    <p><img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design_2.jpeg" alt="budget package webdesign" width="650" height="440" usemap="#imgmap" /></p>

    <p><map id="_imgmap" name="imgmap"> 

    <area class="lightbox-33413433089351" shape="rect" coords="225,425,415,455" target="_blank" href="javascript:void(0);" />

     </map></p>

  • Profile Image

    Answered by pinoytech on December 11, 2013 at 02:45 PM

    Hi,

    Would you mind if we ask your website url where your form is embedded for us to investigate the issue and for further assistance?

    Thanks,

  • Profile Image

    Answered by haskam on December 12, 2013 at 03:44 AM

    http://antimac.meloncreative.co.uk/preview/hotformations/web-design-and-branding/web-design.html

    On the page you can see what I'm trying to achieve. If you look through the different tabs, you can try and click the order no button and you will see the clickable area is in the wrong place and then brings up the rong form.

    Thanks!

  • Profile Image

    Answered by EliezerN on December 12, 2013 at 11:35 AM

    Thanks for sharing with us the URL.

    Did you already try changing the value for "usemap" and "name" to a different one?

    <p><img style="vertical-align: middle;" src="//www.meloncreative.co.uk/preview/hotformations/images/originals/web_design_2.jpeg" alt="budget package webdesign" width="650" height="440" usemap="#imgmap" /></p>

    <p><map id="_imgmap" name="imgmap"> 

    <area class="lightbox-33413433089351" shape="rect" coords="225,425,415,455" target="_blank" href="javascript:void(0);" />

     </map></p>

    If not, please give it a try. I think that would do the difference.

    Please inform us if you need further assistance.

    Thanks

  • Profile Image

    Answered by haskam on December 12, 2013 at 02:42 PM

    Hi 

    What exactly should I change the "usemap" and "name" values to?

     

    Also would you like backend access to my development site, to have a look?

     

    Thanks for the help!

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 12, 2013 at 03:49 PM

    Hi there,

    I checked your site and the first tab with the clickable order now button works fine.

    However, the rest from the other tabs are not clickable. Is this where you are trying to implement the lightbox form also? If you are using the same form, just use the same image map name on your other images as seen on my colleagues example:

    Example:

    <map id="_imgmap" name="imgmap"

    <area class="lightbox-33413433089351" shape="rect" coords="225,425,415,455" target="_blank" href="javascript:void(0);" />

     </map>

    To position the clickable area on the image, you have to adjust the coordinates (blue numbers above). To generate image mapping coordinates, please use this tool. http://www.maschek.hu/imagemap/

    Follow this guide:

    If you require further assistance, let us know here. Thanks!