发布到Capsule CRM和“AJAX代理”

Question

I am trying to post a Capsule CRM page using http://support.capsulecrm.com/customer/portal/articles/1639817-website-contact-form-integration which I can get working quite easily. However, I wanted to post this using AJAX, but kept running into a CORS error. The Capsule CRM guys have this turned off on their side so you cannot submit using AJAX with out running into this error.

After reaching out to them, I got this response:

To do your requests using AJAX your website will need an additional page that will process your webform POST on your site instead of sending it directly to Capsule. This is sometimes called an AJAX Proxy. This page just forwards the post onto the Capsule webform url for processing, if you don't specify a "COMPLETE_URL" on your post the form will return an HTTP 200 response instead of a redirect to make it a bit easier for you to handle.

Having spent a significant portion of my time on the internet looking for an "AJAX proxy" I cannot seem to find an example and beginning to struggle to get it working. Hopefully some code will help with my question.

form.html

<form id="contact-form" class="form">
  <label>Name: </label>
  <input type="text" name="PERSON_NAME" placeholder="Name" value="" required/>
  <label>Email: </label>
  <input type="email" name="EMAIL" placeholder="Email" value="" required  /><br>
  <label>Telephone: </label>
  <input type="text" name="PHONE" placeholder="Telephone number" value="" required /><br>
  <input type="submit" name="submit" value="Submit" />
</form>
<div class="result">
</div>

form.js

$(document).ready(function() {

$('.form').submit(function(event){

    event.preventDefault();
    var messages = $('#result');
    var formData = $('.form').serialize();

    $.ajax({
        type        : "POST",
        url         : capsule.php,
        data        : formData
    })  
    .done(function(response) {
            console.log("Success: " + response);
        }
    })
    .error(function(response)   {
            console.log("Error: " + response);
        }
    });
});

capsule.php

<?php
<form action="https://service.capsulecrm.com/service/newlead" method="post">
    <input type="hidden" name="FORM_ID" value="XXXXXXXXXXXXXXXXXXXXXXXX">
    <input type="text" name="FIRST_NAME" value="$_POST['PERSON_NAME']">
    <input type="text" name="LAST_NAME" value="$_POST['PERSON_NAME']">
    <input type="text" name="EMAIL" value="$_POST['PERSON_NAME']">
</form>
?>

I kind of almost need to do a double post. I need to post the data to the Capsule.php and then I need that to post. If that response is successful reverse it all and update the form.html without refreshing. Or does any one know how I should be forming the "AJAX proxy"?

This is my first solo delve into AJAX so please be gentle :).

EDIT

After trying out the answer below and with the debugging on I have this back in the console in developer tools. It is difficult to debug as I don't have access to Capsules CRM server so I am currently also emailing them in regard to the problems I am having:

(
    [url] => https://service.capsulecrm.com/service/newlead
    [content_type] => 
    [http_code] => 404
    [header_size] => 315
    [request_size] => 206
    [filetime] => -1
    [ssl_verify_result] => 0
    [redirect_count] => 0
    [total_time] => 0.397695
    [namelookup_time] => 0.045858
    [connect_time] => 0.109964
    [pretransfer_time] => 0.268374
    [size_upload] => 705
    [size_download] => 0
    [speed_download] => 0
    [speed_upload] => 1772
    [download_content_length] => 0
    [upload_content_length] => 705
    [starttransfer_time] => 0.333441
    [redirect_time] => 0
)

Thank you all for your patience!

Answer 1

You've misunderstood AJAX proxy concept.

capsule.php script shouldn't contain form HTML, it should receive AJAX request data from form.html and send/pass it to Capsule CRM page by POST request. This can be done by bunch of ways: CURL, file_get_contents() and others.

Below is CURL implementation:

$ch = curl_init();
curl_setopt_array($ch, array(
    CURLOPT_URL => 'https://service.capsulecrm.com/service/newlead',
    CURLOPT_NOBODY => false,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => $_POST,
    CURLOPT_SSL_VERIFYPEER => false,
));
$response = curl_exec($ch);
if ($response && curl_getinfo($ch, CURLINFO_HTTP_CODE) == 200)
    return $response;
header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');