Disable AMP For A Form Submission

Question

I am working on an existing static site (only HTML and Javascript) that uses AMP. I need to add a form that submits a POST request to a third party service. The service only accepts POST requests.

When I add the form using normal HTML I get the following error.

Only XHR based (via action-xhr attribute) submissions are support for POST requests.

Doing some research I learned that AMP forms require the action-xhr attribute. Changing my form's action attribute to action-xhr results in this error:

The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Is there a way I can add a form to a site that uses AMP so that the form submits a POST request to a third party URL? Preferably AMP would not interfere at all.

Answer 1

You can manually submit the form by adding onclick="submit()" to your submit button. This will let you Submit the amp-form through the action method on a POST request.

Example:

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<form method="POST" action="url/">
    <label>Name</label>
    <input type="text" name="name">
    <button type="submit" onclick="submit()" Submit</button>
</form>

Answer 2

Here's the PHP script I use to submit an AMP form to a 3rd party service (JotForm):

<?php 

    if (!empty($_POST)) {
      header("access-control-allow-credentials:true");
      header("access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token");
      header("access-control-allow-methods:POST, GET, OPTIONS");
      header("access-control-allow-origin:".$_SERVER['HTTP_ORIGIN']);
      header("access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin");
      // change to represent your site's protocol, either http or https
      header("amp-access-control-allow-source-origin:https://".$_SERVER['HTTP_HOST']);
      header("Content-Type: application/json");
      $firstName = isset($_POST['first_name']) ? $_POST['first_name'] : '';
      $lastName = isset($_POST['last_name']) ? $_POST['last_name'] : '';
      $phone = isset($_POST['your_phone_number']) ? $_POST['your_phone_number'] : '';
      $email = isset($_POST['your_email']) ? $_POST['your_email'] : '';
      $city = isset($_POST['driver_app_request_call_hiring_city']) ? $_POST['driver_app_request_call_hiring_city'] : '';

      try {
        include "JotForm.php";
        $jotformAPI = new JotForm("APIkey");
        $submission = array(
            "3" => $firstName,
            "4" => $lastName,
            "5" => $phone,
            "6" => $email,
            "7" => $city
        );
        $result = $jotformAPI->createFormSubmission("formId", $submission);
        $output = ['message' => "Your application was submitted. Thank you!"];
        header("Content-Type: application/json");
        echo json_encode($output);

      } catch (Exception $e) {
        var_dump($e->getMessage());
      }
  }
?>

Works pretty well for us!