Webform is the out-of-box module to create custom forms within Drupal. But its core code base is futile to provide Ajax enabled forms. With Ajax module, webform can be tweaked to get the desired result. I had to create some Ajax enabled webform for my recent projects. I am sharing the same in this blog post.

I am using webform version 3.9 and ajax 1.14. I assume your site already have some web forms. To keep it simple I am going to call my form as "contact form" and it is similar to core contact form.

The very first step in this process is to download Ajax module and enable its sub-modules ajax, ajax_ui, ajax_webform. Now in Ajax settings form, Administer > Site configuration >  Ajax Settings, you will be able to see the list of forms that can be Ajaxed. Change "enabled" checkbox of row "Webform: contact" to ticked.

Access the webform node page, in my case it is http://localhost/drupal6/node/14. Now the webform should be able to validate fields without page reload, however when the submission is success it will redirect to http://localhost/drupal6/node/14/done?sid=17&2050251161=1. This is the default behaviour of webform module. To prevent this we need to change redirection settings. To do so from url http://localhost/drupal6/node/14/webform/configure Change field "Redirection location" value to "No redirect". Also you need to fill in "Confirmation message" field otherwise no status message will be displayed after form submission.

Now submit the webform it will work as we expect.

This is fine, however webform doesn't clear fields when the submission is success. To do so we need to apply a patch to ajax.js and install a custom module that will implement an Ajax plugin to clear form after submission. The gist of the patch and module can be found below, You can find the downloadable version at drupal.org http://drupal.org/project/contact_webform

Patch file

diff --git a/sites/all/modules/contrib/ajax/ajax.js b/sites/all/modules/contrib/ajax/ajax.js
index f7cab78..745e713 100644
--- a/sites/all/modules/contrib/ajax/ajax.js
+++ b/sites/all/modules/contrib/ajax/ajax.js
@@ -197,6 +197,7 @@ Drupal.Ajax.message = function(formObj, submitter, data, options) {
   if (Drupal.Ajax.invoke('message', args)) {
     Drupal.Ajax.writeMessage(args.formObj, args.submitter, args.options);
   }
+  Drupal.Ajax.invoke('afterComplete', data);
   return true;
 };

Module file.

/**
 * Implementation of hook_nodeapi().
 */
function contact_webform_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL) {
  $webform_nid = 14;
  if (('view' == $op) && ($webform_nid == $node->nid)) {    
    drupal_add_js(drupal_get_path('module', 'ajax') . '/ajax.js');
    drupal_add_js(drupal_get_path('module', 'contact_webform') . '/contact_webform.js');
  }  
}

Ajax Plugin JavaScript file

/**
 * Ajax Forms plugin for contact_webform
 */
Drupal.Ajax.plugins.contactformplus = function(hook, args) {   
  if (hook != 'afterComplete') {
    return true;
  }
 
  // check for webform error message, don't clear form if any error message is printed
  // Change selectors to match to your theme markup
  if ($(".node .ajax-form .status").length == 0) {    
    return true;
  }  
  $(".node form.ajax-form").each(function() {    
    $(this).get(0).reset();
  });  
  //$(".webform form .status").fadeOut(2500, "linear", complete);
  return true;
}