Submitting Forms to Both Webvanta and a Third-Party Service

Normally, a form is submitted to exactly one server. The action attribute on the form element tells the browser where to submit the form.

There are times, however, when you want to submit to more than one place. For example, you might have a form on your site that allows users to enter their information for a business directory, using a Webvanta custom item type to hold their information. But you also want to submit that same information to an email marketing system, such as MailChimp, or a lead management system, such as Salesforce.com.

The trick to make this work is simple, in principle:

1. Intercept the form submit with JavaScript.
2. Capture the contents of the form fields into JavaScript variables.
3. Do any required form validation.
4. Create a form submission to Webvanta using JavaScript.
5. Allow the normal HTML form submit to occur to the third-party system.

Start with a Third-Party HTML Form

Suppose, for example, that you have a business directory on your site, and companies can enter their own information. Since you need this information to be stored on the Webvanta site, you'll use a custom item type, and you can easily build a form that would submit to the Webvanta database.

However, you also want to feed this information Salesforce.com for your sales team to follow-up with and upsell to a premium listing.

Because of the way the JavaScript security model works, you cannot reliably perform a JavaScript form submission from one domain to another. Thus, you need to use the HTML form to submit to the third-party service, and then use JavaScript to submit the information to the Webvanta database.

So we start with a Salesforce "web-to-lead" form, which you can get from Salesforce. Here's an example:

<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" id="salesforce_form_id">
    <input type="hidden" name="oid" value="your-salesforce-id-here">
    <input type="hidden" name="retURL" value="http://www.my-webvanta-site.com/thank-you/">
    <p>
         <strong>* First Name:</strong><br />
         <input name="first_name" maxlength="40" type="text">
    </p>
    <p>
         <strong>* Last Name:</strong><br />
         <input name="last_name" maxlength="40" type="text">
    </p>
    <p>
         <strong>* Organization:</strong><br />
         <input name="company" maxlength="80" type="text">
    </p>
    <p>
         <strong>* E-mail Address:</strong><br />
         <input name="email" maxlength="80" type="text">
    </p>
    <p>
         <strong>* Phone:</strong><br />
         <input name="phone" maxlength="40" type="text">
    </p>
    <p>
         <input type="submit" name="button" id="button" value="Get Started" />
    </p>
</form>

By itself, this form will simply submit the information to Salesforce.com, and then return to your Webvanta site for the "thank you" page (using the URL set in the hidden field named "retURL").

Using JavaScript to Submit to Webvanta First

To submit the same information to your Webvanta site's database, you must first create a custom item type (see Creating Custom Item Types) that has fields that correspond to each of the Salesforce fields. (You could ignore some of them if you wanted.)

The following jQuery/JavaScript code intercepts the form submission and posts the data to Webvanta before continuing on to submit to Salesforce:

<script type="text/javascript">
$(document).ready(function(){
    $('form').submit(function(){
         var first_name = $('form input[name="first_name"]').val();
         var last_name = $('form input[name="last_name"]').val();
         var company = $('form input[name="company"]').val();
         var email = $('form input[name="email"]').val();
         var phone = $('form input[name="phone"]').val();
         if $('form').validate({insert validation options here}) {
              $.post('/salesforce_processing',
                   {
                   'form_id' : 'salesforce_form_id',
                   'email2' : '',
                   'sample[name]' : first_name + " " + last_name,
                   'salesforce_form_id[dymd][first_name]' : first_name,
                   'salesforce_form_id[dymd][last_name]' : last_name,
                   'salesforce_form_id[dymd][company]' : company,
                   'salesforce_form_id[dymd][email]' : email,
                   'salesforce_form_id[dymd][phone]' : phone
                   },
              return true; 
         } else {
              return false;
         }
    })
})
</script>

By defining a submit function for the form, this function will be executed when the submit button is clicked.

The first group of lines simply grab the values of each of the form fields and assign them each to a variable so we can deal with them easily.

The next thing this code needs to do is to validate the form, to ensure that it will submit successfully to both destinations. We've shown the jQuery validation plugin being used here; for simplicity, we have not shown the validation options. (See Validating Forms with jQuery.) This function returns "true" if the form information is valid, and "false" if it is not.

If the form passes validation, then we use a JavaScript post function to submit the form to the Webvanta system. The parameters for the form submission are key/value pairs, where the key is the name of the field as required by Webvanta, and the value is the value that we captured from the form in the first part of the code.

The field names set in these keys must be precisely named as required by the Webvanta system. The easiest way to get these is to create a submission form through the normal Webvanta workflow (see Creating Forms for User Submissions). Even though you won't be using Webvanta form HTML code, it will provide you with the list of names for the form fields that you need to use in the JavaScript post function.

Finally, the submit function returns "true", so the submit to Salesforce.com will proceed — unless, of course, the validation failed, in which case it returns "false" so the form submission will not proceed.