WordPressでAMPフォームを作成する方法（簡単な方法）

同じ不満を抱えるWordPressサイト所有者から多くの声を聞いています。彼らのフォームは問題なく表示されますが、AMPページでは読み込みが遅すぎるか、まったく機能しません。

ある小規模事業主は、顧客がモバイルでの読み込みに時間がかかりすぎるために注文フォームを放棄し続けていると語っていました。

サイトを高速化するためにAMPを使用することにした場合、フォーム用のソリューションが必要です。頭痛やコーディングなしでAMP互換フォームを作成するために誰でも使用できる簡単なアプローチを見つけました。

多くのプラグインや方法を試した後、実際に機能する、高速でモバイルフレンドリーなフォームを作成するための信頼できる方法を発見しました。

このガイドでは、WordPressサイトでAMPフォームを作成する最も簡単な方法をステップバイステップで説明します。連絡フォーム、アンケート、またはモバイルですぐに読み込まれる注文フォームが必要な場合でも。

WordPressでAMPフォームを作成する理由

Accelerated Mobile Pages（AMP）は、モバイルデバイスでウェブサイトをより速く読み込むGoogleプロジェクトです。

AMPはウェブページを高速に読み込むことで優れたモバイルブラウジング体験を提供しますが、WordPressウェブサイトの多くの便利な機能を無効にします。

その一つが問い合わせフォームです。AMPは限られたHTMLとJavaScriptを使用するため、WordPressフォームはAMPページで正しく読み込めません。

または、デスクトップとモバイルで優れたパフォーマンスを提供する、多くのレスポンシブWordPressテーマのいずれかを使用することもできます。これにより、モバイルでの優れたエクスペリエンスを提供するために、ウェブサイトのスタイリングを犠牲にする必要がなくなります。

ただし、WordPressサイトでAMPを使用している場合は、プラグインを使用してフォームを表示できます。このガイドで取り上げるすべてのトピックの簡単な概要を以下に示します。

早速始めましょう！

WordPressにAMPフォームを追加する（ステップバイステップ）

AMPフォームを作成する最善の方法は、WPFormsを使用することです。これは最も初心者向けのWordPressお問い合わせフォームプラグインであり、AMP対応のWordPressフォームを作成するのに役立ちます。彼らのチームはGoogleと協力して、WordPressでAMPフォームを簡単に作成できるようにしました。

ステップ1: WPFormsプラグインのインストールと有効化

WPFormsのLiteバージョンとProバージョンの両方で、基本的なAMP対応のお問い合わせフォームを作成できます。しかし、このチュートリアルでは、より多くの機能、AIツール、フォームテンプレート、アドオン、カスタマイズオプションを提供するため、WPForms Proバージョンを使用します。

開始するには、WPFormsのウェブサイトにアクセスしてアカウントを作成できます。次に、「今すぐWPFormsを入手」ボタンをクリックし、プランを選択してサインアッププロセスを完了してください。

サインアップが完了すると、WPFormsのアカウントダッシュボードに移動します。そこから、プラグインファイルをダウンロードし、ライセンスキーをコピーできます。これらは次のステップで必要になります。

これで、サイトにWPFormsを追加する準備ができました。WordPress管理画面のWordPress管理画面から、プラグイン » 新規追加に移動します。

次の画面で、「WPForms」と検索します。

結果にWPFormsが表示されたら、「今すぐインストール」をクリックし、次に「有効化」をクリックします。

この手順で追加のヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化後、ダッシュボードのWPForms » 設定に移動します。

ライセンスキーを「ライセンスキー」フィールドに貼り付け、「キーの検証」をクリックしてアカウントを接続します。

これで、WPFormsのインストール、有効化が完了し、サイトで使用する準備が整いました。

ステップ2：WordPressサイトにAMPを追加する

フォームを作成する前に、WordPressサイトにAMPが設定されていることが重要です。

AMPをWordPressで使用するには、管理画面内の「プラグイン」パネルからWordPress用の公式AMPプラグインをインストールして有効化する必要があります。

詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化すると、プラグインはWordPressサイトにGoogle AMPサポートを自動的に追加します。

ただし、ダッシュボードからAMP » 設定に移動することで、ウェブサイトのAMP設定を変更できます。

初心者の方は、リーダーモード（クラシックモードとも呼ばれます）を選択することをお勧めします。これにより、メインのデスクトップサイトはそのまま維持され、モバイル訪問者は超高速のAMPバージョンを利用できるようになります。

詳細については、WordPressサイトにGoogle AMPを適切に設定する方法に関するガイドをご覧ください。

AMPを設定したら、次のステップはWordPressサイトにAMP互換の問い合わせフォームを作成することです。

ステップ3: WPFormsで新しいAMPフォームを作成する

新しいWordPressフォームを作成するには、単にWPForms » 新規追加ページにアクセスしてください。

WPFormsはデフォルトでAMPと互換性があるため、特別な設定を有効にする必要はありません。

フォーム設定画面で、フォームに名前を付けることから始められます。

次に、フォームをどのように構築するかを選択します。

最初から始めたい場合は、「空白のフォーム」を選択できます。より簡単で迅速なオプションを好む場合は、AIフォームビルダーを使用できます。これにより、簡単なプロンプトだけでフォームを作成できます。

または、ニーズに合わせて素早く編集できる、あらかじめ作成されたテンプレートを使用します。WPForms Proには、2,000以上の既製のテンプレートがあります！

このチュートリアルでは、「シンプルな問い合わせフォーム」テンプレートを選択します。

次に、テンプレートをカスタマイズするためのさまざまなオプションがあるフォームビルダーページが表示されます。

ここから、フォームフィールドを追加または削除できます。フォームに新しいフィールドを追加するには、左側のパネルからフォームフィールドをクリックして、フォームテンプレートにドラッグするだけです。

その後、フィールドオプションを設定できます。

フィールドをクリックするだけで、左側に「フィールドオプション」が表示されます。

例えば、フィールドのラベルやフォーマットを編集したり、必須フィールドにしたり、条件付きロジックを設定したりできます。同様に、他のすべてのフィールドもカスタマイズできます。

ドロップダウンやスライダーなどの基本的なフィールドに加え、日付ピッカーやページブレークなどの高度なフィールドもWPFormsには用意されており、フォームにさらに多くのフィールドを追加できます。

左側のパネルからフィールドタイプを右側にドラッグアンドドロップするか、フォームプレビュー内で上下にドラッグして並べ替えます。

その後、「設定」タブをクリックしてフォームの設定を構成できます。

「一般」設定では、フォーム名、送信ボタンのテキスト、送信ボタンの処理テキストなどを変更できます。

次に、「通知」タブをクリックして、ユーザーがフォームを送信したときに通知を受け取るためのメール通知を設定できます。

次に、「確認」タブをクリックして、ユーザーがフォームを送信したときに表示される確認メッセージを設定できます。

WPFormsでは、メッセージを表示したり、ページを表示したり、ユーザーをURLにリダイレクトしたりできます。

設定が完了したら、フォームを保存できます。

ステップ4：AMPフォームをページに追加する

フォームの準備ができましたので、WordPressサイトに追加できます。

WPFormsのフォームビルダーの上部にある「埋め込み」ボタンをクリックするだけで、新しいページまたは既存のページにフォームを追加できます。

次に、新しいページを作成するか既存のページを選択するように求めるポップアップウィンドウが開きます。

このチュートリアルでは、「新しいページを作成」オプションを選択します。

次に、新しいフォームページの名称を入力する必要があります。

それが完了したら、「Let’s Go」ボタンをクリックするだけです。

ここから、コンテンツエディターでAMPフォームのプレビューが表示されます。

または、WPFormsブロックを使用してコンテンツエディタにフォームを追加することもできます。

ドロップダウンメニューからAMPフォームを選択してください。

次に、ページを公開または更新できます。

これで完了です！他に設定する必要はありません。WPFormsプラグインがフォームに完全なAMPサポートを追加します。

見た目を確認したい場合は、携帯電話でページを開いてください。リーダーモードを使用している場合は、デスクトップブラウザでページを開き、ページURLの末尾に次のように「/amp/」または「/?amp」を追加してテストできます。

https://www.example.com/contact/?amp

AMPフォームにGoogle reCAPTCHAを追加する

デフォルトでは、WPFormsにはスパムを検出してブロックするためのスパム防止設定が含まれています。さらに、Google reCAPTCHAを使用してスパム送信を減らすこともできます。

AMPフォームでGoogle reCAPTCHAを使用するには、Google reCAPTCHA v3にサイトを登録し、Google APIキーを取得する必要があります。

まず、Google reCAPTCHAのウェブサイトにアクセスし、ページの右上にある「v3 Admin Console」ボタンをクリックする必要があります。

その後、Googleアカウントでサインインする必要があります。完了すると、「新しいサイトを登録」ページが表示されます。

次に、ラベルフィールドにウェブサイト名を入力する必要があります。Google AMPページは、標準の「ロボットではありません」チェックボックス（v2）を処理できません。そのため、バックグラウンドで目立たずに機能するreCAPTCHA v3を使用する必要があります。

その後、ドメイン名（https://www.なし）をドメインフィールドに入力します。

次に、「送信」ボタンをクリックします。

次に、サイトにreCAPTCHAを追加するためのサイトキーとシークレットキーとともに、成功メッセージが表示されます。

これらのキーをコピーするだけです。

これで、フォームにreCAPTCHAを追加するためのGoogle APIキーが揃いました。ただし、reCAPTCHAとAMPの互換性を確保するためには、もう1つの設定が必要です。

まず、「設定に移動」リンクをクリックする必要があります。

次に、reCAPTCHA設定が再度表示され、「このキーをAMPページで機能させる」というチェックボックスが表示されます。チェックボックスにチェックを入れて、下の「保存」ボタンをクリックするだけです。

AMPフォームにreCAPTCHAを追加するためのGoogle APIキーを取得したので、WPFormsに入力する必要があります。

WordPressダッシュボードで「WPForms » 設定 » CAPTCHA」ページを開くことができます。

次に、下にスクロールして「reCAPTCHA v3」オプションを選択できます。

その後、サイトキーとシークレットキーを貼り付けるだけです。完了したら、「設定を保存」ボタンをクリックしてください。

WPFormsにGoogle reCAPTCHAが追加されたので、必要に応じてフォームで有効にすることができます。

WPForms » すべてのフォームに移動し、reCAPTCHAを有効にしたいフォームを選択します。フォーム名の下の「編集」ボタンをクリックするだけです。

フォーム設定画面が表示されたら、「設定」タブをクリックし、「スパム保護とセキュリティ」タブを選択します。

ここから、Google v3 reCAPTCHAオプションを有効にするだけです。

それが完了したら、右上隅にある「保存」ボタンをクリックしてフォームを保存します。

その後、連絡先ページに戻って、reCAPTCHA付きのAMPフォームが機能していることを確認できます。

ボーナスヒント：WordPressサイトをモバイルフレンドリーにする

AMPフォームの作成は素晴らしいスタートですが、サイト全体をモバイルフレンドリーにすることで、ユーザーエクスペリエンスはさらに向上します。いくつか簡単なヒントを紹介します:

• モバイルレスポンシブなナビゲーションメニューを使用する：訪問者が小さな画面でもサイトを簡単に閲覧し、必要なものを見つけられるようにします。
• CTAボタンの配置とサイズを調整する: 行動喚起ボタンをタップしやすく、あまりスクロールしなくても見えるようにしてください。
• ウェブサイトの速度を優先する: 画像を圧縮し、キャッシュプラグインを使用して読み込み時間を短縮します。

モバイル最適化されたサイトは、訪問者を惹きつけ、フォームからのコンバージョンを増やすのに役立ちます！

詳細については、モバイルフレンドリーなWordPressサイトを作成する方法に関するガイドを参照してください。

FAQ：WordPressでAMPフォームを作成する

まとめに入る前に、AMPとWordPressフォームでの使用に関する一般的な質問への簡単な回答をいくつかご紹介します。

WordPressにおけるAMPとは何ですか？

AMP（Accelerated Mobile Pages）は、HTMLとJavaScriptを簡略化したバージョンを使用して、モバイルデバイスでのページの読み込みを高速化するフレームワークです。WordPressでは、AMPは通常、スマートフォンやタブレットでの速度に最適化された、軽量なバージョンのページを作成することを意味します。

AMPはまだ関連性がありますか？

ほとんどのウェブサイトでは、AMPはもはや必要ありません。Googleは現在、Core Web Vitalsを優先しており、これは高速で応答性の高いテーマと優れたキャッシュプラグインを使用して改善できます。ただし、ニュース発行者や大規模なメディアサイトは、引き続きAMPから恩恵を受ける可能性があります。

WordPressでAMPページを作成する方法は？

最も簡単な方法は、AMPプラグインを使用することです。これにより、ページや投稿のAMPバージョンを自動的に生成できます。いずれかをインストールした後、どのコンテンツにAMPバージョンを持たせるかを選択し、WordPressダッシュボードから基本的な設定を調整できます。

AMPの欠点は何ですか？

デザインの制御が少なくなり、一部のプラグインやスクリプトが機能せず、高度な機能（特定のアニメーション、追跡ツール、カスタムJavaScriptなど）が制限される場合があります。これにより、通常のWordPressページと比較して、サイトがより制限されているように感じられる可能性があります。

WordPressフォームの使用に関するその他のガイド

この記事が、WordPressでAMPフォームを簡単に作成する方法を学ぶのに役立ったことを願っています。次に、次のガイドも参照してください。

• WordPressフォームのカスタマイズとスタイリング方法
• WordPressでメールリストを増やすためにお問い合わせフォームを使用する方法
• WordPressでGDPR準拠のフォームを作成する方法
• WordPress フォーム使用の究極ガイド
• おすすめのオンラインフォームビルダー（専門家による選定）

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。