Supercharged Forms: Complex Form Processing with SecureForm and jQuery

Published: September 15th, 2014

The classical web form is very simple: Customer fills it out and hits submit; the form submits and is processed; the data is emailed to the desired recipient.  Clean, simple, and easy to implement and secure.  Even easier by plugging the form into an existing backend form processor like SecureForm.

Time passes and business requirements get more complicated.  You need your form data to be handled in increasingly varied and complex ways, automatically.

For example:

  1. You need an encrypted copy of the data to be stored in your archival system
  2. Once archived, the data needs to be re-filled into a PDF and emailed to your sales team for review
  3. It also needs to be FTP’d securely to your office server to be ingested into your your office CRM system

Another example:

  1. Your data needs to be submitted and processed as usual
  2. Instead of re-directing to a new page when the submission is complete, you need to simply alter the current page (e.g. remove the submit button and say “Thank you”)

These examples and complex variations on them can all be readily achieved without much effort by combining the swiss-army-knife features of SecureForm and jQuery.

Adding jQuery to your Forms

This discussion assumes you are familiar with JavaScript programming and the basics of using jQuery.  If you are not, it should be easy to find a web developer who is, as these technologies are ubiquitous on the Internet.

Note that the SecureForm “Form Builder” interface is simplified for ease of use and does not readily allow implementation of complex submission pathways as described herein.

If you are hosting your own web form on your own web site, you can include jQuery to your page by adding the Google-hosted URL to the HEAD of your web form page:

<script

src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Submitting your form via AJAX

Next, you will be configuring your forms to submit the data via AJAX to the SecureForm server.  This means that instead of manually submitting the data and then being redirected to a success or error web page, you will use jQuery to submit the form and will then receive a success or error code back that you can then act upon.  There will be no “redirection” of your visitor to a new web page by SecureForm.

First, you need to edit your SecureForm configuration to let it know that you will be using AJAX.

In the SecureForm configuration area for your form, click on the “Form” menu item in the left menu.  Then click on “Edit These Settings” under “Advanced Settings”.  Change “Return HTTP Status Codes Only” to “Enabled”.

Note that once you do this, your form will no longer redirect to a success page … you need to control what happens after your form is submitted using JavaScript.

 Next, you need to configure your form to call your custom JavaScript function when you wish to submit it.

1. Add the following to your <form … > tag (so pressing Enter on a text form field does not submit the form in the classical way):

onSubmit="return false"

E.g.

<form id="myform" name="myform" method="POST"
action="#" onSubmit="return false;"></form>

2. Alter your form submission button(s) so that they are of type “Button” instead of type “Submit”.

The prevents them from automatically submitting the form in the classical way, when pressed.  Be sure each button has its own unique “Id”. E.g.

<input type="button" name="submit_form"
id="submit_form value="Submit Form Now">

3. Create a JavaScript function that will be used to submit your form, and have this function called when your submit button is pressed.

Add this custom JavaScript to your page (at the end).

<script>
function do_submit_form() {}

// Have a click on your button call this function
$("#submit_form").click( do_submit_form );
</script>

4. Have your function actually submit your form via AJAX using jQuery.  E.g. flesh out your function:

function do_submit_form() {

$.ajax({ type: "POST",
   url: "https://secureform.luxsci.com/perl/post/custom_code_for_your_form",
   data: $("#myform").serialize()
})
.done( function() {} )
.fail( function() {} );

}

Note that this assumes that your tag has an “id” called “myform” (e.g. “<form id="myform">“).  It also assumes that you know the SecureForm URL to which you should post your forms and replace the example one with your actual one.

So far, these changes will cause your form to submit when you press your submit button.  But you will not know if it worked or failed as nothing will appear to happen.  This is because we have not indicated what to do yet on success (the “done” function) or failure.

What you do next depends on what complicated logic your forms require and how you want to handle errors.  E.g. you could modify your failure function to simply tell your users that the submission failed and ask them to retry.

function do_submit_form() {

$.ajax({ type: "POST",
   url: "https://secureform.luxsci.com/perl/post/custom_code_for_your_form",
   data: $("#myform").serialize()
})
.done( function() {} )
.fail( function() {
      alert("Sorry. Form submission failed. " +
         "Please click on 'Submit Form Now' to try again.");
   });

}

In terms of form submission success, you could use jQuery to modify the page to hide the submit button and give a “thank you” message. E.g.

done: function() {
   $("#submit_button").after("<p>Thank you for your form submission!</p>");
   $("#submit_button").hide();
},

You could also use jQuery to submit the form again to a different SecureForm processing configuration.  E.g. if the first one emailed the raw data securely to the archival user and you want a second one that does something completely different, like re-filling a PDF and emailing to sales, we can now submit to that second configuration. That configuration should also be configured to return only HTTP status codes:

.done( function() {
$.ajax({ type: "POST",
   url: "https://secureform.luxsci.com/perl/post/SECOND_custom_code_for_your_form",
   data: $("#myform").serialize(),
   })
.done( function() {
      $("#submit_button").after("Thank you for your form submission!");
      $("#submit_button").hide();
   })
.fail( function() {
      alert("Sorry. Form submission failed.  Please click on 'Submit Form Now' to try again.");
   });

)}

Full Example

Finally, we can expand this example into a full-fledged script that

  1. works with SecureForm Form Spam blocking,
  2. disables the submit button when it is pressed,
  3. handles errors,
  4. submits your form data to TWO different SecureForm configurations, and
  5. redirects the user to your custom thank you page once both submissions are successful:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

// If you enable FORM SPAM blocking, you need to include 
// a custom JavaScript library with a custom code embedded here. 
// See your SecureForm configuration for the exact URL to use.

<script>
function do_submit_form() {

// If you need to do any custom validation, add it here.

// If you have "SPAM Bot Checking" enabled in SecureForm, 
// the following will do the "heavy lifting" required
if (window.secureform_submit) {
   if (! secureform_submit()) { return false; }
   }

// Hide the submit button so it can't be pressed again.
$("#submit_button").hide();

// Submit form to the 1st SecureForm 
$.ajax({ type: "POST",
   url: "https://secureform.luxsci.com/perl/post/custom_code_for_your_form", 
   data: $("#myform").serialize()
   })
   .done( function() { 
      // 1st post success... do the 2nd post 
      $.ajax({ type: "POST", 
          url: "https://secureform.luxsci.com/perl/post/custom_code_2", 
          data: $("#myform").serialize()
          }) 
          .done( function() { 
             // Both submissions worked. 
             // Redirect to a new page 
             document.location = "https://some-new-page.com/..."; 
          })
          // Unlikely but possible that the 1st works and the 2nd fails... 
          // Note that if this happens, the 1st submission did still get sent... 
          .fail( function() { 
             // Show the button again 
             $("#submit_button").show(); 
             // Tell the user of the error. 
             alert("Sorry. Form submission failed. " +
               "Please click on 'Submit Form Now' to try again."); 
           });

  })
  .fail( function() { 
       // Show the button again 
       $("#submit_button").show(); 
       // Tell the user of the error. 
       alert("Sorry. Form submission failed. " + 
           "Please click on 'Submit Form Now' to try again."); 
   });

} // end of do_submit_form 

// Have a click on your button call this 
$("#submit_form").click( do_submit_form ); 
</script>

Clearly, this can be expanded without limit using jQuery to do things like:

  • Validate your form before submission
  • Display visual feedback of submission progress to the end user
  • Redraw all or part of the page on submission success
  • Send AJAX separate AJAX commands to your site or system on success or failure
  • Load data from external sources to include in the form or submission
  • Modify the format of the form data before submission
  • Generate and add additional information to the form submission

The possibilities are endless.

Leave a Comment


You must be connected or logged in to post a comment. This is to reduce spam comments.

If you have not previously commented, you can connect using existing social media account, or register with a new username and password.