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

    Remove hover effect from text on submit button

    Asked by myzipcard on June 09, 2016 at 12:51 PM

    Hi,

    I have a couple of forms on a page and I use them both in lightbox mode. I'd like to remove the hover effect of the text from the submit buttons. I can't seem to to be able to find where exactly I can change the color or this setting anywhere. 

    The buttons (Sign up) are on the page for which I've included the link. 

     

    Thanks.

    Page URL:
    http://welocals.businesscatalyst.com/index.html#top

    hover effect on submit remove hover
  • Profile Image

    Answered by dane003 on June 09, 2016 at 02:18 PM

    Hi,

    I would like to help.

    You can customize your submit buttons by injecting CSS codes.
    Here is a guide on how to inject CSS codes:
    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    You can add a CSS code for the submit button to change its style or effect. Just change or add some attribute to its class. For example, you want to change the cursor effect of the submit button and the weight of its font at hover, just add the code into  the Inject Custom CSS area in the PREFERENCES, under Form Styles, then Custom CSS tab.

    ex:
    .form-submit-button{

    cursor: text;

    }

    .form-submit-button:hover{


    font-weight: 600;


    }

     

    Here is the detail guide on how to change the style of the submit button through CSS codes.
    http://www.jotform.com/help/118-Submit-Button-CSS-CSS3

    I hope it helps.

  • Profile Image
    JotForm Support

    Answered by Welvin on June 09, 2016 at 04:46 PM

    I've checked the forms and the hover effect has been changed already so I think the codes given by dane003 works for you. 

    Please feel free to contact us back if you need help with anything else. We are here to help.

     

  • Profile Image

    Answered by myzipcard on June 16, 2016 at 11:25 AM

    Thanks, but I might be missing something as my issue persists. I added the following piece of code as instructed in the CSS of the form:

     

    .form-submit-button:hover{

    font-color: #fff;

    }

     

    Nothing changed as the text still changes color when I place the mouse over it. 

    What am I doing wrong? 

     

    Thanks. 

  • Profile Image

    Answered by Danilo on June 16, 2016 at 01:01 PM

    Hi,

    I checked your form. The text on your submit button doesn't change color already on our end, at hover. I also tried it on your website and the submit button doesn't change color already at my end.
    I'm viewing it in google Chrome. 




  • Profile Image

    Answered by myzipcard on June 16, 2016 at 02:11 PM

    Hi, 

    And thanks for checking. I am seeing a totally different result on my end. I tried Safari, Chrome, Firefox. On all of them there is a hover effect and the text changes color. Any idea why?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 16, 2016 at 04:41 PM

    I'm assuming that you're referring to this effect:

    I did some checking in your code, so please try to add this CSS:

    .btn.lightbox-61604259869164{

        background-color: transparent;

        text-decoration: none;

     

        color: white;

    }

    Hope it helps!

  • Profile Image

    Answered by myzipcard on June 17, 2016 at 06:58 AM

    Thanks for the solution. Believe it or not, but it doesn't work. I added the lines of code and added the form again to my site. No changes at all, unfortunately. 

  • Profile Image
    JotForm Support

    Answered by Welvin on June 17, 2016 at 08:13 AM

    Your original question is about the submit button but looks like you want to change the effect of the lightbox button as well. Please do the following changes:

    For the button on the left, use the following callout button:

    <a class="btn lightbox-61604259869164" style="margin-top: 16px;color: #fff !important;text-decoration: none !important;font-weight: normal !important;cursor: pointer;"> SIGN UP </a>

     

    For the button on the right, use the following callout button:

    <a class="btn lightbox-61604551102139" style="margin-top: 16px;color: #fff !important;text-decoration: none !important;font-weight: normal !important;cursor: pointer;"> SIGN UP </a>

  • Profile Image

    Answered by myzipcard on June 17, 2016 at 09:26 AM

    Now I realized I was asking the wrong question when in fact I was referring to the lightbox button. Thanks for catching that and for your help. The new codes solved my issue and everything looks great. 

    Thanks again. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 17, 2016 at 10:34 AM

    Hi,

    Glad to hear it is solved now. On behalf of my colleagues who solved the issue, you are welcome. Let us know if you need further assistance and we are happy to help.