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 add a custom CSS at the clear form button?

    Asked by leemoon on June 12, 2011 at 07:28 AM

    I have tried targeting with css but the button image is placed as a background within the original "Clear Form" button.

     

    .form-submit-reset{

    background-image:url(image url here);}

  • Profile Image
    JotForm Support

    Answered by liyam on June 12, 2011 at 11:42 AM

    Hello leemoon,

    you can try this CSS instead:

    #input_reset_2{
    background-image:url(http://www.leemoon.co.za/storage/graphics/reset-button.gif);
    background-repeat: no-repeat;
    border: 0;
    background-color: transparent;
    text-decoration:none;
    text-indent:-9999px;
    height: 30px;
    width: 80px;
    }

    The only problem that I could see is the alignment of the two buttons, so far I'm having some difficulty acheiving this.  But this can be a good start.

    We'll keep you posted once we find anything.  Please do keep us posted as well if you find a solution.

    Thanks,

    Liyam

  • Profile Image
    JotForm Support

    Answered by abajan on June 12, 2011 at 12:34 PM

    Hi leemoon

    Thanks for asking. If I understand your question correctly (its subject line is incomplete at the time of writing this reply but that will be corrected in due course), you are having diffuculties replacing the default reset button with an image. Assuming this is what you wish to do, the full source code of the form will need to be embedded into your page but first remove the image used to replace the submit button (Properties tab > Button Image: remove the image's URL) and strip the following rule from your injected CSS:

    .form-submit-reset{
    background-image:url(http://www.leemoon.co.za/storage/graphics/reset-button.gif);}

    Next Step:

    Save the form and copy its full source code: Setup & Embed tab > Embed Form > Source:

    Next Step:

    On the web page in which you are going to embed the form, replace the current form code with what you just copied.

    Next Step:

    Search for these lines near the bottom of the form code and replace them with these.


    Tip: Even if the button widths are not identical, their heights should be. (Even just one pixel difference is noticeable to a keen eye.)

    Please let us know if we may be of additional assistance regarding your form(s). Our team will be glad to help where we can.


    ~ Wayne

    UPDATE: If you don't want the borders on the buttons, inject the following extra CSS rule:

    .form-submit-button-img {
    border:none !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    }

    Next Step:

    Copy the full source and paste it over the current form code in your web page

    In the source you just pasted, you will need to replace the relevant lines in this block of code with these lines. (The change is two instances of an extra class: form-submit-button-image)