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

    Create a Text Button for Lightbox

    Asked by RouletteRoll on December 27, 2015 at 03:04 AM

    Hello.

    This is my website:

    www.rouletterol.com. mx

     

    And my lightbox is inside the footer, it says "CONTÁCTANOS"

    This is my code:

    <style>

     

    .jt-content {overflow:hidden !important;}

     

    </style>  

      <script src="https://form.jotform.co/static/feedback2.js?3.3.REV" type="text/javascript">

          var JFL_53598129820867 = new JotformFeedback({

            formId: '53598129820867',

            base: 'https://form.jotform.co/',

            windowTitle: 'Opt In Form #2',

            background: '#b05151',

            fontColor: '#FFFFFF',

            type: '2',

            height: 600,

            width: 600,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-53598129820867" style="margin-top: 5px;color:white;font-family:'Impact';font-size:30px">CONTÁCTANOS</a>

     

     

    I'd like to change the text color when the mouse is on it, ¿How would it be possible to do?

    Thanks!

    Page URL:
    www.rouletteroll.com.mx

    Screenshot
    create JotForm style size height a
  • Profile Image
    JotForm Support

    Answered by Boris on December 27, 2015 at 12:37 PM

    You can change the style of the text button by adding your desired CSS in between the two <style> and </style> tags.

    The CSS selector for your lightbox button is .btn.lightbox-53598129820867, and since you want to style when it is being pointed with a mouse, we would add :hover to the selector: .btn.lightbox-53598129820867:hover

    So to change the color to gold on mouse-over, for example, you could use the CSS such as this:

    .btn.lightbox-53598129820867:hover { color: gold !important; }

    Your <style> tags would end up looking like this:

    <style>

    .jt-content {overflow:hidden !important;}

    .btn.lightbox-53598129820867:hover { color: gold !important; }

    </style>

    Of course, you can use any CSS color that you want, the gold color was simply an example. You can refer to the following page for a few more colors that you can use, but you can actually use any of the 16+ million CSS supported colors:

    http://www.w3schools.com/cssref/css_colornames.asp

    If you need further assistance, please let us know, and we will be happy to help.

  • Profile Image

    Answered by RouletteRoll on December 27, 2015 at 09:22 PM

    Thanks a lot! 

    I finalyy got it.

    I really like JotForm!

  • Profile Image
    JotForm Support

    Answered by mert on December 28, 2015 at 03:44 AM

    In the name of my colleague, you are most welcome. If you need any help in the future, please always feel free to contact us.

     

    Have a great day.