How can I stylize the next/back buttons with images?

  • Profile Image
    ubmdesigncentral
    Asked on April 07, 2013 at 10:42 AM

    If possible i just want to switch out the background image and margin of the text on the right side.

  • Profile Image
    jefreylandicho
    Answered on April 07, 2013 at 12:35 PM

    Yes it is possible. You can inject a custom CSS in your form styles to achieve the result you want. If you could provide us the form ID or webpage url where you have embedded the form you want to switch the background image and margin, we would be able to assist your further.

  • Profile Image
    ubmdesigncentral
    Answered on April 07, 2013 at 03:47 PM

    Sure its here:

    http://form.jotformpro.com/form/30927981081964

     

    I have 4 different images I would like to use instead of the 4 options of buttons I'm currently using. 

    Start my profile

    Next

    Get my Badge

    Save my settings

  • Profile Image
    EltonCris
    Answered on April 07, 2013 at 07:29 PM

    @ubmdesigncentral

    That's possible with Custom CSS Injection. You can use the following CSS below, just replace your image URL buttons on the code. I have added labels so you can identify which code is it for.

    /*--Start my FREE Profile--*/

    #form-pagebreak-next_3{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--2nd page--*/

    #form-pagebreak-next_22{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--3rd page--*/

    #form-pagebreak-next_28{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--4th page--*/

    #form-pagebreak-next_46{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--save settings--*/

    #form-pagebreak-next_54{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--6th page--*/

    #form-pagebreak-next_109{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

     

    /*--just incase you like to change submit-button's image--*/

    .form-submit-button{

    1background: url('http://yourwebsite.com/button.png') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    }

    If you want to removed the button text labels, you can remove it directly on the form builder by putting   (html code for space) on the text value. Here's how:

    Feel free to message us if there's something wrong with the results. Thank you!

  • Profile Image
    ubmdesigncentral
    Answered on April 07, 2013 at 08:54 PM

    Awesome! Thanks!

  • Profile Image
    Answered on April 07, 2013 at 09:31 PM

    For the submit button, it has a hover effect on it that turns to white. How do I remove this?

     

    .form-submit-button{

    background: url('http://twimgs.com/designcentral/websites/medtechworld_sso/www/images/btn_save_settings.gif') no-repeat top center;

    box-shadow: none !important;

    border: none !important;

    width:201px;

    height:39px;

     

    }

  • Profile Image
    Welvin
    Answered on April 08, 2013 at 01:56 AM

    Hi,

    Please be sure to login when posting your response. We seems can't find your username. Let us know the form URL so we can check and give you the custom CSS codes to hide/remove the hover.

    I suggest you to create a separate thread: http://support.jotform.com/answers/answer.php?

    Thanks

  • Profile Image
    EltonCris
    Answered on April 08, 2013 at 03:09 AM

    @ubmdesigncentral

    Try it with this:

    .form-submit-button:hover{

    box-shadow:none !important;

    border:none !important;

    }

    Let me know if this doesn't help. Thanks!