How to add a rollover submit button to a form

  • Profile Image
    MHFF
    Asked on May 04, 2011 at 04:54 AM

    By rollover action i meanthe curser doesn't change / behave as though it's over a hyperlink.

    Also, is there a way to add your own button image with rollover (i.e. colour change, etc)?

    Thanks

  • Profile Image
    NeilVicente
    Answered on May 04, 2011 at 08:11 PM

    Hi,

    Unfortunately, a rollover button is not explicitly possible with Jotform. You would have to use custom css in order to achieve this.

    Take a look at this Example Form with Rollover Buttons

    These are the css codes that made that possible:

    .form-submit-button{
    border:none;
    background-color:lightgray ;
    border: 1px solid gray;
    height: 38px;
    width: 148px;
    }
    .form-submit-button:hover {
    background-color: white;
    }


    .form-submit-reset{
    background-image:url(
    https://cms.jotform.com/uploads/image_upload/image_upload/global/1295_Buttons_05.png);
    border: medium none;
    height: 38px;
    width: 148px;
    }
    .form-submit-reset:hover {
    background-image:url(
    https://cms.jotform.com/uploads/image_upload/image_upload/global/1293_Buttons_03.jpg);
    }

    Feel free to use and modify those codes to suit your needs. Click here to learn how to inject custom css to your form.

    For more information about CSS styling, visit this page.

     

    Hope you find this post useful. Let us know if there's anything else we can help you with.


    Neil

  • Profile Image
    propertymsd
    Answered on October 27, 2011 at 08:06 PM

    Thanks!