Title: This Ajax Code doesn't work in WordPress
Last modified: August 20, 2016

---

# This Ajax Code doesn't work in WordPress

 *  [alvarols](https://wordpress.org/support/users/alvarols/)
 * (@alvarols)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/)
 * I’m trying to implement an ajax contact form. In a static site it works well 
   but in WordPress in spite of that i can sent mails. The contact form stops showing
   the message “sending mail”. I don’t know what’s the problem.
 * Here you can see the contact form working well on a static page: [http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/](http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/)
 * This is the Javascript code where ajax is:
 *     ```
       var messageDelay = 2000;  // How long to display status messages (in milliseconds)
   
       // Init the form once the document is ready
       $( init );
   
       // Initialize the form
   
       function init() {
   
         // Hide the form initially.
         // Make submitForm() the form's submit handler.
         // Position the form so it sits in the centre of the browser window.
         $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
   
         // When the "Send us an email" link is clicked:
         // 1. Fade the content out
         // 2. Display the form
         // 3. Move focus to the first field
         // 4. Prevent the link being followed
   
         $('a[href="#contactForm"]').click( function() {
           $('#content').fadeTo( 'slow', .2 );
           $('#contactForm').fadeIn( 'slow', function() {
             $('#senderName').focus();
           } )
   
           return false;
         } );
   
         // When the "Cancel" button is clicked, close the form
         $('#cancel').click( function() {
           $('#contactForm').fadeOut();
           $('#content').fadeTo( 'slow', 1 );
         } );  
   
         // When the "Escape" key is pressed, close the form
         $('#contactForm').keydown( function( event ) {
           if ( event.which == 27 ) {
             $('#contactForm').fadeOut();
             $('#content').fadeTo( 'slow', 1 );
           }
         } );
   
       }
   
       // Submit the form via Ajax
   
       function submitForm() {
         var contactForm = $(this);
   
         // Are all the fields filled in?
   
         if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
   
           // No; display a warning message and return to the form
           $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
           contactForm.fadeOut().delay(messageDelay).fadeIn();
   
         } else {
   
           // Yes; submit the form to the PHP script via Ajax
   
           $('#sendingMessage').fadeIn();
           contactForm.fadeOut();
   
           $.ajax( {
             url: contactForm.attr( 'action' ) + "?ajax=true",
             type: contactForm.attr( 'method' ),
             data: contactForm.serialize(),
             success: submitFinished
           } );
         }
   
         // Prevent the default form submission occurring
         return false;
       }
   
       // Handle the Ajax response
   
       function submitFinished( response ) {
         response = $.trim( response );
         $('#sendingMessage').fadeOut();
   
         if ( response == "success" ) {
   
           // Form submitted successfully:
           // 1. Display the success message
           // 2. Clear the form fields
           // 3. Fade the content back in
   
           $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
           $('#senderName').val( "" );
           $('#senderEmail').val( "" );
           $('#message').val( "" );
   
           $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
   
         } else {
   
           // Form submission failed: Display the failure message,
           // then redisplay the form
           $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
           $('#contactForm').delay(messageDelay+500).fadeIn();
         }
       }// JavaScript Document
       ```
   
 * _[Moderator Note: Please post code or markup snippets between backticks or use
   the code button. Or better still – use the [pastebin](http://wordpress.pastebin.com/).
   As it stands, your code may now have been permanently damaged/corrupted by the
   forum’s parser.]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054722)
 * Have you reviewed [Using_Javascript](http://codex.wordpress.org/Using_Javascript)?
 *  Thread Starter [alvarols](https://wordpress.org/support/users/alvarols/)
 * (@alvarols)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054730)
 * Yes. Part of the js works well. But it stops when PHP have to say to the JS that
   the mail has been sent
 *  [Andrew Bartel](https://wordpress.org/support/users/andrew-bartel/)
 * (@andrew-bartel)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054735)
 * Ajax in WordPress can be tricky, I spent most of an afternoon on it when I first
   learned it. The major thing you have to remember is that you must pass all ajax
   calls to wp-admin/wp-ajax.php rather than to a page of your choosing, run function
   calls that echo a response rather than calling a different php file, and reference
   that function in an add_action. I found [this](http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/)
   article to be invaluable.
 * If you’re still stuck in a couple hours, we can go through it step by step.
 *  Thread Starter [alvarols](https://wordpress.org/support/users/alvarols/)
 * (@alvarols)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054761)
 * Are there an easiest way to learn how to use Ajax in WP?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054763)
 * See [http://codex.wordpress.org/Function_Reference/wp_enqueue_script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)
 *  Thread Starter [alvarols](https://wordpress.org/support/users/alvarols/)
 * (@alvarols)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054772)
 * Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘This Ajax Code doesn't work in WordPress’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [alvarols](https://wordpress.org/support/users/alvarols/)
 * Last activity: [13 years, 9 months ago](https://wordpress.org/support/topic/this-ajax-code-doesnt-work-in-wordpress/#post-3054772)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics