How To Create AMP Contact Forms In WordPress

Looking to create an AMP-friendly contact form in WordPress? This guide will explain how you can create any AMP-based form with PHP mailing functionality.

Creating an AMP contact form

1. Include the required AMP libraries

You need to include both the AMP-form and AMP-mustache libraries in your WordPress theme’s header.php file, between the <head> tags.

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

2. Build your AMP-form

For this example, you need to create the AMP-form and its handler (form-handler.php) in the same directory somewhere within the chosen WordPress theme’s directory.

<form id="contact-form" name="contact_form" method="post" action-xhr="<?php echo get_template_directory_uri(); ?>/form-handler.php" target="_top" on="submit:contact-form.clear">
     <input type="text" name="your_name" required />
     <input type="email" name="your_email" required />
     <input type="text" name="your_telephone" />
     <input type="text" name="your_subject" />
     <textarea name="your_message"></textarea>
     <input type="submit" name="submit" value="Send message" />
     <div submit-success>
          <template type="amp-mustache">
               <p>{{output_message}}</p>
          </template>
     </div>
     <div submit-error>
          <template type="amp-mustache">
               <p>There was an error</p>
          </template>
     </div>
</form>

Note: the on=”submit:contact-form.clear” in the <form> element clears the contact form once someone clicks submit. This is so that the user can’t spam-click the button to constantly send the form.

3. Create the form handler

You now need to create the form-handler.php file.

It’s important that the path to this file matches the path you have set in the front-end form.

<?php
     if ( ! isset( $_POST['contact_form'] ) ) {
          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' );
          header( 'amp-access-control-allow-source-origin:https://' . $_SERVER['HTTP_HOST'] );
          header( 'Content-Type: application/json' );
          $your_name = filter_var( $_POST['your_name'], FILTER_SANITIZE_STRING );
          $your_email = filter_var( $_POST['your_email'], FILTER_SANITIZE_EMAIL );
          $your_telephone = filter_var( $_POST['your_telephone'], FILTER_SANITIZE_STRING );
          $your_subject = filter_var( $_POST['your_subject'], FILTER_SANITIZE_STRING );
          $your_message = filter_var( $_POST['your_message'], FILTER_SANITIZE_STRING );
          if ( ! empty( $your_name ) && ! empty( $your_email ) ) {
               // Output message
               $output_message = 'Thanks, '. $your_name . '. Your message was sent successfully.';

               // Email to the website admin
               $compiled_message = 'Name: ' . $your_name . "\r\n";
               $compiled_message .= 'Email: ' . $your_email . "\r\n";
               $compiled_message .= 'Telephone: ' . $your_telephone . "\r\n";
               $compiled_message .= 'Subject: ' . $your_subject . "\r\n";
               $compiled_message .= 'Message: ' . $your_message;
               mail( 'example@example.com', 'Example Subject', $compiled_message );
          } else {
               // Front-end error message
               $output_message = 'Sorry, there was an error processing your message.';
          }
          $output = ['output_message' => $output_message];
          echo json_encode( $output );
     }
?>

Note: the AMP submit-error is only if there’s a server error and the front-end error message is if there’s a form validation error.

4. Modify your headers in your .htaccess file

You might be getting a permission error in your console at this point if you’re trying to submit the form.

To fix this, you could try to modify your WordPress installation’s .htaccess file and manually set the access-control headers as per below.

Header set Access-Control-Allow-Origin 'https://cdn.ampproject.org​'
Header set AMP-Access-Control-Allow-Source-Origin 'https://example.com'