how to use lightbox form in joomla

  • Profile Image
    ammibalustrades
    Asked 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
    jonathan
    Answered 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
    ammibalustrades
    Answered 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
    jonathan
    Answered 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
    ammibalustrades
    Answered 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
    jonathan
    Answered on April 30, 2012 at 12:12 AM

    Yes. Sorry I just noticed that too.

    Will check. Please wait.

  • Profile Image
    jonathan
    Answered 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
    ammibalustrades
    Answered 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
    jonathan
    Answered 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
    jonathan
    Answered 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
    ammibalustrades
    Answered 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
    jonathan
    Answered 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
    ammibalustrades
    Answered 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
    idarktech
    Answered 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
    jonathan
    Answered on April 30, 2012 at 09:02 PM

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

    Thanks.

  • Profile Image
    ammibalustrades
    Answered on April 30, 2012 at 09:52 PM

    THANK YOU SOO MUCH! its worked.

  • Profile Image
    jonathan
    Answered 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.