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を使用することです。これは、AMP対応のWordPressフォームを作成するのに役立つ、最も初心者向けのWordPressお問い合わせフォームプラグインです。彼らのチームはGoogleと協力して、WordPressでAMPフォームを簡単に利用できるようにしました。

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

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

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

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

次に、WPFormsをサイトに追加します。WordPress管理画面から、プラグイン » 新規プラグインを追加に移動します。

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

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

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

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

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

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

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

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

WordPressでAMPを使用するには、管理画面の「プラグイン」パネルから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でも私たちを見つけることができます。