How to use an image link for the lightbox form?

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

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

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:

https://www.jotform.com/form/**********" rel="nofollow" rel="nofollow" >

(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

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

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

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.

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.

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.

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" 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" href="http://www.mashbrewing.com.au/"></a><a id="Beer" href="http://www.mashbrewing.com.au/beer"></a><a id="Press" href="http://www.mashbrewing.com.au/press"></a><a id="Shop" href="http://www.mashbrewing.com.au/hop-shop"></a><a id="Mates" href="http://www.mashbrewing.com.au/mates"></a></div>
<p>&nbsp;</p>
<p><a id="Left" rel="sslightbox" href="/storage/StPatsDay_WebAd_Popup.jpg"></a></p>
<p><a id="Right" href="http://www.mashbrewing.com.au/hop-shop"></a></p>
<div id="Center"><img src="//mashbrewings.squarespace.com/storage/front/BreweryRemainder.png" alt="" /></div>
<p><a id="Gorilla" href="http://www.mashbrewing.com.au/mates"></a></p>
<div id="Sign"><img src="//mashbrewings.squarespace.com/storage/front/SignSketch_Off.png" alt="" /></div>
<div id="SignHolder">
<div><a id="BunburySign" href="http://www.mashbrewing.com.au/bunbury"></a></div>
<div><a id="SwanSign" href="http://www.mashbrewing.com.au/swan-valley"></a></div>
<div><a id="RockSign" href="http://www.mashbrewing.com.au/rockingham"></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" href="http://www.facebook.com/pages/Mash-Brewing-Co/111220303523"></a> &nbsp; &nbsp; <a id="Twitter" href="http://twitter.com/#!/MashBrewing"></a></div>
</div>

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.

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

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.