Know Your Customers !!!

A user landed on a web page and started filling a form. After going half way, he/she got distracted

or suddenly felt not interested in the same and tried to leave the page by either closing the tab or

by closing the browser itself. In either case, we (a company) lost a prospective client and as the

user didn't submit the form we have no info of the user in order to contact them and get the details

of them not being interested.

Is this your story too ??

Congratulations my friend ... you found the solution for yourself. Please continue reading...

To start with let's modularize our requirement.

There's a web page containing a form, a user lands on it and started filling the form:

1. As soon as the user tries to leave the page, ask them if they are ok with sharing their

unsubmitted data with you and leave the page.

2. If a user chooses to stay on the page, simply allow him to be there.

3. If a user opts for leaving the page without submitting the form, save unsubmitted data.

The requirement may vary slightly in your case ... no worries I am sharing a modularized solution

of the requirement, go ahead and use each component based on your own needs.

Well, I'll not make you wait more ... let's start the implementation.

How to detect a user is leaving the current page and warn him/her of the unsaved changes?

var inputs = $('input, textarea, select').not(':input[type="button"], :input[type="submit"],
:input[type="reset"], :input[type="hidden"]');
//Detecting if user ever started filling the form.
inputs.focus(function() {
  if (!(this.value == "")) {
    displayMessage = true;
  }
}).blur(function() {
  if (!(this.value == "")) {
    displayMessage = true;
  }
});

// Displaying a confirmation box whenever user tries to leave the page.
$(window).on('beforeunload', function(){
  if (displayMessage){
    var message = 'You are trying to leave the page without submitting the form. Incomplete data will
be saved.';
    return message;
  }
});

// Preventing confirmation msg on normal page events like submit.
$(':input[type=submit]').click(
  function(){displayMessage = false;}
);

If the user selects to stay on the page ... be happy :) nothing needs to be done.

But if the user went for leaving the page ... your headache starts.

How to make an ajax call to save incomplete user data?

In your js file, get serialized form content and make an ajax call.

$(window).on('unload', function() {
  //Checking if there are unsaved changes. if yes, making ajax call to save data.
  if (displayMessage) {
    // Fetching for content.
    var form_content = $('form-selector').serializeArray();
    form_content.push({ name: "ip", value: ip });
    // Ajax call to save form data.
    $.ajax({
      'url': Drupal.settings.basePath + 'contact-us-form-data-saving/ajax',
      'async': false,
      'type': 'POST',
      'dataType': 'json',
      'data': form_content,
    });
  }
});

Create a .module file for your drupal module and do the following:
1. Register a path 'contact-us-form-data-saving/ajax' by implementing hook_menu.

2. In page callback of above path registering variable, fetch all the data sent by ajax call to this

path.

eg. $name = isset($_POST['submitted']['full_name']) ? $_POST['submitted']['full_name'] : '';

Similarly, fetch all the data sent by ajax call and save it in your database using db_query.

Followed by

//database query executed successfully ,return 'success' message
if(<process-is-successfull>){
  // Return json
  drupal_json_output("success");
  }else{
  // Return json
  drupal_json_output("fail");
}

That's it friends. We are done. Now you can get your user's not submitted details, go ahead and

know your prospective clients well and analyze the possibilities of you losing them. But do

remember you owe them the security of their data, use these data with utmost care and

responsibility.