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

    Replacing the JotForm lightbox link with a button (or at least image)

    Asked by kevinhanks on March 14, 2013 at 09:04 AM

    Hello,

    I've embedded a form into a wordpress post as a lightbox. When you click the text on the page, the form opens in a lightbox window correctly and everything is working great.

    What I would like to do, is replace the plain looking text with a button that will open the lightbox form. I am using a button plugin called maxbuttons which clearly isn't going to work.

    The working normal wordpress text is this (This is inserted in a normal wordpress post):

    <script src="//cdn.jotfor.ms/static/feedback.js?3.1.2109" type="text/javascript">

    new JotformFeedback({

    formId:'30721625783152',

    base:'http://jotform.us/',

    windowTitle:'Email Coupon!',

    background:'#176c94',

    fontColor:'#FFFFFF',

    type:false,

    height:150,

    width:380

    });

    </script>

    <p style="text-align: center;"><a class="lightbox-30721625783152" style="cursor: pointer; color: #176c94; text-decoration: none; font-family: Arial, sans-serif; font-size: 35px; align: center;">Email this coupon to me!</a></p> 



    When I insert a button from my button plugin it simply reads [maxbutton id="8"].

    The text for this button is:

    div.maxbutton-8-container { } a.maxbutton-8 { text-decoration: none; color: #3b3b3b; } a.maxbutton-8 .maxbutton { height: 100px; background-color: #ffffff; background: linear-gradient(#ffffff 45%, #e6e6e6); background: -moz-linear-gradient(#ffffff 45%, #e6e6e6); background: -o-linear-gradient(#ffffff 45%, #e6e6e6); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #ffffff), color-stop(1, #e6e6e6)); border-style: solid; border-width: 1px; border-color: #858585; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: 0px 0px 0px #ffffff; box-shadow: 0px 0px 2px #dbdbdb; -pie-background: linear-gradient(#ffffff 45%, #e6e6e6); position: relative; behavior: url("http://utahcoupons.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc"); } a.maxbutton-8 .maxbutton .mb-text { color: #3b3b3b; font-family: Arial; font-size: 16px; font-style: normal; font-weight: bold; text-align: center; padding-top: 35px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; line-height: 1.0em; width: 100%; } a.maxbutton-8 .maxbutton .mb-text2 { color: #3b3b3b; font-family: Arial; font-size: 12px; font-style: normal; font-weight: normal; text-align: center; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; line-height: 1.0em; width: 100%; } a.maxbutton-8 .maxbutton .mb-icon { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 100px; } a.maxbutton-8 .maxbutton .mb-icon img { background: none; padding: 0px; margin: 0px; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; } a.maxbutton-8 .maxbutton .mb-icon.mb-left { float: left; text-align: left; } a.maxbutton-8:visited { text-decoration: none; color: #3b3b3b; } a.maxbutton-8:hover { text-decoration: none; color: #3b3b3b; } a.maxbutton-8:hover .maxbutton { background-color: #e6e6e6; background: linear-gradient(#e6e6e6 45%, #ffffff); background: -moz-linear-gradient(#e6e6e6 45%, #ffffff); background: -o-linear-gradient(#e6e6e6 45%, #ffffff); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, #e6e6e6), color-stop(1, #ffffff)); border-color: #858585; text-shadow: 0px 0px 0px #ffffff; box-shadow: 0px 0px 2px #dbdbdb; -pie-background: linear-gradient(#e6e6e6 45%, #ffffff); position: relative; behavior: url("http://utahcoupons.com/wp-content/plugins/maxbuttons-pro/pie/PIE.htc"); } a.maxbutton-8:hover .maxbutton .mb-text { color: #3b3b3b; } a.maxbutton-8:hover .maxbutton .mb-text2 { color: #3b3b3b; } 

     

    Now I realize this is all very complicated. I don't expect anyone to be able to help me impliment this current button in place of the text that opens the lightbox. What I'm really looking for is any workaround that you guys may have to get some kind of button in there that will open the lightbox form (anything is really better than plain text, whether its a static image or CSS button).

    Any help you can offer is greatly appreciated, thank you for taking the time to read all this. 

    JotForm lightbox form email style size
  • Profile Image

    Answered by sidharth_kch on March 14, 2013 at 09:18 AM

    @kevinhanks

    Simplest way is to use a image as a link button. Let us know if this is fine and we can send you the code.

    Do you have image url which you want to use as a button?

    Thanks,

    Sidharth

  • Profile Image

    Answered by kevinhanks on March 14, 2013 at 09:25 AM

    Sidharth if you could just provide me with an example with any image URL that would be amazing. I can replace it later easy enough.

    Thanks! 

  • Profile Image

    Answered by sidharth_kch on March 14, 2013 at 10:09 AM

    @ kevinhanks

                      <script src="//yang.jotform.com/static/feedback2.js?3.1.2112" type="text/javascript">

                          new JotformFeedback({

                              formId: '30703298559967',

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

                              windowTitle: 'Title Me',

                              background: '#FFA500',

                              fontColor: '#FFFFFF',

                              type: false,

                              height: 500,

                              width: 700

                          });

    </script>

    <a class="lightbox-30703298559967" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="https://cms.jotform.com/uploads/image_upload/image_upload/global/14149_googleDrive.jpg" /></a>

    Replace your text link with this code which is red+bold. And replcase the image url to your image URL.

    Hope this helps!!

    Thanks,

    Sidharth

  • Profile Image

    Answered by kevinhanks on March 16, 2013 at 09:14 PM

    Perfect, thank you Sidharth.

  • Profile Image

    Answered by tizbo1423 on April 16, 2013 at 04:02 PM

    Hey, I'm trying to have the lightbox form open from a rollover button but I can't get it to work. Any tips?

  • Profile Image

    Answered by sidharth_kch on April 16, 2013 at 04:21 PM

    @tizbo1423

    Request you to please open a seperate thread for your issue so that we can assist you better. Use this link : http://www.jotform.com/answers/answer.php

    Thanks,

    Sidharth

  • Profile Image

    Answered by sublimehair on July 29, 2013 at 05:17 PM

    When I apply style to the class it kills the link.

     

    <a class="lightbox-30703298559967" 

     

    Any suggestions..

  • Profile Image
    JotForm Support

    Answered by abajan on July 29, 2013 at 06:14 PM

    @sublimehair

    Could you please open a separate thread and explain the problem in detail there? (Please include the URL to the page in which the form is embedded.) Click this link to start a new thread.

    Thanks