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 do I create a mouseover effect for custom buttons?

    Asked by igenmedia on April 24, 2013 at 06:00 PM

    Hi there. I am trying to create a mouseover effect on my form using custom button images I created. I have the image urls for the buttons; however, everytime I think I have the code to input this nothing happens. The button is just static.

     

    Can you please advise?

    static custom button mouseover hover
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2013 at 06:35 PM

    Hi,

    You can use the following CSS codes and inject it to your form.

    .form-submit-button{

    background:url('FIRST BUTTON URL HERE') no-repeat top center;

    border:none !important;

    box-shadow:0 !important;

    height:100px;

    width:100px;

    }

     

    .form-submit-button:hover{

    background:url('SECOND BUTTON URL HERE') no-repeat top center;

    border:none !important;

    box-shadow:0 !important;

    }

    Make sure to change the bolded part and removed your button image inserted on the button image toolbar.

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know if anything went wrong. Thank you!

  • Profile Image

    Answered by igenmedia on April 25, 2013 at 11:40 AM

    Hi, I tried using the code you provided me and just like all the other attempts it does not seem to be working. When i hover my mouse over the button it does nothing and when i click on it it is just static.

  • Profile Image
    JotForm Support

    Answered by abajan on April 25, 2013 at 11:49 AM

    A couple of semicolons are missing from the CSS. This may be the problem but we'll have to run some tests and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on April 25, 2013 at 12:19 PM

    Okay, I've found a solution. Load the form into the form builder and do the following:

    1. Click the submit button, click the Submit Text button, select the text and hit the spacebar on your keyboard. This will replace the text with a space

    (The small blue rectangle above indicates where the space is)


    2.
    Click the Button Image button and remove the URL


    3.
    Insert the missing semicolons to which I earlier referred (highlighted in red)

    .form-submit-button {
    background: url(http://mvs007-002.directrouter.com/~balticro/images/claimrewarda.jpg) no-repeat top center;
    border: none !important;
    box-shadow: 0 !important;
    height: 37px;
    width: 157px;
    }

    .form-submit-button:hover {
    background: url(http://mvs007-002.directrouter.com/~balticro/images/claimrewardb.jpg) no-repeat top center;
    border: none !important;
    box-shadow: 0 !important;
    }

    4. Save the form

    If you need further assistance, please let us know.

  • Profile Image

    Answered by igenmedia on April 25, 2013 at 12:56 PM

    It worked!!!!! Thank you so much!!!!

  • Profile Image

    Answered by igenmedia on April 26, 2013 at 11:58 AM
    fyi..
    Best Regards,
    Hugo Fernandez, Managing Partner
    Direct Line: (630) 302-3500
    iGenMedia: www.iGenMedia.com
    1812 High Grove Lane, Building 101
    Naperville, Illinois 60540
  • Profile Image
    JotForm Support

    Answered by KadeJM on April 26, 2013 at 12:33 PM

    Great, that's Awesome! :0)

    On behalf of my colleagues that helped you, you're very welcome and we're happy to hear it worked for you. If you need help with anything else feel free to talk to us more as needed and thanks for letting us know.