Community Documentation

HOWTO: Adding Jquery for better Usability on the contact form

Last updated November 3, 2008. Created by xamount on August 31, 2008.
Edited by Max_Headroom, erikwebb, dereine. Log in to edit this page.

If the user on the contact page has to fill out a lot of fields, but forgot about it, it would be better if he is warned that he still has to fill out some fields to send the contact.

So as each jquery file, in template.php you can add the js file with:

<?php
drupal_add_js
(path_to_theme(). '/jquery.contact.js');
?>

In our JS File, jquery.contact.js, we add a function to the submit function, which checks whether all fields are filled up, if not it alerts some messages

if (Drupal.jsEnabled) {
  $(document).ready(function() {
  $('form#contact-mail-page').submit(function () {
    //if one of this fields as nothing in print out that the form is not ready yet
    //  if ready the field is send
    if ($('#contact-mail-page #edit-name').val() == "") {
      alert(Drupal.t("The Field @name isn't filled out yet", ['@name'] = Drupal.t("name")]);
      return false;
    }
    else if ($('#contact-mail-page #edit-subject').val() == "") {
      alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("subject")]);
      return false;
    }
    else if ($('#contact-mail-page #edit-mail').val() == "") {
      alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("mail")]);
      return false;
    }
    else if ($('#contact-mail-page #edit-message').val() == "") {
      alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("message")]);
      return false;
    }
    else {
      return true;
    }
  });
});
}

About this page

Drupal version
Drupal 5.x
Drupal’s online documentation is © 2000-2012 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.