Now that google is pushing AMP a lot, it has been one of the better ways to attract some organic traffic. In one of my recent projects we had to setup a signup form on the AMP pages. We use
AMP for WP (a very well done plugin btw) but wanted to try adding the form ourselves, instead of purchasing one of their paid plugins (Which would be the easier way, but one must get their hands dirty to understand).
The whole thing can be broken down into the following steps
- Render the form
- Process the form
- Fun and Profit
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Since we already use the
ampforwp plugin and we want to render a form after every article, we hook into the
ampforwp_after_post_content action. I did try adding html into a widget, but it never got rendered for some reason. I still have to get into why it happened. But then, I had a problem to solve.
Add something like this to your
Most of the form processing is straightforward. The only complication is that
amp does some magic which requires us to handle cross origin requests and respond in a manner so that they can accept and process the response. More details here
I didn’t handle all the cases, but what we have below is a version that accepts the form submission and our frontend handles it perfectly.
Once this works, I’m pretty sure it will be fun. Profit, well, lets hope google’s organic traffic should bring some profit as well :D