AMP Gravity Forms - WordPress Plugin

A Guide to Setting Up AMP Gravity Forms for WordPress AMP Pages

AMP Gravity Forms is useful when your site already relies on Gravity Forms, but your mobile AMP pages still need to capture submissions, validate fields, and provide a clear submission flow. This guide focuses on the practical side rather than generic plugin marketing: what to check before installation, which settings to enable, how to choose the right form, where to place it on an AMP page, and how to confirm that submissions actually work.

The main challenge is that a form on a standard page and a form in an AMP environment operate under different rules. Gravity Forms handles fields, notifications, confirmations, and entry storage, while the AMP layer restricts arbitrary scripts and requires valid markup. That is why, after installing the extension, you need to check more than just the form's appearance. You also need to verify AMP validity, anti-spam protection, emails, redirects, caching, and the behavior of required fields.

This guide is intended for site owners, webmasters, and developers who need to keep a lead form, consultation request, contact form, or short questionnaire working on the AMP version of a page. If you are still choosing a form plugin, there is a section below on similar solutions. If Gravity Forms is already installed on your site, the best approach is to work through the process in order: preparation, installation, configuration, a practical example, verification, and troubleshooting.

What Problem the Extension Solves and Where It Is Actually Useful

AMP Gravity Forms should be viewed as a compatibility layer for an existing form, not as a replacement for Gravity Forms. The base form is created in the Gravity Forms admin panel, where you choose fields, required settings, notifications, confirmations, logic, and entry storage. The extension adds a layer that helps display that form on AMP pages while preserving the basic behavior in an environment where standard JavaScript dependencies are often unavailable.

A typical scenario looks like this: a site has a regular landing page with a lead form, and the AMP version of that page needs to stay fast and usable for mobile visitors. Without compatible rendering, the form may not appear, may look broken, may fail to submit, or may trigger validation errors. This extension is meant to bridge that exact gap between a Gravity Forms form and AMP output.

When the Extension Makes the Most Sense

The biggest benefit appears when AMP pages actually receive mobile traffic and the form matters to your business process. That could mean service requests, short forms for an editorial project, consultation sign-ups, question collection, a contact form on a news site, or a simple inquiry form for a local business.

• Your site already uses Gravity Forms, and you do not want to migrate forms to another plugin.
• AMP pages are enabled through AMP for WP, the official AMP plugin, or another AMP environment where standard Gravity Forms output may need adaptation.
• You need to display a specific form on all AMP pages or pin it to a specific area of the page.
• Required fields, basic input validation, lead capture, and admin notifications matter in your workflow.
• You need reCAPTCHA v3 support on the AMP page if that is part of your anti-spam setup.

When This Product Should Not Be Your Starting Point

The extension does not solve every form-related problem. If you do not already use Gravity Forms, adopting it just for AMP compatibility may be excessive, because you would need to maintain two commercial layers: Gravity Forms itself and the AMP adapter. If your form is complex, includes custom fields, uncommon third-party add-ons, multi-step logic, or a payment flow, test support for those specific elements on a staging page first. Official sources confirm basic form display options and reCAPTCHA support, but they do not justify assuming that every third-party Gravity Forms add-on will work in AMP.

Practical rule of thumb: if your standard form is already unstable, emails are not being delivered, or the field logic has not been verified, do not start troubleshooting with AMP. First make sure Gravity Forms works correctly on a standard page, then add the AMP layer.

What to Check Before Installing on a Live Site

Preparation matters because problems that appear after enabling the extension often look like “the plugin does not work,” even though the real cause is the original form, notification settings, AMP mode, caching, or anti-spam protection. It is better to separate responsibilities in advance: what Gravity Forms handles, what AMP Gravity Forms handles, and what is controlled by the AMP plugin and the theme.

Check the Original Form in Gravity Forms

Open the form you plan to use in the WordPress admin area and make sure it has a clear name, the right set of fields, and a working confirmation after submission. For AMP pages, it is best to start with a short form: name, email, phone, or message. The more custom elements you add, the higher the chance that an individual field or connected integration will require manual testing.

Locate the form ID separately. You will need it for the Form ID field in AMP Gravity Forms and for checking the Gravity Forms shortcode if the form is embedded in content. If the ID is wrong, the user may see empty space, a message about a missing form, or another unexpected result.

Check Notifications and Entry Storage

Before installation, submit a test entry on the standard page and check two things: whether an entry appears under Forms - Entries, and whether the email arrives. If the entry is stored but the email does not arrive, the issue usually relates to WordPress email delivery, the sender domain address, SMTP, SPF, DKIM, or DMARC. AMP compatibility should not be used to work around mail delivery problems.

Identify Your AMP Mode and Page Types

In the AMP plugin, check which pages are served as AMP: posts, pages, specific templates, or the entire site. The official AMP plugin for WordPress includes Standard, Transitional, and Reader modes. In AMP for WP, the logic and menus are different, but the principle is the same: you need to understand where visitors will see the AMP version and which theme or template controls its output.

This directly affects form placement. If AMP is enabled only for blog posts, a global form across all AMP pages may feel too aggressive. If AMP is used for landing pages, it is usually better to anchor the form to a specific area: above content, below content, before the footer, or as a sticky form.

Create a Test Page

Do not enable the form on every AMP page right away if the site receives meaningful traffic. Create a test page with short content, add the form or prepare the form ID for global output, clear the cache, and check the AMP URL. This approach helps separate configuration mistakes from issues caused by the theme, ads, analytics, or third-party blocks.

Installation and Initial Activation Without Unnecessary Risk

The official AMP for WP documentation describes installing the extension by uploading a ZIP file through the standard WordPress screen. This guide does not cover purchasing, license keys, account access, or activation workarounds. It assumes you already have a legitimate installation archive and administrator access to the site.

Basic Installation Order

1. Open Plugins - Add New in the WordPress admin area.
2. Click Upload Plugin and choose the extension ZIP archive.
3. Install the file using Install Now.
4. After installation, click Activate Plugin.
5. Confirm that Gravity Forms is already active and that the target form exists.

Once activated, do not treat the job as finished. “It is enabled” and “it correctly accepts submissions on an AMP page” are not the same thing. Open the extension settings page right away, review the available options, and confirm that the selected form is actually displayed where it should be.

First Quick Check

Open the standard page with the form and its AMP version in a private browser window. On the standard page, the form should behave exactly as it did before. On the AMP version, check that the form appears, required fields work, an empty submission is blocked, a valid submission goes through, and a success message appears afterward. If the form does not appear at this stage, do not move on to colors, sticky mode, or extra settings. Solve the base rendering issue first.

Settings Map After Installation: What to Enable First

The main AMP Gravity Forms settings revolve around selecting a form and choosing where it appears on the AMP page. AMP for WP documentation lists options such as Show Form On All Pages, Form ID, Above Content, Below Content, Above Footer, and ReCAPTCHA v3. Separate settings are described for sticky mode: Sticky Form, Contact form ID, Form Headline, Button Background Color, and Headline Text Color.

Selecting the Form by ID

The Form ID or Contact form ID field links AMP output to a specific Gravity Forms form. It is a small setting, but it often determines whether the visitor sees the right form at all. For a typical site, choose one short form that has already been tested on a regular page. Do not start with an experimental form that includes lots of conditions until you have confirmed the basic scenario.

How to Confirm the Correct ID

Open the Gravity Forms form list, find the target form, and compare its ID with the value in the AMP settings. Then open the AMP page and submit a test entry with an obvious value, such as “AMP test.” A new entry should appear in Gravity Forms under that specific form. If it appears in a different form, you are checking the wrong ID or the page includes a second independent form output.

Global Output on All AMP Pages

Show Form On All Pages is useful when the form is meant to serve as a universal contact channel, for example on a news site or in a knowledge base where any AMP page may lead to a reader question. But for landing pages and stores, global output can get in the way: the same form appears in places where the user expects a different flow.

The safest starting point is to avoid enabling global output until you have tested on a single page. If everything works, turn on global mode for a short period, check several page types, and only then decide whether to keep it permanently.

Form Position: Above Content, Below Content, or Before the Footer

Placement affects how the page feels. Above Content works well when the form is the page's main action: a request, sign-up, or consultation. Below Content is better for a contact form after an article, when the user should read the material first. Above Footer feels less aggressive and works well for a follow-up contact opportunity at the end of an AMP page.

Do not enable multiple positions for the same form at once. That creates duplicates, complicates analytics, and can annoy mobile visitors. If you want to test different placements, do it one by one and track the result: form visibility, successful submissions, bounce rate, and the absence of AMP errors.

Sticky Form and Headline

Sticky mode is useful when the form needs to stay available after scrolling. That can make sense for a consultation request, a quick question, or a callback form. But on a mobile AMP page, a pinned element takes up valuable space. Use it only for short forms, and always check that it does not overlap content, a consent button, navigation, or ad blocks.

If you enable Form Headline, the headline should explain the action instead of repeating the form name. For example: “Ask About This Service” or “Request a Consultation.” Choose button and headline colors with enough contrast, but do not make the form look like an unrelated ad dropped into the site theme.

How Gravity Forms, the AMP Form, and the Page Result Work Together

To diagnose issues correctly, it helps to understand the mechanics. Gravity Forms stores the form structure, fields, required settings, confirmations, notifications, and entries. AMP Gravity Forms takes that form and helps render it in an AMP-compatible environment. The AMP plugin or AMP theme is responsible for the AMP page itself, markup validity, template mode, and possible suppression of conflicting plugins.

If the form does not work, the root cause can exist at any of those three levels. A wrong form ID is an extension setting issue. Missing email despite a stored entry usually points to Gravity Forms notifications and mail delivery. An AMP validation error belongs to the AMP layer, theme, scripts, or third-party blocks. That is why you should not change everything at once. Start simple and move step by step.

What Happens During Submission

On the user side, the form should display required fields, accept input, block empty submissions, and send the data. On the WordPress side, Gravity Forms processes the submission, creates the entry, and triggers notifications. On the AMP side, the form markup and submission behavior must remain within AMP requirements. AMP documentation emphasizes that AMP forms rely on a specific model where valid markup, error handling, and proper server responses matter.

Why AJAX and Redirects Need Testing

A standard Gravity Forms setup may include AJAX submission, redirects after confirmation, and extra scripts. In an AMP environment, those elements may behave differently or require adaptation. That is why, after installing the extension, you should not stop at “the form is visible.” Submit a test entry, review the post-submission message, check the admin entry, and make sure the user does not get stuck in an in-between state.

Quick takeaway: if the form is visible on the AMP version but no entry appears in Gravity Forms after submission, the issue is in form processing. If the entry exists but no email arrives, start with notifications and SMTP. If the AMP validator reports an error, begin with the validated URLs and the markup source.

Practical Example: A Consultation Request on an AMP Page

Let us walk through a real-world scenario that fits most service sites: a standard page already includes a “Consultation Request” form, and you need to place it cleanly on the AMP version of the page below the main content. The goal is not to build complicated automation, but to get reliable submissions, a clear confirmation, and a verifiable entry in the admin panel.

Goal and Preparation

We need a short form with the fields Name, Email, Phone, and Message. In Gravity Forms, verify in advance that key fields are required, configure the post-submission confirmation, and make sure the admin notification is enabled. For testing, use a page where the AMP version is accessible and not blocked from viewing.

Configuration Steps

1. Open Gravity Forms and find the ID of the “Consultation Request” form.
2. Go to the AMP Gravity Forms settings through the AMP panel, if the extension adds that menu item.
3. Enter the form ID into Form ID or Contact form ID, depending on the output mode you are using.
4. Enable display below content through Below Content if the form should appear after the service explanation.
5. Save the settings using Save Changes.
6. Clear the site cache, the AMP plugin cache, and the CDN cache if one is in use.
7. Open the page's AMP URL in a private window and test the form without logging into the admin panel.

Expected Result

On the AMP page, the form should appear below the text with the same core fields needed for the request. When an empty form is submitted, required field validation should trigger. When a valid submission is sent, the user should see a confirmation, and a new entry should appear in Gravity Forms. If notifications are configured, an email should arrive at the administrator address or in the test mailbox.

A Detail That Often Interferes with Testing

If you test the form while logged in as an administrator, part of the cache, the admin bar, or preview mode may differ from what a normal visitor sees. That is why the final check should be done in a private window, on a mobile device, or in another browser. If the site uses mobile redirection to the AMP version, test both the direct AMP URL and the path a normal mobile visitor would take.

Verifying the Result: The Form Is Visible, Submits, and Does Not Break AMP

Verification should be treated as a separate stage. On an AMP page, it is not enough just to see fields and a button. You need to make sure the form passes three checks: visual, functional, and technical. This saves time because it quickly tells you where to look for the issue.

Visual Check

Open the page at mobile width and confirm that the fields fit, the sticky form does not overlap the content, the submit button is visible, and required field errors are readable. If the fields are too narrow or the button blends into the theme, start with the extension's color settings if they apply to the sticky form. If that is not enough, a careful CSS adjustment through the theme or an AMP-compatible custom style block is acceptable.

Functional Check

Run three tests: an empty form, a form with an invalid email, and a valid submission. After the valid submission, check Forms - Entries. The admin entry matters more than the email: if the entry exists, the data was not lost, and mail delivery can be diagnosed separately. If there is no entry, the issue is closer to form processing or AMP output.

Technical AMP Check

Use the validation tools provided by your AMP plugin. In the official AMP plugin for WordPress, the Validated URLs and Error Index screens are especially useful because they show which URL was checked and which component generated invalid markup. In AMP for WP, rely on the available validation tools, the documentation, and the result of an external AMP validator.

If the validator reports an error, do not disable AMP Gravity Forms immediately. First identify the source: the theme, an ad block, analytics, a custom script, another plugin, or the form itself. On heavily optimized sites, the error may be caused not by the form, but by minification, injected scripts, or a third-party widget on the same page.

Anti-Spam Protection and reCAPTCHA v3 in an AMP Scenario

The official AMP for WP documentation specifically describes enabling ReCAPTCHA v3 for Gravity Forms in AMP. It is important to understand the limitation: reCAPTCHA for AMP requires the correct keys and separate permission to run on AMP pages. If you simply copy settings from the standard form without checking AMP authorization, users may run into submission errors.

What to Check Before Enabling Protection

First test the form on a staging AMP page without reCAPTCHA. If basic submission does not work, anti-spam protection will only make troubleshooting harder. Then enable reCAPTCHA v3, add the keys, and test submission again. In the Google reCAPTCHA interface, the key must be allowed to work with AMP pages. In a similar AMP scenario, WPForms documentation also specifically notes that AMP uses reCAPTCHA v3 rather than older visible variants.

When reCAPTCHA May Be Unnecessary

If the form sits on a single test page with low traffic, the built-in required field checks and moderate Gravity Forms anti-spam settings may be enough. If the form is exposed across all AMP pages, especially in sticky mode, protection becomes more important. But do not raise the threshold or complicate protection blindly: first determine whether real spam submissions exist and whether legitimate submissions are being flagged.

How to Test After Enabling It

Run a test as a normal visitor and check the stored entry. If the user sees an error and no entry is created, temporarily disable reCAPTCHA in AMP Gravity Forms and submit again. If the form works without it, the problem is related to the keys, AMP authorization, the domain, or the protection settings. If it still fails without reCAPTCHA, go back to the form ID, placement, cache, and AMP page validity.

Compatibility with the Theme, Cache, and Other Plugins

An AMP page is assembled from several parts: the theme or AMP template, the content, the form, styles, cache, analytics, ads, and third-party extensions. Even if AMP Gravity Forms is configured correctly, neighboring elements can still affect the result. Be especially careful on sites with aggressive JavaScript optimization, CSS optimization, CDN caching, and a separate mobile theme.

Cache and CDN

After changing settings, clear cache at every level: the WordPress plugin cache, server cache, CDN, and the AMP plugin cache if it exists. If you still see the old form or its previous placement, open the page with a cache-busting parameter, in another browser, or in incognito mode. Do not change form settings repeatedly until you are sure you are looking at a fresh version of the page.

Theme and CSS

AMP limits CSS and disallows arbitrary scripts. If your standard theme heavily styles Gravity Forms with JavaScript or complex selectors, the AMP version may look simpler. That is not always an error. What matters most is that the form remains readable, accessible, and submittable. Visual improvements should be made in small steps, with validation checked after every change.

A Safe CSS Adjustment for a Form Embedded in Content

If the form is inserted into content and you can wrap it in your own container, use a neutral class that does not depend on the extension's internal structure. That approach is safer than guessing the plugin's internal classes. The example below works for minor alignment fixes and better button contrast if your AMP layer allows custom CSS.

<div class="amp-lead-form">
  [gravityform id="1" title="false" description="false"]
</div>

.amp-lead-form {
  margin: 24px 0;
  padding: 18px;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #ffffff;
}

.amp-lead-form input,
.amp-lead-form textarea,
.amp-lead-form select {
  max-width: 100%;
}

.amp-lead-form input[type="submit"],
.amp-lead-form button {
  min-height: 44px;
}

The check is simple: open the AMP page, make sure the form does not extend wider than the screen, confirm that the button remains easy to tap, and verify that the AMP validator has not introduced new errors. The rollback is simple too: remove the container or the CSS block. Do not edit WordPress core files, Gravity Forms, AMP Gravity Forms, or your theme.

Practical Use Cases for Different Types of Sites

The same AMP compatibility layer can solve different problems. The key is not to turn every AMP page into a page with an intrusive form. Choose the scenario based on visitor intent and on what you are actually prepared to handle after submission: a reader question, a service inquiry, a quick contact request, or an internal test.

Content Site or Media Publication

For articles, reviews, and tutorials, it is usually better to place the form after the content. The user gets the answer first and can then ask a question, suggest a topic, or send a follow-up. In that scenario, Below Content output or placement before the footer works well. A sticky form is usually unnecessary unless the form is tied to a subscription or ongoing question collection.

Service Website

On a service page, the form may be the main action. In that case, placement above the content or after the first meaningful section can work well, but only if the page text already explains the value of submitting the form. On the AMP version, a short form matters even more: the fewer the fields, the greater the chance that a mobile visitor will complete it.

Local Business

For a clinic, repair shop, school, or studio, a “quick contact” scenario works well: name, phone number, preferred time, and a short comment. If a sticky form is enabled, make sure it does not interfere with the phone number, map, messenger buttons, or bottom navigation. In some cases, it is better to keep the form at the bottom of the page and use a lighter theme element in the sticky area.

Test Form for an Editor or Administrator

Before enabling the extension broadly, it is useful to create an internal test form. It shows how the extension behaves with simple fields, notifications, and entries. If the test form works but the live form does not, the problem is in that specific form: its logic, a field, a third-party add-on, the confirmation, or anti-spam protection.

Troubleshooting Common AMP Form Problems

Problems with forms on AMP pages are best diagnosed by symptom. Do not start with a reinstall. First identify exactly what is broken: the form does not display, does not submit, does not create an entry, does not send email, triggers an AMP error, or looks bad on a mobile screen.

The Form Does Not Appear on the AMP Page

Symptom: the form exists on the standard page, but the AMP version shows empty space or no form block at all. Possible causes include an incorrect ID, the wrong page type being served as AMP, output placement not being enabled, stale cache, or a conflict with the template mode.

Check the form ID, the selected placement, whether the page has an AMP version, and whether the cache is fresh. If global output is enabled, open several different AMP pages. If the form appears only on some pages, review content types and the AMP plugin's supported templates.

The Form Is Visible, but Submission Fails

Symptom: the user clicks the button, but the form hangs, shows an error, or does not create an entry. Causes may include AMP form handling, reCAPTCHA, a cache conflict, a validation error, or a third-party Gravity Forms field. Start by removing extra complexity on a test page: disable reCAPTCHA, remove unnecessary fields, and simplify confirmations.

If a simple form submits successfully but the live form does not, compare the fields. Pay special attention to custom field types, third-party add-ons, and logic that depends on scripts. If even a basic form does not work, check AMP validity and the extension settings.

The Submission Is Stored, but No Email Arrives

Symptom: the entry appears under Forms - Entries, but the email never arrives. This is usually not an AMP rendering problem. Gravity Forms has already processed the submission, and the failure is in notifications or WordPress mail delivery.

Check the recipient address, confirm that notifications are enabled, make sure there are no spaces in the email address, verify that From Email uses a domain-based address, confirm SMTP is configured, and review the mail domain's DNS records. For an important form, do not rely on email alone: review entries in the admin panel regularly or use a reliable mail delivery service.

reCAPTCHA Throws an Error on the AMP Version

Symptom: the form works without protection, but submission breaks after reCAPTCHA is enabled. Check that you are using v3 keys, that the domain matches, and that the Google settings allow the key to work with AMP pages. Then repeat the test in a private window.

If the problem continues, temporarily disable reCAPTCHA only for testing and check the stored entries. Do not leave a live public form unprotected if it receives spam, but also do not complicate troubleshooting before you have confirmed that basic submission works.

The AMP Validator Reports an Error After the Form Is Added

Symptom: the form is visible, but AMP tools report invalid markup or a disallowed script. Open the validated URL screen or an external AMP validator and identify the source of the error. If the source is another plugin, an ad, analytics, or the theme, do not disable the form without checking. If the source is tied to the form, create a minimal test form and compare the result.

The Sticky Form Overlaps the Content

Symptom: the pinned form makes the page hard to read, covers a button, or does not fit well on a mobile screen. Start by disabling sticky mode and testing standard placement below the content. If sticky mode is truly necessary, reduce the number of fields, tighten the headline, and review button colors. If the conflict remains, it is better to remove the sticky behavior than to degrade the mobile experience.

When AMP Gravity Forms Is the Right Choice

The extension is worth using when you already have working Gravity Forms forms and a clear reason to preserve them on AMP pages. It is especially useful for short lead forms, contact forms, and simple communication flows where a mobile visitor should not have to switch to the standard page just to send a message.

Before installation, make sure the original form works, notifications are configured, the AMP mode is understood, and the test page passes validation. After that, you can download AMP Gravity Forms, install the extension, and repeat the practical scenario from this guide on a test page. Do not enable global output or sticky mode until the basic submission flow has been verified.

If the product fits your scenario, the final checklist is simple: the form is visible on the AMP page, required fields are validated, the entry appears in Gravity Forms, the notification is delivered, the AMP validator shows no new critical errors, and the mobile visitor does not lose context because of an intrusive sticky block.