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:
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.
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").
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.)
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.
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.
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.