WordPressでAMPフォームを作成する方法

モバイルデバイスでのウェブサイトの読み込みを高速化するために、GoogleはAccelerated Mobile Pages（AMP）と呼ばれるプロジェクトを作成しました。 また、Webページの読み込みを高速化することで優れたモバイルブラウジング体験を提供しますが、Webサイトの多くの便利な機能も無効にします。 大きな損失と見なすことができる機能の1つは、連絡フォームです。 AMPは限られたHTMLとJavaScriptのセットを使用するため、WordPressフォームをAMPページに正しく読み込むことができません。 幸いなことに、利用可能な簡単な解決策があります。 WPFormsは、AMP対応のWordPressフォームを作成するのに役立つ、初心者向けのWordPressフォームプラグインです。 したがって、次の記事では、 WPFormsを使用してWordPressでAMPフォームを作成する方法を詳細に説明します。

WordPressでAMPフォームを作成する方法を学ぶ

したがって、AMPは、Webサイトをモバイルフレンドリーにするのにかなり役立ちます。 また、 WordPressの公式AMPプラグインをインストールしてアクティブ化することは、WordPressでAMPを使用するための前提条件です。 有効にすると、プラグインはWordPressサイトのGoogleAMPサポートを自動的に追加します。 ただし、ダッシュボードから[AMP]> [一般]に移動すると、WebサイトのAMP設定を変更できます。 AMP設定ページを表示しているときに、WebサイトでAMPを有効または無効にすることができますが、AMPのWebサイトモードを選択し、サポートされているテンプレートを選択することもできます。 AMPを構成した後、WordPressサイトでAMP互換の連絡フォームを作成する必要があります。

WPFormsを使用したWordPressフォームの作成

プロセスを開始するには、サイトにWPFormsLiteプラグインをインストールしてアクティブ化する必要があります。 これは、WPFormsProプラグインのライトバージョンです。 WPFormsのプロバージョンとライトバージョンの両方で、基本的なAMP対応の連絡フォームを作成できます。 ここでは、無料版についてお話します。 プラグインをインストールしてアクティブ化したら、WPForms>AddNewページに移動して新しいWordPressフォームを作成する必要があります。 フォーム設定画面で、フォームテンプレートを選択してすばやく開始できます。

ゼロから始めたい場合は、空白のフォームを使用することをお勧めします。 次に、フォームビルダーページが開きます。 ここから、フォームフィールドを追加または削除できます。 フォームに新しいフィールドを追加するには、左側のパネルからフォームフィールドをクリックするだけで、右側のフォームビルダーパネルに表示されます。 終了したら、フィールドオプションを構成できます。 これを行うには、フィールドをクリックすると、[フィールドオプション]が表示されます。 同様の方法で、他のすべてのフィールドをカスタマイズできます。

その後、[設定]タブをクリックして、フォーム設定を構成します。 [一般設定]から、フォーム名の変更、ボタンテキストの送信、ボタン処理テキストの送信、スパム対策ハニーポットの有効化などを行うことができます。 [通知]タブに移動して、ユーザーがフォームに入力したときに通知する電子メール通知を設定します。 [確認]タブは、ユーザーがフォームを送信したときに表示される確認メッセージを設定するのに役立ちます。 設定が完了したら、必ずフォームを保存してください。

ページへのAMPフォームの追加

WordPressフォームの準備ができたら、それをページに追加できます。 まず、フォームを追加する新しいページを作成するか、既存のページを開く必要があります。 ページ編集画面を開き、[新しいブロックの追加]アイコンをクリックして、WPFormsブロックの選択に進みます。 そうすると、ページ編集画面に追加されたWPFormsウィジェットを確認できるようになります。 以前に作成したフォームを選択するだけで、ウィジェットがすぐにページエディタにフォームをロードします。 ページを公開または更新することもできます。 これですべてです。 他に何も設定する必要はありません。 WPForms Liteプラグインは、フォームに完全なAMPサポートを追加します。 見た目が気になる方は、携帯電話でページを開いてみてください。

AMPフォームにGooglereCAPTCHAを追加する方法

WPFormsには、デフォルトでスパムをキャッチしてブロックするスパム対策ハニーポットが含まれています。 さらに、Google reCAPTCHAを使用して、スパム送信を減らすことができます。 AMPフォームでGooglereCAPTCHAを使用するには、サイトをGoogle reCAPTCHA v3に登録し、GoogleAPIキーを取得する必要があります。 これを行うには、Google reCAPTCHA Webサイトにアクセスし、ページの右上隅にある[管理コンソール]ボタンをクリックします。 その後、Googleアカウントでサインインする必要があります。 そうすると、「新しいサイトの登録」ページが表示されます。 [ラベル]フィールドにWebサイト名を入力して、入力を開始します。 GoogleAMPはreCAPTCHAv3のみをサポートしているため、reCAPTCHAタイプのオプションから選択する必要があります。

終了したら、[ドメイン]セクションにドメイン名を入力します。 所有者セクションには、デフォルトであなたのメールアドレスが表示されます。 必要に応じて、別のメールを追加することもできます。 次に、続行するにはreCAPTCHA利用規約に同意する必要があります。 また、[変更を所有者に送信する]チェックボックスを選択することを忘れないでください。 これにより、Googleは、サイトの設定ミスや疑わしいトラフィックなどの問題について通知することができます。 完了したら、[送信]ボタンをクリックします。 次に、サイトキーと秘密キーとともに成功メッセージが表示され、サイトにreCAPTCHAを追加します。 このキーを使用すると、フォームにreCAPTCHAを追加できます。

追加の調整

ただし、注意が必要な調整がもう1つあります。 これにより、AMPとreCAPTCHAとの互換性が確保されます。 アクセスするには、そこにある[設定に移動]リンクをクリックします。 これにより、[このキーがAMPページで機能することを許可する]チェックボックスをオンにして、再びCAPTCHA設定に移動します。 チェックボックスをオンにして、下の[保存]ボタンをクリックしてください。

AMPフォームにreCAPTCHAを追加するためのGoogleAPIキーが用意できたので、WordPressダッシュボードの[WPForms]>[Settings]>[reCAPTCHA]ページに移動します。 次に、reCAPTCHA v3オプションを選択し、サイトキーと秘密キーを貼り付けます。 [設定を保存]ボタンをクリックします。 Google reCAPTCHAがWPFormsに追加されたので、必要に応じてフォームで自由に有効にすることができます。 [WPForms]> [All Forms]に移動し、reCAPTCHAを有効にするフォームを選択します。 フォーム設定画面が表示されたら、[設定]タブをクリックし、[一般設定]セクションを選択します。 [Googlev3reCAPTCHAを有効にする]チェックボックスが表示されます。 そのチェックボックスをオンにして、フォームを保存します。 その後、連絡先ページに再度アクセスして、reCAPTCHAが動作しているAMPフォームを確認してください。

それほど多くはありません

ご覧のとおり、WordPressでAMPフォームを作成するために、多くの問題を経験する必要はありません。 特にあなたがあなたの側にこのガイドを持っているとき。 お役に立てば幸いです。これらのいくつかの簡単な手順を実行すると、AMPフォームのすべてのメリットがわかります。