How can I add an Image to the clear Button?

  • Profile Image
    necropersa
    Asked 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

  • Profile Image
    jonathan
    Answered 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
    necropersa
    Answered 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
    azhar000
    Answered 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
    necropersa
    Answered 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
    jedcadorna
    Answered 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
    necropersa
    Answered 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
    necropersa
    Answered 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
    Welvin
    Answered 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