WordPressフォームにカレンダーに追加オプションを含める方法

公開: 2018-11-29

WordPressフォームに[カレンダーに追加]オプションを含めますか?

サイト訪問者に、サイトに登録した後にイベントの日付をカレンダーに簡単に追加する方法を提供することは、人々が喜ぶ追加の個人的なタッチです。 必要に応じて、このオプションをフォームの確認または電子メール通知にもいつでも追加できます。

この記事では、WordPressフォームに[カレンダーに追加]オプションを含める方法を説明します。これにより、サイトの訪問者は、Webサイトでフォームを送信した瞬間から、今後のイベントの計画を開始できます。

ステップ1:WordPressフォームを作成する

最初に行う必要があるのは、WPFormsプラグインをインストールしてアクティブ化することです。 詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。

この例では、人々が記入して送信できる簡単な誕生日パーティーの出欠確認フォームを作成します。 この手順のヘルプについては、Form TemplatesPackアドオンを使用してWordPressでRSVPフォームを作成する方法に関するこのチュートリアルを必ず確認してください。

フォームエディタでのRSVPフォームは次のようになります。

WPFormsは最高のWordPressフォームビルダープラグインです。 無料で入手!

誕生日パーティーrsvpフォーム

パーティーの開催時期を知らせる小さなメッセージをフォームに追加するには、 HTMLフォームフィールドを左側から右側にドラッグするだけです。 次に、フィールドをクリックして変更を加えます。

フォームに追加したものは次のとおりです。

rsvpフォームをカスタマイズする

当サイトのフロントエンドでは、RSVPフォームは次のようになります。

最終誕生日rsvpフォーム

次に、フォームに[カレンダーに追加]オプションを含めます。

ステップ2:Googleカレンダーでイベントを作成する

フォームにカレンダーオプションを含める前に最初に行うことは、Googleカレンダーでイベントを作成することです。

これを行うには、Googleアカウントにログインし、Googleカレンダーに移動します。 次に、イベントの詳細を入力します。

Googleカレンダーでのイベントの作成

[保存]をクリックして、イベントをカレンダーに保存します。

次に、[その他のアクション]というラベルの付いたドロップダウンメニューから、[イベントの公開]を選択します。

イベントを公開する

これを行うと、イベントへのリンクを含むポップアップモーダルが表示されます。 WordPressフォームで使用するためにHTMLコードをコピーすることをお勧めします。

htmlコード

サイトの訪問者に公開済みのイベントを表示するには、Googleカレンダーが「公開」に設定されていることを確認する必要があります。

すべてのユーザーが表示できるようにGoogleカレンダーを「公開」に変更するには、まずカレンダーのプルダウンから[設定]を選択します。

グーグルカレンダー設定

次に、公開するカレンダーをクリックし、[アクセス許可]まで下にスクロールして、[公開する]チェックボックスクリックします。

カレンダーを公開する

Googleカレンダーを公開すると、Google検索を介しても、すべてのカレンダーイベントが世界中に表示されます。 カレンダーに個人的な問題がある場合は、サイトの訪問者が自分のカレンダーに追加するイベント用に別のGoogleカレンダーを作成することをお勧めします。

これで、イベントをWordPressフォームに追加する準備が整いました。

ステップ3:WordPressフォームにカレンダーに追加オプションを含める

フォームに[カレンダーに追加]オプションを含めることができる場所はいくつかあります。

  1. フォーム自体に
  2. フォームの確認で
  3. 電子メール通知で

まず、実際のフォームに[カレンダーに追加]オプションを含める方法を見てみましょう。

まだ行っていない場合は、左側から右側のパネルにドラッグして、イベントフォームにHTMLフォームフィールドを追加します

このフォームフィールドを最初から追加したのは、人々が私たちのイベントについて少し知っていることを確認したかったからです。

HTMLフォームフィールドが追加されたら、それをクリックして変更を加えます。 Googleカレンダーのコードを[コード]セクションに貼り付けます。

イベントフォームにhtmlコードを追加する

[保存]をクリックします。 これは、フロントエンドのフォームで[カレンダーに追加]オプションがどのように表示されるかを示しています。

カレンダーオプションへの最終追加

サイト訪問者がGoogleカレンダーというラベルの付いたCTAボタンをクリックすると、Googleが開き、アカウントにサインインするように求められます。 次に、追加したすべての詳細がイベントに表示されるので、必要に応じてイベントを自分のカレンダーに保存できます。

これで、実際のWordPressフォームに[カレンダーに追加]オプションが必要ない場合は、フォームの確認または通知でいつでもイベントへのリンクを追加できます。

ステップ4:フォームの確認メッセージに[カレンダーに追加]オプションを含める

フォームの確認は、サイトの訪問者がWebサイトでフォームを送信すると表示されるメッセージです。 彼らは人々に彼らのフォームが通過したことを知らせ、あなたに次のステップが何であるかを知らせる機会を提供します。

WPFormsには、次の3つの確認タイプから選択できます。

  1. メッセージ。 これは、WPFormsのデフォルトの確認タイプです。 サイト訪問者がRSVPフォームを送信すると、フォームが通過したことを知らせる簡単なメッセージ確認が表示されます。
  2. ページを表示します。 この確認タイプは、サイト訪問者をサイトの特定のWebページに誘導し、出欠確認をしてくれたことに感謝します。 これを行うためのヘルプについては、顧客をありがとうページにリダイレクトするチュートリアルを確認してください。
  3. URL(リダイレクト)に移動します。 このオプションは、サイト訪問者を別のWebサイトに送信する場合に使用されます。

イベントフォームでは、[カレンダーに追加]オプションを含む確認メッセージを作成して、サイトの訪問者が次のイベントをGoogleカレンダーにすぐに追加できるようにします。

開始するには、フォームエディタの[設定]の下にある[確認]タブをクリックします。

次に、作成する確認タイプのタイプを選択します。 この例では、メッセージを選択します。

確認メッセージ

フォームの確認でカレンダーにイベントを追加するオプションを追加しているため、次の2つのオプションがあります。

  1. 参加するかどうかに関係なく、メッセージに[カレンダーに追加]オプションを追加して、1つの簡単なメッセージを作成します
  2. 複数のフォーム確認を作成し、スマートな条件付きロジックを有効にして、出席する人、または出席する可能性のある人だけが[カレンダーに追加]オプションを使用して確認メッセージを表示するようにします。

簡単にするために、イベントに参加する予定があるかどうかに関係なく、すべてのサイト訪問者に表示する1つの確認メッセージを作成します。 Googleカレンダーから確認メッセージにHTMLコードを追加するときは、必ず[テキスト]タブをクリックしてください。

フォーム確認メッセージ

誰かがRSVPフォームを送信すると、フォームの確認は次のようになります。

フォーム確認例

繰り返しになりますが、サイト訪問者が行う必要があるのは、Googleカレンダーボタンをクリックして、自分のカレンダーにイベントを追加することだけです。

複数のフォーム確認を作成し、条件付きロジックを使用して、RSVPの回答に応じてさまざまなメッセージをユーザーに表示する場合は、条件付きフォーム確認の作成に関するこのチュートリアルを確認してください。

ステップ5:フォームの電子メール通知にカレンダーに追加オプションを含める

WordPressフォームに[カレンダーに追加]オプションを含めることができる最後の場所は、ユーザーがWebサイトでフォームを送信したときに受信する電子メール通知です。

ただし、これを行う方法に進む前に、RSVPフォームにEメールフォームフィールドがあることを確認する必要があります。この例では、これはありませんでした。 これは、WPFormsがサイト訪問者に通知を電子メールで送信することを知る唯一の方法です。

イベントフォームにメールフォームフィールドを追加したら、フォームエディタで[設定] » [通知]に移動します。

WPForms通知設定

デフォルトでは、誰かがサイトでフォームを送信すると、常に電子メール通知が届きます。

ただし、サイト訪問者にも通知を確実に受信させるには、スマートタグを使用して、サイト訪問者の電子メールを電子メール通知に追加する必要があります。

これを行うには、[スマートタグを表示]をクリックします。

フォーム通知スマートタグ

次に、ドロップダウンメニューから[電子メール]オプションを選択して、サイト訪問者がRSVPフォームに入力した電子メールにWPFormsが電子メール通知を送信することを認識できるようにします。

通知スマートタグ

次に、[カレンダーに追加]オプションを使用してメッセージをカスタマイズします。

[メッセージ]まで下にスクロールして、他のユーザーにメールで表示してほしいメッセージを追加します。 ここに、[カレンダーに追加]オプション用のHTMLコードをGoogleカレンダーから貼り付けることができます。

通知メッセージ

これで、誰かがイベントフォームに入力するたびに、他のすべての手順で見たのと同じGoogleカレンダーボタンが付いた通知が届きます。

最終的な考え

そして、あなたはそれを持っています! WordPressフォームに[カレンダーに追加]オプションを含めて、サイトの訪問者が自分のGoogleカレンダーに今後のイベントを簡単に追加できるようにする方法をマスターしました。

イベントや予約用のフォームを作成している場合は、日付ピッカーを使用してWordPressフォームを作成する方法に関するこのガイドもお勧めします。

訪問者に共有のWordPressカレンダーにカレンダーイベントを追加さ​​せることができることをご存知ですか? これは、ユーザーが送信したイベントのフォームを追加するための簡単なガイドです。

すべてのサイト訪問者がイベントフォームを表示して入力することを心配している場合は、WPFormsを使用すると、特定のフォーム権限を有効にして、パスワードを持っている人だけがイベントフォームに入力して送信できるようにすることができます。 この手順のヘルプについては、WordPressフォームをパスワードで保護する方法に関するこの簡単なチュートリアルを確認してください。

何を求めている? 今日から最も強力なWordPressフォームプラグインを始めましょう。

また、この記事が気に入った場合は、FacebookとTwitterでフォローしてください。