How do I add a custom CSS at the clear form button?

  • Profile Image
    leemoon
    Asked 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
    liyam
    Answered 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
    abajan
    Answered 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)