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 add an Image to the clear Button?

    Asked by necropersa on April 09, 2014 at 08:21 AM

    i want to know how can a add a clear button and how replace the button sltyle with an image. Thanks :D

    add an image thanks and
  • Profile Image
    JotForm Support

    Answered by jonathan on April 09, 2014 at 09:59 AM

    Hi,

    From what I can see on your form https://www.jotform.com/40937757111658 , you seem to have figured it out already.

    I see the image added to the clear/reset button using injected CSS code

    .form-submit-reset {
    background: url(http://i61.tinypic.com/ayn4zk.jpg);
    }
    Please inform us if you need further assistance.
    Thanks!
  • Profile Image

    Answered by necropersa on April 09, 2014 at 10:07 AM

    Yeeeaah!! i just did it, but i have another problem, i want to align the clear button with the send one and get ride off these rounded edges :( can you help me pls?

  • Profile Image

    Answered by azhar000 on April 09, 2014 at 10:15 AM

    The answer to the first query is you need to change the button type to "reset". There are three types of button. They are:

    1. button (It is a simple clickable button)

    2. submit (It submit the form data)

    3. reset (It reset/clear the form data)

    See the location of button type by firebug inspection:

    You can add a clear button by cilcking on the Reset Button which is shown in the image below:

    To solve the second issue you need to click right button on submit button and then go to show properties like the image below:

    And then you have to insert the link of image in Button Image field as shown in the picture below:

    You can get the image link from the given link below:

    https://www.jotform.com/help/image_upload.php?naked=true

    Hope you will be able to solve your problem.

    Thanks

  • Profile Image

    Answered by necropersa on April 09, 2014 at 11:08 AM

    To delete rounded borders use this "border-radius: 0px;" how can i delete the reset button text when the cursor is over it? (i already remove it when it's not.)

  • Profile Image

    Answered by jedcadorna on April 09, 2014 at 11:15 AM

    To align the button easily I suggest that you create an image of both with same height and width so that when you attached a background image to each buttons (Submit and Clear) they will be evenly aligned. 

    About your question how to remove the button text when hovered on Clear button upon checking your form I can see that there is no text when you hover on it. Can you please confirm on this.

  • Profile Image

    Answered by necropersa on April 09, 2014 at 11:31 AM

    Remove text: Right! there's no text, only appears when is editing.

    Button align: still not working, even i tried to not use the "image" jotform option to replace the button for an image and instead i use only css codes, and still not align, any code for an alignment per pixels?

  • Profile Image

    Answered by necropersa on April 09, 2014 at 11:41 AM

    Hi again! i just fix the align prob, use this "padding-top: 7px" you can also use "right" "left" or "bottom"

    But still have another and last question:

    How can i set the same image when the cursor is over the button?

    Thanks guys, love ya.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 09, 2014 at 12:33 PM

    Just add hover CSS. Use the following codes:

    For submit button: http://pastiebin.com/53457641994f2

    Form reset button: http://pastiebin.com/53457659f0fed

    Same guide with injecting the codes to your form: How to Inject Custom CSS Codes

    Thanks