Grow your CSS skills. Land your dream job.

How do I make an AJAX rollover button for contact form?

  • # March 12, 2009 at 9:31 pm

    …………………..

    # March 13, 2009 at 6:42 am

    I use the jQuery Form Plugin for AJAX. Download it from here and insert it into the <head> section of your page. Then invoke your form by using the following script:

    Code:

    This script also adds a class of .hover when you rollover the submit button. Actually it will add the class ‘hover’ to any <input> tag within the form that has the class ‘button’. It also removes the ‘hover’ class when the mouse moves out of the button. This enables you to style your button using simple css.

    Code:
    #button {
    background: …;
    }

    #button.hover {
    background: …;
    }

    One final note, in order to make the Ajax plugin work you need to set the form’s action to the actual URL that handles the ajax. This has the added benefit of enabling non-ajax submits when users without javascript visit your site.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".