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 can I link to my lightbox form from an image?

    Asked by xtasy171 on October 24, 2011 at 04:09 PM

    --------------

    [CODE]<script type="text/javascript" src="//www.jotform.com/min/g=feedback">// <![CDATA[

    new JotformFeedback({

    formId:'XXXXXXXXXXXX',

    base:'http://www.jotform.com/',

    windowTitle:'Video Machine',

    background:'#F5F5F5',

    fontColor:'#FFFFFF',

    type:1,

    height:710,

    width:700,

    });

    // ]]></script>

    <a class="lightbox-XXXXXXXXX" style="cursor: pointer; color: blue; text-decoration: underline;">Video Machine</a>[/CODE]

    --------------

    is the current code. I'd like to be able to replace the text link with a image link script where the image can be called from a URL. 

     

    <a target="_blank" href= "lightbox-XXXXX"> <img src= "http://URL.com/images/playbutton.gif"</a>

    Thanks!

  • Profile Image

    Answered by fxr on October 24, 2011 at 05:39 PM

    Hopefully I am understanding your question correctly.

    If you want to set an image for that button, you will need to style it with css. 

    This is a bit hacky & will need perseverance to get right.

    If you put this css in your page where the feedback button is embedded in the css section.

    .jotform-feedback-link { background:url(http://www.snowboarding.com/images/logos/Skullcandy.jpg) no-repeat 0 -8px !important }

    I grabbed a random image from the internet. Its 100 px in width & 50px in height. 

    You will have to experiment with the 'positioning'of the background image. The numbers after the no-repeat are x and y co-ordinates. in my example I shifted the image 'up' 8 pixels.

    Then in the form code, you have work out how many 'spaces' is required for the length of the image, & represent each one with a &nbsp; 

    e.g 

     

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId: "12710415239",

    buttonText: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",

    base: "http://www.jotform.com/",

    background:'#F59202',

    fontColor:'#FFFFFF',

    buttonSide: "bottom",

    buttonAlign: "right",

    type:false,

    width: 700,height: 500});

    </script>

     

     

    In my example, I end up with a result like this: http://pamppi.info/jotform-testing/feedback.php

     

    That is one of a range of possible workarounds for this. Its a matter of working whats going to work best for you.