I am trying to post a CRM Capsule page using http://support.capsulecrm.com/customer/portal/articles/1639817-website-contact-form-integration , which I can get pretty easily. However, I wanted to post this using AJAX but kept running into CORS error. The Capsule CRM guys have disabled them on their side, so you can't submit AJAX without participating in this error.

Approaching them, I got the answer:

To fulfill your requests using AJAX, your website will need an additional page that will handle your website POST to your site rather than sending it directly to the capsule. This is sometimes referred to as AJAX Proxy. This page just redirects the message to the URL of the Capsule web form for processing, if you don't specify "COMPLETE_URL" in your post, the form will return an HTTP 200 response instead of a redirect to make it a little easier for you.

After spending much of my time on the internet looking for an "AJAX proxy" I can't seem to find an example and start struggling to get it to work. Hope some code helps 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 almost need to do a double post. I need to send data to Capsule.php and then I need to send a message. If this answer successfully reverses everything and updates the form.html without updating. Or does anyone know how I should be configuring an "AJAX proxy"?

This is my first solo delving into AJAX, so please be careful :).

EDIT

After trying the answer below and debugging it, I have this on console in developer tools. Difficult to debug as I do not have access to the Capsules CRM server, so I am currently emailing them as well due 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
)

      

        
        
        
      

    

Thanks everyone for your patience!