WordPress AMP Contact Form

AMP is a framework for developing fast and SEO-friendly websites. The AMP WordPress plugin lets you easily implement AMP on your WordPress website.

Most WordPress form plugins use JavaScript for advanced features like conditional logic and form validation. AMP doesn’t allow custom JavaScript, so it can be difficult to build a Native AMP website with a contact form.

You can build a custom form using the amp-form component, but it takes quite a bit of work. That’s the topic of a future blog post, so subscribe for updates if you’re interested.

WPForms now supports AMP

WPForms Lite is a free, simple, and powerful WordPress form plugin. As of June 17th, 2019, it is fully AMP compatible.

All you have to do is have WPForms Lite and the official AMP WordPress plugin active on your site, and any forms you create with WPForms will automatically work with AMP.

There will be no AMP errors due to JavaScript files loading. All the features of WPForms Lite work in AMP forms as well.

AMP only works on HTTPS websites, so you’ll need an SSL certificate for the AMP plugin to work. Most web hosts will provide these for free.

AMP with WPForms Pro

The premium version of WPForms includes advanced form fields, conditional logic, newsletter forms, payment processing, and more. I use it on all of the sites I build.

As of now, WPForms Pro does not automatically work with AMP. Many of the premium features and add-ons still depend upon JavaScript.

If you’re a developer and know your form does not depend upon JavaScript (see the list below), you can enable AMP compatibility using the wpforms_amp_pro filter.

// AMP support for forms in WPForms Pro
add_filter( 'wpforms_amp_pro', '__return_false' );

Almost all of the forms I build can be done without JavaScript. Whether it’s a contact form, newsletter signup, or eBook download form, building an AMP-compatible form with WPForms is simple.

All of the forms on this site are built with WPForms and are running on a Native AMP website.

Here’s how I am conditionally showing/hiding form fields with AMP based on other field values. In my contact form, if you select “Other” or “Referral” as the source, a text field appears asking for more information.

WPForms JavaScript dependent features

If you are using one of the following add-ons or form fields, you shouldn’t enable AMP compatibility because they may depend upon JavaScript:

  • WPForms Custom Captcha
  • WPForms Form Abandonment
  • WPForms Offline Form
  • WPForms Stripe
  • WPForms Signatures
  • WPForms Form Locker
  • WPForms Core
    • Conditional logic
    • Date/time field
    • Page break field
    • Rating field
    • Signature field
    • Captcha field
    • Likert field
    • Net Promoter field
    • Payments, Single item field
    • Payments, Total field

Full AMP compatibility on its way

The premium version of WPForms will soon be 100% AMP compatible. If you’re familiar with the 80/20 rule, you know it took 20% of the effort to ensure 80% of forms built with WPForms could be AMP compatible.

I’ll keep this post updated with the latest in WPForms AMP compatibility, and subscribe to my blog for tutorials on AMP and WordPress in general.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Ryan Smith says

    Have you been able to get recaptcha v3 working with your wpforms contract forms in amp? It’s supposed to be supported but I don’t actually believe it works, and I can’t find an example of a site where it does. Their support hasn’t been much help.

    • Bill Erickson says

      Yes, I was able to get reCAPTCHA v3 working.

      1. Go to the reCAPTCHA Admin Console.
      2. Click “Add Site”, label it, select v3, and add domains. Note: just specifying the top level domain doesn’t wildcard for all subdomains. I originally put billerickson.net but it didn’t work because my site is www.billerickson.net.
      3. Click “Submit”, then click the gear icon in the top right to go back to the settings. At the bottom, check “Allow this to work with AMP pages” (screenshot).

      It’s definitely not the easiest workflow. I’m not sure why Google doesn’t provide the checkbox when you create it the first time.

      I used reCAPTCHA v3 on my site for about a month but had to turn it off because too many legitimate contacts were being blocked as spam. See: https://twitter.com/BillErickson/status/1186995920170377216

Leave A Reply