{"id":3764,"date":"2017-09-15T12:50:29","date_gmt":"2017-09-15T12:50:29","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3764"},"modified":"2021-05-01T07:01:14","modified_gmt":"2021-05-01T07:01:14","slug":"gravity-forms-for-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/gravity-forms-for-amp\/","title":{"rendered":"How to Install &#038; Setup Gravity Forms in AMP"},"content":{"rendered":"\n<p>You can integrate Gravity Forms integration in AMP with the help of an extension called <a href=\"https:\/\/ampforwp.com\/gravity-forms\/\">Gravity Forms&nbsp;for AMP<\/a>. <\/p>\n\n\n\n<p> It\u2019s pretty easy for you to setup because it works out of the box. <\/p>\n\n\n\n<p><strong>Here are a few simple steps to place&nbsp;Gravity Forms for AMP<\/strong><\/p>\n\n\n\n<p>After downloading&nbsp;<strong>Gravity Forms for AMP&nbsp;<\/strong>on your Desktop follow the below-given steps.<\/p>\n\n\n\n<p><strong>Step 1 \u2013<\/strong>&nbsp;Go to&nbsp;<strong>Plugins<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New<\/strong>&nbsp;then click on&nbsp;<strong>Upload Plugin<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"755\" height=\"382\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png\" alt=\"\" class=\"wp-image-16549\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png 755w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-300x152.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-100x51.png 100w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/figure>\n\n\n\n<p><strong>Step 2 \u2013<\/strong>&nbsp;Gravity Forms for AMP is a Paid Plugin Extension. You won\u2019t find that extension in the WordPress Plugin directory. So you have to upload this plugin after purchasing.<\/p>\n\n\n\n<ul><li>Click on&nbsp;<strong>Upload Plugin<\/strong><\/li><li>then choose &nbsp;\u201c<strong>Gravity Forms for AMP<\/strong>\u201d Extension from which you already downloaded after purchase.<\/li><li>After that, click on&nbsp;<strong>Install Now<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"899\" height=\"300\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8.png\" alt=\"\" class=\"wp-image-16572\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8.png 899w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8-300x100.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8-768x256.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8-60x20.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/2-8-100x33.png 100w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/figure>\n\n\n\n<p><strong>Step 3 \u2013<\/strong>&nbsp;After Uploading the plugin, Click on&nbsp;<strong>Activate Plugin<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"244\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5.png\" alt=\"\" class=\"wp-image-16573\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5.png 650w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5-300x113.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/3-5-100x38.png 100w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p><strong>Step 4 \u2013&nbsp;<\/strong>After Activating the Extension Plugin, The Gravity Forms will be visible on the AMP version of your site.<\/p>\n\n\n\n<h4>The overview of Settings\/Options in Gravity Forms <\/h4>\n\n\n\n<p>The first thing you need to do is go to your WordPress admin area and click on&nbsp;<strong>AMP option panel -&gt; AMP Gravity Forms.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"501\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-1024x501.png\" alt=\"\" class=\"wp-image-16577\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-1024x501.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-300x147.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-768x376.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6-100x49.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/4-6.png 1234w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li> <strong>Show Form On All Pages: <\/strong>If you want Gravity Form on all the pages then enable this option.<\/li><li> <strong>Form ID:<\/strong> In this field enter Gravity Form ID.<\/li><li> <strong>Above Content: <\/strong>If you want Gravity Form above the Content then enable this option.<\/li><li> <strong>Below Content: <\/strong> If you want Gravity Form below the Content then enable this option. <\/li><li> <strong>Above Footer: <\/strong> If you want Gravity Form above the footer then enable this option. <\/li><li><strong>ReCAPTCHA v3: <\/strong>Once you enable the Recaptcha v3 feature for more details of this option <a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-use-recaptcha-v3-in-gravity-forms\/\">Click Here<\/a>.<\/li><\/ul>\n\n\n\n<h4>The Output of AMP Gravity Forms <\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"485\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-1024x485.png\" alt=\"\" class=\"wp-image-18145\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-1024x485.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-300x142.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-768x364.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/22.png 1276w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4>How to add Sticky Form in Gravity Forms<\/h4>\n\n\n\n<ul><li>You will find this option in\u00a0<strong>WordPress Dashboard<\/strong>\u00a0-> Navigate to\u00a0the <strong>AMP option panel\u00a0<\/strong>-><strong>\u00a0AMP Gravity Form<\/strong>->\u00a0Enable <strong>Sticky Form<\/strong> option.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"430\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-1024x430.png\" alt=\"\" class=\"wp-image-18139\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-1024x430.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-300x126.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-768x323.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21-100x42.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/21.png 1225w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Sticky Form:<\/strong> Once you enable this option sticky form will be displayed on the AMP site.<\/li><li><strong>Contact form ID: <\/strong>\u00a0In this field, you need to enter the Gravity form ID which you want to show on all AMP sites.<\/li><li><strong>Form Headline: <\/strong>Once you enable this option form headline will be displayed on the AMP site.<\/li><li><strong>Button Background Color:<\/strong> In this field, you can change the button background color of the Gravity Form.<\/li><li><strong>Headline Text Color:<\/strong> In this field, you can change the Headline Text Color of the Gravity Form.<\/li><\/ul>\n\n\n\n<h4>The Output of Sticky Form <\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-1024x512.png\" alt=\"\" class=\"wp-image-18144\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-1024x512.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-300x150.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-768x384.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23-100x50.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/23.png 1251w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336; padding: 10px;\"><strong>Note: <\/strong> This extension requires Gravity Forms, which is a commercial plugin.<\/p>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>You can integrate Gravity Forms integration in AMP with the help of an extension called Gravity Forms&nbsp;for AMP. It\u2019s pretty easy for you to setup because it works out of the box. Here are a few simple steps to place&nbsp;Gravity Forms for AMP After downloading&nbsp;Gravity Forms for AMP&nbsp;on your Desktop&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[89],"ht-kb-tag":[36,90],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3764"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=3764"}],"version-history":[{"count":19,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3764\/revisions"}],"predecessor-version":[{"id":18147,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3764\/revisions\/18147"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3764"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3764"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}