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 lightbox form in joomla

    Asked by ammibalustrades on April 29, 2012 at 10:40 PM

    My site: ammi.cloudaccess.net
    Using: Joomla 2.5 with Template: BT Arise

    I have a button on my site that says: FREE Online Quote- its on the top right side corner in red. I want to link this button to the form from jotform.com as a lightbox.
    The code to embed the form as a lightbox is as follows:

    <script src="http://jotform.co/min/g=feedback2" type="text/javascript">
    new JotformFeedback({
    formId:'20767947951872',
    base:'http://jotform.co/',
    windowTitle:'2012 FREE Online Quote',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-20767947951872" style="cursor:pointer;color:blue;text-decoration:underline;">2012 FREE Online Quote</a>

    The code for the button that i would like to use is as follows:

    <p><a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" target="_blank" href="#"><span>FREE Online Quote</span></a></p>

    Can you tell me how to make this work?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 29, 2012 at 10:53 PM

    Hi,

    I will assume that you meant to say that the ligbox form is not working on your site?..

    Please try updating this code

    <script src="http://jotform.co/min/g=feedback2" type="text/javascript">

    to this

    <script src="http://jotform.co/min/g=feedback" type="text/javascript">

    try removing 2 from 'feedback' and test it again.

    Please inform us if not sorted out yet. Thanks.

  • Profile Image

    Answered by ammibalustrades on April 29, 2012 at 11:51 PM

    I fixed the problem; i did not have javacript code allowed in my editor. now i do. the form is on my site: http://ammi.cloudaccess.net/ on the right column, right at the bottom.

    NOW, I have two questions.

    1) when you click that form, a lighbox appears and the top bit is orange which is jotform colour, i'd say. I want to change this to blue to match my site.

    2) how do i change the code so that the link appears to viewers as a button. the code that my template uses for buttons is as follows:

    <p><a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" target="_blank" href="#"><span>BUTTON TEXT</span></a></p>

     

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 12:08 AM

    Hi,

    I think the lightbox is not working yet (at least when I tested it on my end using chrome,ff, and ie).
    Everytime I click on the Free Online Qoute (upper right button), the screen become like this.

    Perhaps we should fix this first, to see how it looks like.

    Thanks.

     

  • Profile Image

    Answered by ammibalustrades on April 30, 2012 at 12:11 AM

    actually, that wasnt the link i was talking about.

    its actually in the right column at the bottom of the column and currently it is not in a button. it is simply a text link.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 12:12 AM

    Yes. Sorry I just noticed that too.

    Will check. Please wait.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 12:17 AM

    Hi,

    We have the guide for styling the lightbox here How-to-Stylize-Feedback-Lightbox-Title .
    Please check it out first. I think this is what you need.

    Please inform us if this is still not enough. Thanks.

  • Profile Image

    Answered by ammibalustrades on April 30, 2012 at 12:24 AM

    thank you for answering my question. the first question has been answered in full. however, i still do not know in what way to change the code to make the button appear. could you please do that for me?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 12:31 AM

    OK will check #2.
    I will have to make a test on my own test site. Will update you when I have it.

    Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 02:11 AM

    Hi,

    Please check the sample on this site.

    Unfortunately, I do not know what are the style for your button class "ja-typo-btn btn-red ja-typo-btn-big btn-big-red"  so, I have to make an image instead.

    I change the link text FREE ONLINE QUOTE to this:

    <p>

    <a class="lightbox-21200703663441" style="cursor: pointer;" ><img src="https://cms.jotform.com/uploads/image_upload/image_upload/global/6153_FREE-ONLINE-QOUTE.png" /></a>

    </a>

    </p>

    21200703663441 - is the Form ID# 
    You can download the image 6153_FREE-ONLINE-QOUTE.png by right-click, then save as.
    Please inform us if this works. Thanks.
  • Profile Image

    Answered by ammibalustrades on April 30, 2012 at 07:02 PM

    The image is a good and easy solution. thanks for that. however, i was also hoping to be able to do it with text.

    what do you mean you dont know what the styles are the the button class? is that something i might be able to tell you?

    if i gave you my joomla account, would you be able to try this on my website to see if its possible at all to do it with the text button?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 08:18 PM

    Hi,

    what do you mean you dont know what the styles are the the button class? is that something i might be able to tell you?

    Yes. Maybe we can try adding the content of that button class to the lightbox class..
    something like this...

    .lightbox-21200703663441{

    //content of your red-button-class

    }

    You can append the lightbox class in your html style (on top), then lets see if the FREE Online qoute will now have the appearance your red-button-style and functionality of JotForm lightbox.

    I think you are more than capable of doing this =) . I will assist along the way.
    There is no need to give me the joomla account.

    Will await your update. Thanks.

     

  • Profile Image

    Answered by ammibalustrades on April 30, 2012 at 08:44 PM

    i tried doing that but it didnt work. its still a link in blue underline.

    the code i put was this:

    <p><script src="http://jotform.co/min/g=feedback2" type="text/javascript">// <![CDATA[
    new JotformFeedback({
    formId:'20767947951872',
    base:'http://jotform.co/',
    windowTitle:'2012 FREE Online Quote',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    // ]]></script>
    <a class="lightbox-20767947951872" style="ja-typo-btn btn-red ja-typo-btn-big btn-big-red">2012 FREE Online Quote</a></p>

  • Profile Image
    JotForm Support

    Answered by idarktech on April 30, 2012 at 08:59 PM

    @ammibalustrades,

    How about combining the two class. Try replacing your button with this:

    <a class="lightbox-20767947951872 ja-typo-btn btn-red ja-typo-btn-big btn-big-red" style="padding: 6px 13px;cursor:pointer !important;">2012 FREE Online Quote</a>

    Hope this helps. Let us know if this doesn't work for you. Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 09:02 PM

    idarktech's suggestion works =) Please try it. I did it here

    Thanks.

  • Profile Image

    Answered by ammibalustrades on April 30, 2012 at 09:52 PM

    THANK YOU SOO MUCH! its worked.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2012 at 10:00 PM

    LOL! yeah. Have a great day.=)

    Feel free to approach us anytime should you need further assistance. Thanks.