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

    Opening lightbox jotform when clicking on a different element, not just the link

    Asked by shanlee on February 10, 2015 at 02:08 PM

    I was wondering how I can make the form (in a lightbox) open when clicking an html element/link on my page.

    Right now the code I pasted in includes its own link that becomes added to my page, but I want to link the form to my own element.

    Thanks in advance



    This is a re-post of a comment on How to create your first web form

    open lightbox jotform lightbox jotform
  • Profile Image

    Answered by bkljaic on February 10, 2015 at 03:08 PM

    Hi,

    To do that you need to:

    1.Go to your JotForm Builder

    2.Select Embed Form

    3.Select LightBox 

    4.Copy the code 

    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.2.5339" type="text/javascript">

    var JFL_50294749479370 = new JotformFeedback({

    formId:'50294749479370',

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

    windowTitle:'CHALLENGE ON CUSTOM CSS CODE FOR NEW HIRES',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700,

    openOnLoad:false

    });

    </script>

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

    5.Paste it inside your HTML webpage

    6. a href is representing link of element which will open your form, just add a href tag inside your HTML to the place you want your link to be.

    Hope that this will help.

  • Profile Image

    Answered by Ben on February 10, 2015 at 04:29 PM

    As mentioned by bkljaic, that is all that you should do Shanlee to have the lightbox form show up by clicking on some other element.

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

    If you want it to be some element like an image, you could do this:

    <a class="lightbox-50395077146256"><img src="/some image on our sever.png"/></a>

    What this would do is make that image run your lightbox form.

    You could even take it further - if needed - and add some style to the a (link) element as it was in the first blue code above.

    * One thing to note is that you should always have the class ("lightbox-50395077146256") as it is given to you by the Form Builder. I took the liberty to add the code of your jotform in the class, so it should be the same as the one you get.

    Many possibilities to make it look and behave as you want and if you have any issues with it, just let us know and we will be happy to assist with it :)

  • Profile Image

    Answered by shanlee on February 10, 2015 at 04:55 PM

    Thank you, thank you, thank you!!

    I was unnecessarily adding in an href attribute to the link as well – my day has truely been made :)

  • Profile Image

    Answered by Ben on February 10, 2015 at 06:06 PM

    You are welcome.

    I am glad to hear that it is working for you now as you have wanted and please do let us know if you have any further questions and we would be happy to assist :)