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 insert Lightbox script into sprite href

    Asked by mistertidd on December 23, 2011 at 03:21 AM

    Hi. I have a sprite setup for my contact button. The code is:

    <div id="contact-button"><a id="contactme" target="_blank" href="" title="Drop me a line"><span>Contact Button</span></a></div>

    How would I hook up a JotForm lightbox so it opens with this sprite? Also, how would I call the lightbox from a .js file (so my html isn't bloated on the .html page)?

    I seem to have a certain dyslexia when it comes to lightboxes!



  • Profile Image
    JotForm Support

    Answered by liyam on December 23, 2011 at 02:09 PM

    You can try something like this:

    <div id="contact-button"><a id="contactme" class="lightbox-xxxxxxxxxxx" title="Drop me a line"><span>Contact Button</span></a></div>

    Please take note of the xxxxxxxxxxx should be the ID of your form.  Also, please don't forget to include the javascript code and reference that refers to the contact button in your HTML page.

    If you need further assistance, please do let us know. Also, it would be great as well if you can share the URL of this page so we can provide you with more precise instructions.

  • Profile Image

    Answered by mistertidd on December 24, 2011 at 02:50 AM

    Hi liyam. Thanks for this.

    Just about finished my site: http://www.tornadocreative.co.uk/

    Your solution worked - thank you! However, the title shows an old title (I have changed this from 'we are updating our website' to 'contact Graeme'.) Also, how do I change the font of the header and the orange header background? I have tried CSS and looked using FireBug. 


  • Profile Image
    JotForm Support

    Answered by liyam on December 24, 2011 at 03:26 AM

    On this part of your script, simply change the values on this part (text set to bold):

    <script src="http://www.jotform.com/min/g=feedback" type="text/javascript"> new JotformFeedback({ formId:'xxxxxxxxxxx', base:'http://www.jotform.com/', windowTitle:'We are updating our website!', background:'#FFA500', fontColor:'#FFFFFF', type:false, height:500, width:700 }); </script>

    Also, on the part of the contactme link, you might want to add a style="cursor:pointer; inside your <a ...> tag.  This is so that when the your mouse cursor hovers on top of the contact me link, it will change to a pointer.

  • Profile Image

    Answered by mistertidd on December 24, 2011 at 05:29 AM

    Ah ha! That's great. Thanks. Been wrestling with this site for too long...! Thanks so much for your help.