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

    How to use an image link for the lightbox form?

    Asked by Yuco on August 01, 2011 at 08:26 AM

    Hi all,

    I was just wondering what's the best way to use a image as a link to go to my popup form, not like a txt-link underneath the page.

    My idea was to put the img-link on a certain spot on the page.

     

    Thanks in advance!

  • Profile Image

    Answered by allanftd on August 01, 2011 at 09:23 AM

    Hi Yuco,

    You can still use the Pop-up embed code such as like this:

    <a target="_blank" href="javascript:void( window.open('https://www.jotform.com/form/12082918378', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Title Me</a>

    But change the highlighted text above to an image file so that it should look like this:

    <a target="_blank" href="javascript:void( window.open('https://www.jotform.com/form/12082918378', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))"><img src="//www.somewebsite.com/mybutton.gif"></a>

    An alternative solution is to use the following code

    <a target="_blank" href="https://www.jotform.com/form/12082918378" rel="nofollow" ><img src="//www.somewebsite.com/mybutton.gif"></a>

    In both instances, replace http://www.somewebsite.com/mybutton.gif with the URL of your hyperlinked button.

    Please try both of these methods and let us know if it will work for you or not. Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image

    Answered by Yuco on August 01, 2011 at 09:56 AM

    Wow,that was quick!

    Thank you very much indeed! I will try both of them and let you (here) know how it works for sure.

    As soon as it's finished I will post a link to the page also.

     

    Again,many thanks from Belgium

    Yuco

  • Profile Image

    Answered by Yuco on August 01, 2011 at 03:40 PM

    Hi again,

    I tried both of them out and the last one seemed to be best. Installed the part at the end of the html like this:


    </div>
    <a target="_blank" href="https://www.jotform.com/form/**********" rel="nofollow" rel="nofollow" ><img src="wpimages/wpc511ae60_06.png" width="320" height="232" border="0" id="pic_36" alt="" onload="OnLoadPngFix()" style="position:absolute;left:400px;top:507px;">
    </body>
    </html>

    (copying the whole page-code would be rather big I suppose)

    Only problem is...I don't get the "popup", just opening a new window with the form, and I realy don't have a clue why... Maybe because interfearance with other Javascripts.

    The page isn't online yet because I like to finish all to work before I upload it all.

    Yuco

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 01, 2011 at 04:15 PM

    Hi,

    With due respect to my colleague, I think he may have misunderstood your question. I do think that the popup you were referring to is the lightbox form, and that you want to use an image as the link to that form instead of the default blue text link.

    If I am correct in my assumption, replace the bolded part in your lightbox embed code with the html tag for your image. (Note: I did not include the script part of the embed codes to make this post shorter)


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

    So it becomes:

    <a class="lightbox-**********" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="wpimages/wpc511ae60_06.png" width="320" height="232" border="0" id="pic_36" alt="" onload="OnLoadPngFix()" style="position:absolute;left:400px;top:507px;" /></a>

     

    We hope this proves to be useful to you. Get back to us if you have further questions or concerns. Thank you!


    Neil

  • Profile Image

    Answered by Yuco on August 02, 2011 at 01:29 PM

    Hi once more,

    Neil, you were absolutly right. It was my fault because I had to say "Lightbox" instead of "popup", so I created confusion...my bad.

    This one is working perfectly it seems:

    <script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'***********',
    base:'http://www.jotform.com/',
    windowTitle:'Mail form',
    background:'#FFA600',
    fontColor:'#FFFFFF',
    type:false,
    height:600,
    width:700
    });
    </script>
    <a class="lightbox-***********" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="wpimages/wpc511ae60_06.png" width="320" height="232"
    border="0" id="pic_36" alt="" onload="OnLoadPngFix()" style="position:absolute;left:400px;top:507px;" /></a>

    Once again, thanks a LOT for your useful help!

    Yuco

  • Profile Image

    Answered by grifmang on May 13, 2012 at 04:13 AM

    Thanks alot guys. Not to bumo a dead thread, but just wanted to say this is exactly what I was looking for as well. Worked perfectly.

  • Profile Image
    JotForm Support

    Answered by jonathan on May 13, 2012 at 05:06 AM

    @grifmang,

    Glad you found this useful to your requirements.
    Feel free to contact us again if you need further assistance on JotForm.

    Thanks. 

  • Profile Image

    Answered by kearle on July 11, 2012 at 11:02 PM

    I am a little confused as to how to implement the code into the html coding for the page.

    1) is there a specific area to which the code needs to be placed within the html text?

    2) Also, i do not understand the part explained by "NeilVicente" above in regards to the  <img src="wpimages/wpc511ae60_06.png" width="320" height="232" border="0" id="pic_36" alt="" onload="OnLoadPngFix()" style="position:absolute;left:400px;top:507px;" /> section, do i have to manually write this code specific to my own measurements and attributes or is this created automatically (basically, do i have to write this myself or does this come from somewhere else?)

    Any help you can provide on this would be much appreciated, my HTML knowledge is quite limited as you can probably tell.

  • Profile Image
    JotForm Support

    Answered by liyam on July 11, 2012 at 11:56 PM

    Hello kearle.  The code you pasted from NeilVicente is just the image.  The style may have nothing to do with your page.  So going to basics, here are the essential requirements for your image to be used as a lightbox link:

    <a class="lightbox-**********" style="cursor:pointer;color:blue;text-decoration:underline;">

    <img src="your_source/image.png" border="0" />

    </a>

    Note: the <a> and </a> tags (with its class attribute are the ones that actually make the lightbox function.  The <img> tag is the tag that makes the image appear.  So replacing <img> with any text will make that text become a clickable link for the lightbox to appear.

    Please let us know if you need further clarifications on this matter.

    Thanks.

  • Profile Image

    Answered by kearle on July 12, 2012 at 12:25 AM

    Hi liyam, thanks for getting back to me so quickly regarding this.

    The website to which this is being applied is www.mashbrewing.com.au , in specific reference sketched image denoting "New Beer On Tap". The sketched image is a rollover that if you click will bring up a lightbox containing a advertisement (.jpg).

    Basically what i want to do is replace this advertisement with the form itself. I have gone through the code and have found the following section which seems to adhere to the linked image.

    <p><a id="Left" rel="sslightbox" target="_blank" href="/storage/StPatsDay_WebAd_Popup.jpg"></a></p>

    The actual rollover image (.png) that is located in my storage is called Left8.png however the id above seems to refer to this part as "Left" - (website was originally made by a freelancer).

    Below is the rest of the code for the home page. Sorry for the Large post, hope it helps.

    <script type="text/javascript">
    (function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://mashbrewing.com.au/home-mobile');
    </script>

    <div id="Nav"><a id="Home" class="selected" target="_blank" href="http://www.mashbrewing.com.au/" rel="nofollow noopener"></a><a id="Beer" target="_blank" href="http://www.mashbrewing.com.au/beer" rel="nofollow noopener"></a><a id="Press" target="_blank" href="http://www.mashbrewing.com.au/press" rel="nofollow noopener"></a><a id="Shop" target="_blank" href="http://www.mashbrewing.com.au/hop-shop" rel="nofollow noopener"></a><a id="Mates" target="_blank" href="http://www.mashbrewing.com.au/mates" rel="nofollow noopener"></a></div>
    <p>&nbsp;</p>
    <p><a id="Left" rel="sslightbox" target="_blank" href="/storage/StPatsDay_WebAd_Popup.jpg"></a></p>
    <p><a id="Right" target="_blank" href="http://www.mashbrewing.com.au/hop-shop" rel="nofollow noopener"></a></p>
    <div id="Center"><img src="//mashbrewings.squarespace.com/storage/front/BreweryRemainder.png" alt="" /></div>
    <p><a id="Gorilla" target="_blank" href="http://www.mashbrewing.com.au/mates" rel="nofollow noopener"></a></p>
    <div id="Sign"><img src="//mashbrewings.squarespace.com/storage/front/SignSketch_Off.png" alt="" /></div>
    <div id="SignHolder">
    <div><a id="BunburySign" target="_blank" href="http://www.mashbrewing.com.au/bunbury" rel="nofollow noopener"></a></div>
    <div><a id="SwanSign" target="_blank" href="http://www.mashbrewing.com.au/swan-valley" rel="nofollow noopener"></a></div>
    <div><a id="RockSign" target="_blank" href="http://www.mashbrewing.com.au/rockingham" rel="nofollow noopener"></a></div>
    </div>
    <p><br /><br /></p>
    <div id="follow">
    <p><span class="full-image-inline ssNonEditable"><span><img src="/storage/followus.png?__SQUARESPACE_CACHEVERSION=1329108631840" alt="" /></span></span></p>
    <div id="followlinks"><a id="Facebook" target="_blank" href="http://www.facebook.com/pages/Mash-Brewing-Co/111220303523" rel="nofollow noopener"></a> &nbsp; &nbsp; <a id="Twitter" target="_blank" href="http://twitter.com/#!/MashBrewing"></a></div>
    </div>

  • Profile Image
    JotForm Support

    Answered by liyam on July 12, 2012 at 11:19 AM

    Hello kearle.  Here's what you should do:

    1. Get the lightbox code from your form
    2. Find this code (which you actually have found already): <p><a id="Left" rel="sslightbox" target="_blank" href="/storage/StPatsDay_WebAd_Popup.jpg"></a></p>

    3. Change this part of the code:

    <a id="Left" rel="sslightbox" target="_blank" href="/storage/StPatsDay_WebAd_Popup.jpg"></a>

    to the lightbox code that you have from your form.  It should look something like this:


    <script src="//jotform.me/min/g=feedback2" type="text/javascript">
    new JotformFeedback({
    formId:'1233122222222',
    base:'http://jotform.me/',
    windowTitle:'Your form name here',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-21332624543446" style="cursor:pointer;color:blue;text-decoration:underline;">Your form name here</a>

    ===============================================

    NEXT:

    Remove the text content of your form and remove the style attribute and all its contents.  Then, add the ID value of the previous <a> tag as I'm pretty sure there's a reason for that ID. So all in all should look something like this:

    <p><script src="//jotform.me/min/g=feedback2" type="text/javascript">
    new JotformFeedback({
    formId:'1233122222222',
    base:'http://jotform.me/',
    windowTitle:'Your form name here',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-21332624543446" id="Left"></a>

    </p>

    ===============================================

    Save your form and test your web page.

    Please let us know if you need further clarification on this.

    Thanks.

  • Profile Image

    Answered by kearle on July 13, 2012 at 01:11 AM

    Aha! I could kiss you my man! Just saved me a world of frustration. Really do appreciate the help.

  • Profile Image
    JotForm Support

    Answered by liyam on July 13, 2012 at 12:33 PM

    No worries, kearle.

    If you have other questions, please don't hestiate to create a new topic.  We'll be more than happy to assist.

    Thanks.