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 you add custom image with rollover effect to next back buttons ?

    Asked by kyrenia on December 08, 2016 at 12:31 PM

    Hi I'm trying to simply place a image in the next and back buttons and add a roll over effect which will apply a box shadow.

    Been play for hours but cant get it to work even on a simple form with only page break on.

    I can't seem to over ride the preset button effect even though i have selected none in options.

    thanks in advance.

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 08, 2016 at 01:46 PM

    It is possible to style page break buttons inside of Form Designer.

    It is also possible to style it with CSS. 

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You can also check this thread to see how images can be added to page break buttons.

    https://www.jotform.com/answers/270261 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by kyrenia on December 08, 2016 at 03:00 PM

    thanks for the reply , still not getting any where near the result I want.

    my test form is here https://form.jotformeu.com/63425097105352.

    I have tried once again applying the css code as listed above.

    The next button image  appears in the design editor but when i preview it i have no image on the button .

  • Profile Image
    JotForm Support

    Answered by david on December 08, 2016 at 05:44 PM

    I checked your form and the correct image is being shown at this time:

    This is the file currently being applied to your next button:

    https://www.jotform.com/uploads/kyrenia/form_files/back.590.jpg

    From this CSS:

    .form-pagebreak-next {
        background : url("https://www.jotform.com/uploads/kyrenia/form_files/back.590.jpg") no-repeat  !important;
        width : 96px !important;
        height : 42px !important;
        box-shadow : 10px 10px 5px #888888!important;
        border : none !important;
    }