WordPressサイトにAMPフレンドリーなフォームを作成したいですか？
Accelerated Mobile Pages（AMP）はサイトの高速化に役立ちます。しかし、AMPはサイトのパフォーマンスを向上させるためにWordPressのフォームを削除します。
この投稿では、WPFormsを使ってWordPressでAMPフォームを作成する方法（簡単な方法）を紹介します。
なぜWordPressにAMPフォームを作るのか？
Accelerated Mobile PagesまたはAMPは、モバイル端末でのサイトの読み込みを高速化するGoogleのプロジェクトである。
AMPはウェブページの読み込みを高速化することで素晴らしいモバイルブラウジング体験を提供する一方で、WordPressサイトの多くの便利な機能を無効化します。
そのひとつがお問い合わせフォームです。AMPは限られたHTMLとJavaScriptを使用するため、AMPページではWordPressのフォームを正しく読み込むことができません。
また、デスクトップでもモバイルでも優れたパフォーマンスを発揮するレスポンシブWordPressテーマを利用することもできます。この方法なら、モバイルで優れた体験を提供するためにサイトのスタイリングを妥協する必要はありません。
しかし、WordPressサイトでAMPを使用している場合は、フォームを表示するプラグインを使用することができます。サイトにAMPフォームを追加する方法を見てみよう。
WordPressにAMPフォームを追加する（ステップバイステップ）
AMPフォームを作成する最良の方法はWPFormsを使うことです。これは、AMP対応のWordPressフォームを作成するのに役立つ、最も初心者向けのWordPressフォームプラグインです。
彼らのチームは最近、Googleと協力してWordPress用のAMPフォームを簡単に作成できるようにした。
ステップ1: WPFormsプラグインのインストールと有効化
このチュートリアルでは、より多くの機能、フォームテンプレート、アドオン、カスタマイズオプションを提供しているため、WPForms Proバージョンを使用します。WPFormsのLite版もあり、無料で始めることができます。
WPFormsのライト版とプロ版では、基本的なAMP対応のお問い合わせフォームを作成することができます。
まず、WPFormsプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。
ステップ2：WordPressサイトにAMPを追加する
フォームを作成する前に、WordPressサイトにAMPを設定しておくことが重要です。
WordPressでAMPを使用するには、WordPress用の公式AMPプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後は、プラグインが自動的にWordPressサイトのGoogle AMPサポートを追加します。
ただし、ダッシュボードのAMP ” 設定から、サイトのAMP設定を変更することができます。
AMPの設定ページでは、サイトのAMPを有効化または無効化し、AMPのウェブサイトモードを選択し、サポートされているテンプレートを選択することができます。
詳しくは、WordPressサイトにGoogle AMPを正しく設定する方法をご覧ください。
AMPを設定したら、次のステップはWordPressサイトにAMP対応のお問い合わせフォームを作成することです。
ステップ 3: WPForms で新規 AMP フォームを作成する
WPForms ” 新規追加ページでWordPressのフォームを作成してください。WPFormsは初期設定でAMPに対応しているので、特別な設定をする必要はありません。
フォーム設定画面では、フォームテンプレートを選択し、上部に名前を入力することができます。ゼロからフォームを作成する場合は「ブランクフォーム」を選択し、あらかじめ用意されているテンプレートを使用する場合は、必要に応じて素早く編集することができます。
このチュートリアルでは、‘Simple Contact Form‘ テンプレートを選びます。
次に、フォームビルダーのページが表示され、テンプレートをカスタマイズするための様々なオプション設定があります。
ここから、フォームフィールドを追加または削除することができます。フォームに新規フィールドを追加するには、左のパネルからフォームフィールドをクリックし、フォームテンプレートにドラッグするだけです。
注: モダンスタイルドロップダウンとナンバースライダーはGoogle AMPに対応していません。代わりに、ナンバーとクラシックスタイルのドロップダウンフィールドを使用する必要があります。
その後、フィールドオプションを設定することができます。フィールドをクリックすると、左側にフィールドオプションが表示されます。
例えば、フィールドのラベルやフォーマットを編集したり、必須フィールドにしたり、条件ロジックを設定したりすることができます。同様に、他のフィールドもすべてカスタマイズできます。
その後、「設定」タブをクリックしてフォームの設定を行うことができます。
一般」設定では、フォーム名、送信ボタンテキスト、送信ボタン処理テキストなどを変更することができます。
次に、’Notifications’ タブをクリックし、ユーザーがフォームを完了した際に通知するメール通知を設定することができます。
次に、「確認」タブをクリックして、ユーザーがフォームを送信したときに表示する確認メッセージを設定することができます。
WPFormsでは、フォーム送信時にメッセージを表示したり、ページを表示したり、ユーザーをURLにリダイレクトしたりすることができます。
設定が完了したら、フォームを保存することができます。
ステップ 4: AMP フォームをページに追加する
WordPressフォームの準備ができたら、ページに追加しましょう。
WPFormsフォームビルダーの上部に’埋め込み’ボタンがあります。これをクリックするだけで、新規ページや既存ページにフォームを追加することができます。
次にポップアップ・ウィンドウが開き、新規ページを作成するか、既存のページを選択するか尋ねられます。
このチュートリアルでは「新規ページ作成」オプションを選択します。
次に、新しいフォームページの名前を入力する必要があります。
それが完了したら、「Let’s Go」ボタンをクリックするだけだ。
ここから、コンテンツエディターにAMPフォームのプレビューが表示されます。
また、WPFormsブロックを使ってコンテンツエディターにフォームを追加することもできます。ドロップダウンメニューからAMPフォームを選択するだけです。
次に、ページを公開または更新します。
これですべてです！他には何も設定する必要はありません。WPFormsプラグインはあなたのフォームに完全なAMPサポートを追加します。
どのように見えるか見たい場合は、携帯電話でページを開くことができます。または、次のようにページのURLの最後に/amp/または/?ampを追加して、デスクトップのブラウザーでページを開くこともできます：
https://www.example.com/contact/?amp
Google reCAPTCHA を AMP フォームに追加する
初期設定では、WPFormsはスパムをキャッチしてブロックするためのアンチスパム設定を含んでいます。さらに、スパム投稿を減らすためにGoogle reCAPTCHAを使用することができます。
AMPフォームでGoogle reCAPTCHAを使用するには、サイトをGoogle reCAPTCHA v3に登録し、Google APIキーを取得する必要があります。
まず、Google reCAPTCHAのサイトにアクセスし、ページ右上の「v3 Admin Console」ボタンをクリックします。
その後、Googleアカウントでログインする必要があります。完了すると、「新規サイトの登録」ページが表示されます。
次に、Labelフィールドにサイト名を入力する必要がある。Google AMPはreCAPTCHA v3のみをサポートしているため、reCAPTCHAタイプオプションで’Score based (v3)’を選択する必要があります。
その後、ドメインフィールドにドメイン名（https://www.を含まない）を入力します。
次に「送信」ボタンをクリックする。
次に、サイトにreCAPTCHAを追加するためのサイトキーとシークレットキーとともに、成功のメッセージが表示されます。
これらのキーをコピーするだけだ。
これで、フォームにreCAPTCHAを追加するためのGoogle APIキーが手に入りました。しかし、reCATCHAのAMP互換性を確保するために、もう一つ必要な設定があります。
まず、「設定へ」をクリックします。
次に、再度reCAPTCHAの設定が表示され、「AMPページでこのキーが動作することを許可する」チェックボックスが表示されます。チェックボックスにチェックを入れ、下の「保存」ボタンをクリックしてください。
AMPフォームにreCAPTCHAを追加するためのGoogle APIキーを入手したので、WPFormsに入力する必要があります。
WordPress ダッシュボードでWPForms ” 設定 ” CAPTCHAページを開くことができます。
次に、下にスクロールして「reCAPTCHA v3」オプションを選択します。
その後、サイトキーとシークレットキーを貼り付けるだけです。設定が完了したら、「設定を保存」ボタンをクリックしてください。
WPFormsにGoogle reCAPTCHAが追加されたので、必要なフォームで有効化することができます。
WPForms ” All Formsにアクセスし、reCAPTCHA を有効化したいフォームを選択します。フォーム名の下にある ‘編集’ ボタンをクリックします。
フォーム設定画面が表示されたら、「設定」タブをクリックし、「スパム保護とセキュリティ」タブを選択します。
ここから、Google v3 reCAPTCHAオプションを有効化するだけです。
完了したら、右上の「保存」ボタンをクリックしてフォームを保存します。
その後、お問い合わせページを再訪問し、reCAPTCHAを使ったAMPフォームの動作を確認することができます。
この投稿が WordPress で AMP フォームを簡単に作成する方法のお役に立てば幸いです。WordPress で GDPR に準拠したフォームを作成する方法や、WordPress に最適なドラッグアンドドロップページビルダーについてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
That’s great news. I can finally use the potential of the paid WP Forms I have on the site (that is, besides being able to use it on all the sites I’ve done thanks to unlimited sites). Thank you for the detailed instructions on how to use WP Forms on websites with AMP.
Konrad says
Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?
WPBeginner Support says
If we find one we would recommend we will be sure to share!
管理者
Adrian says
This article is a game-changer for anyone seeking to optimize their WordPress site for mobile performance with Accelerated Mobile Pages (AMP). The clear and concise explanation of how AMP impacts WordPress forms, and the subsequent guidance on creating AMP-friendly forms using WPForms, is incredibly valuable.
WPBeginner Support says
Glad you found it helpful!
管理者
Shafqat Khan says
Great tutorial! AMP forms are crucial for mobile performance, and your guide simplifies the process with WPForms. I appreciate the clear steps, especially for adding Google reCAPTCHA, which is essential for security. Your articles are always a valuable resource!
WPBeginner Support says
Glad you’ve found our content helpful!
管理者
Ralph says
Seems like it is good idea to do this if my site can be faster for mobile. I personally don’t like using my smartphone for reading websites, but from Google Analytcis i see my website went from 55-60% mobile users montly to 73-75% mobile users montly. Sometimes it is lower but it is inevitable trend that all bloggers should respect and adapt.
WPBeginner Support says
Glad you liked our recommendation
管理者
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
管理者
faizan says
I learned information from WP Beginner and collected many things that can help me for creating best website
WPBeginner Support says
Glad to hear our guides have been helpful
管理者
Mikolaj says
Great article! It’s super helpful for anyone who wants to keep their WordPress site AMP-friendly while still having forms. WPForms looks like the way to go. Thanks for sharing!
WPBeginner Support says
Glad you found the post helpful!
管理者
Czarek says
This article is a valuable resource for anyone looking to optimize their WordPress site for mobile users while still maintaining the functionality of forms. It’s important to acknowledge that while Accelerated Mobile Pages (AMP) can significantly boost website speed, it often comes at the cost of removing certain features, including forms. The fact that this article addresses this issue by providing a solution is highly beneficial.
The recommendation to use WPForms for creating AMP-friendly forms is particularly noteworthy as it offers an easy and efficient method for ensuring your website remains user-friendly on mobile devices. This approach can help website owners strike a balance between speed and functionality, ensuring a positive user experience.
My question is: Are there any specific considerations or best practices to keep in mind when implementing AMP forms on a WordPress site using WPForms, especially in terms of form design, user experience, and potential impacts on SEO?
WPBeginner Support says
For AMP forms the main thing to keep in mind is ensuring that your users can use the form and there are not strange formatting issues when viewed.
管理者
Ronald says
What about user-submitted content forms (for posts or custom post types)? How about user registration/login forms? I know WP Forms has those features at premium costs, but do they still work with AMP?
WPBeginner Support says
Currently the AMP support is valid only for the basic contact form feature.
管理者
Irene says
This is nice. I’m so adding AMP and reCaptcha to my site as I’m already using wpforms lite. But I hope it doesn’t take up much resources.
Thanks WPbeginners. Following you has been one of the best decisions I made this year. God bless the day I found you.
WPBeginner Support says
Glad our guide could be helpful
管理者