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 can I stylize the next/back buttons with images?

    Asked by ubmdesigncentral 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.

    next background image
  • Profile Image

    Answered by jefreylandicho 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

    Answered by ubmdesigncentral 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
    JotForm Support

    Answered by EltonCris 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

    Answered by ubmdesigncentral on April 07, 2013 at 08:54 PM

    Awesome! Thanks!

  • Profile Image

    Answered by 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
    JotForm Support

    Answered by Welvin 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
    JotForm Support

    Answered by EltonCris 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!