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.
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.
billerickson.net
but it didn’t work because my site iswww.billerickson.net
.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
Marcus Tibesar says
Any update Bill on premium WPForms add-ons and AMP compatibility please? Thank you.
Bill Erickson says
I haven’t seen any AMP updates in WPForms lately. You might try reaching out to WPForms support to discuss the specific premium feature you’d like to work with AMP.