Using Contact Form and passing data to a second script

Question

I'm using the Contact Form in an ExpressionEngine 3.5.10 website to send an email from the "Contact us" page to our sales department. All of this works fine.

However, they also want this form to feed data into Salesforce. I have a separate form - on another page of the website - which does this by making a jquery ajax call to a PHP script which I set up to do this. This also works fine, but as mentioned, is on a separate web page to my contact form.

What I'm trying to do is make it so that my Contact Form will make the ajax request to this PHP script - and then afterwards - carry on as normal by using the ExpressionEngine Contact Form functionality.

So I tried to do this...

My Contact Form has an ID, #contactForm.

The button that sends my Contact Form has an ID, #sendBtn. So I have used jquery to target this and prevent normal form submission e.preventDefault:

$('#sendBtn').click(function (e) {
    e.preventDefault();
    //...

I then run my ajax call to a script (at ajax/index - this is actually an EE template with PHP enabled):

$.ajax({
   type: "POST",
   url: '/ajax/index',
   dataType:"JSON",
   data: $("#contactForm").serialize()
   // ...
});

I then allow the form submission to occur as normal - because it had been "stopped" with e.preventDefault() earlier:

$("#contactForm").submit();

In the Network tab of my browser I can see it making 2 requests, one to /ajax/index and another to /contact-us (which is the URL of the contact form page). However, it's giving odd and random results. The email always seems to arrive, but the data doesn't always appear in Salesforce.

Sometimes there is a HTML response message from one script saying "thank you - email has been sent", whereas other times there is an error saying something about not being able to send more than 1 contact form every 20 seconds. These messages and their responses come from ExpressionEngine, they are not something I have coded in.

What's even more bizarre is that the HTML response from /ajax/index looks like the response I'd expect from EE's email/contact form functionality. But that should only occur on the POST request to the contact page (/contact-us). Because /ajax/index script is all custom code, and has nothing whatsoever in it to do with EE's email functionality! In fact my /ajax/index script returns a json response - the file sets those headers - and has no HTML response whatsoever, so clearly EE is "doing something" with the way it's processing/handling my scripts.

Am I going about this the wrong way? Is it even possible to do this, i.e. post the data to Salesforce and then have it carry on with the normal contact form script execution?

Any advice would be appreciated.

Answer 1

Take a look at Freeform Next. https://solspace.com/expressionengine/freeform It has CRM integrations build in, including Salesforce. Plus, all your data is stored in the DB and you can run reports against it or set up exports. The built in contact form is fairly rudimentary in how you can interact with it.

Answer 2

The issue I was having is two-fold:

Problem 1:

I was serializing the entire form contents before making the ajax request, with $("#contactForm").serialize(). The ajax request was being made to a PHP script (/ajax/index) but this was actually just an EE template with PHP enabled. The problem - as far as I can tell - is that serializing the entire form submits things such as the ACT variable. I imagine EE has something built in to check when this is present and perform the appropriate action. I think this is why it was attempting to send an email when running my ajax call, even though the ajax/index script had nothing to do with sending an email in it. To test this I tried making a version of these scripts in vanilla PHP running outside EE and this problem does not occur. So this is an EE specific thing, probably due to what is being posted.

Solution to problem 1:

Send only the form fields you need in the ajax post. Easy enough, e.g.

var firstName = $('#firstName').val(),
lastName = $('#lastName').val(),
// other vars

$.ajax({
     type: "POST",
     url: "/ajax/index",
     data: {firstName: firstName, lastName: lastName, // other vars},
     cache: false
 });

Problem 2:

I was making an ajax post request to /ajax/index then submitting my form, and the script would not "wait" for /ajax/index to complete before submitting the form. This is nothing to do with EE but is because ajax is asynchronous. The solution to this is to use Promises (or Deferred objects in jquery, utilising .done).

Solution to problem 2:

var self = this,
// other vars

$.ajax({
     type: "POST",
     url: "/ajax/index",
     data: {firstName: firstName, lastName: lastName},
     cache: false
 }).done(function(result) {
     // Submit the form as normal  
     self.submit();
  }).fail(function() {
     alert('error');
  });