Elementor のログインおよび登録フォームの作成

特別な機能を利用するためにサインアップする会員制 Web サイトを作成したい場合は、専用のログインおよび登録ページを作成する必要があります。これにより、Web サイトをよりプロフェッショナルなものにしたり、サインアップ手順中に追加のユーザー情報を要求したりできるようになります。

そこで、 Elementor ページ ビルダーplugin。

Elementor は、WordPress 向けの最も人気があり、機能が満載のページビルダーpluginインの 1 つです。このpluginには、基本的なサイト構築のための大量のブロックとウィジェットが付属しています。一方、プロバージョンのpluginが存在します。

現在、Elementor に付属しているフォーム ビルダー ウィジェットは、プロ バージョン内でロックされています。登録フォームを作成するためにElementor Pro を入手する代わりにUltimate Addon for Elementor (UAE)plugin勧めします。

目次

カスタム登録ページを作成するメリット

機能だけを考えれば、一般的な外観の登録ページを Web サイトで使用することに問題はありません。しかし、これを行うと、Web サイトに合わせて作成された登録ページに付属する多くの利点を逃すことになります。

ここでは、アイデアを提供するために、カスタム登録ページを作成する主な利点のいくつかを見ていきます。

1. ユーザー登録ページをパーソナライズする

カスタム登録ページを使用すると、カスタム フィールドを含む登録フォームを作成し、要件に応じてデザインできます。ビジネスアイデアや Web サイトと共鳴するように、ニーズや要件に合わせてフォームのスタイルを設定できます。

ユーザー登録フォーム ウィジェットは次の目的で使用できます。

  • オンラインストアのメンバーになるためのエレガントなソリューション
  • あなたのビジネスを反映するカスタム WordPress 登録フォーム
  • フォーラムや e ラーニング Web サイト用の安全なフォーム
  • 会員制ウェブサイト用にカスタマイズされた登録フォーム

2. 単一のフォームから必要な情報をすべて収集する

メンバーから収集したい特定の情報がある場合は、それを登録フォームの一部にすることができます。

したがって、ユーザーが選択できるのはユーザー名とパスワードだけではありません。名前、電子メール アドレス、連絡先の詳細などのフォーム フィールドをさらに追加できます。登録フォームの一部を作成できるカスタム フィールドを利用して、包括的なフォームをエレガントに作成できます。

3. ユーザーエクスペリエンスのカスタマイズ

カスタマイズされたユーザー エクスペリエンスをメンバーに提供できます。これには、ユーザーを特定のページにリダイレクトしたり、アカウントへの自動ログインを支援したり、受信箱に電子メールを送信したりすることができます。

4. スパムとの戦いとセキュリティの強化

Honeypot と ReCaptcha を追加すると、スパマーと闘い、偽の登録を防ぐことができます。

5. あなたのブランドスタイルにぴったり

登録フォームは、Web サイトの他のページと同じように見える必要があります。カスタム登録フォームを使用すると、ビジネスに合わせたフォームを作成できます。

Elementor を使用してカスタム ユーザー登録フォームを作成するにはどうすればよいですか?

カスタム ユーザー登録フォームがビジネスにどのように役立つかについて基本を理解できたので、次に、Elementor と UAE アドオンを使用して、独自のカスタム ユーザー ログイン エクスペリエンスを作成する方法についての包括的なステップバイステップ ガイドを示します。

ここでは、Web サイトのユーザー登録フォームを作成する方法についての 3 ステップのガイドを示します。

:次に進む前に、 [ダッシュボード] > [設定] > [一般] > [メンバーシップ: 有効]に移動して、 [メンバーシップ]

1.png

メンバーシップ オプションを有効にすると、すべてのユーザーが Web サイトに登録できるようになります。

UAE (Elementor 向けの究極のアドオン)Plugin使用してユーザー登録フォームを作成する

ブロックが有効化された更新バージョンのUAEplugin

ログイン ページを作成するための前提条件を確認したら、新しいページを作成または追加する必要があります。そして、ユーザー登録フォームを添付したいページを編集します。

ウィジェットをドラッグ アンド ドロップすると、デフォルトのフォーム フィールドが表示されます。

2.png

フィールドを試してみることができます。不要なフィールドを削除したり、ユーザー名、名などの他のフィールドを追加したりできます。

個々のフォームフィールドで必要な列幅を管理するオプションがあります。

また、入力サイズ、フィールドのラベル (表示するか非表示にするか)、または必須マークを管理することもできます。

ステップ 2: フォーム設定を構成する

「一般設定」にアクセスしてフォーム設定を構成できます。ここから次の機能を実行できます。

  • 新しいユーザーの役割
  • 「登録後のアクション」を選択します

両方の詳細な説明は次のとおりです。

新しいユーザーの役割

ユーザーが Web サイトに登録する必要があるメンバーシップ サイトがある場合、デフォルトでは、「ユーザー ロール」をSubscriber

メンバーに対してデフォルトのユーザー役割を設定できます。割り当てられた役割は、Web サイトに登録するすべての新規ユーザーに設定されます。

無題.png

登録後のアクションの選択

4.png

ユーザーは、ユーザー登録フォーム ウィジェットを使用して、会員サイトに登録した後に実行できる次のアクションを選択できます。

  • 自動ログイン: このオプションを使用すると、ユーザーが Web サイトに自動的にログインできるようになります。初めて資格情報を入力した後、登録が成功すると自動的に Web サイトにログインするため、ユーザーは再度ログインする必要はありません。
  • 登録後にリダイレクト: このオプションを使用すると、登録が成功した後にユーザーをようこそページまたはログイン ページにリダイレクトできます。このオプションの下の URL フィールドに目的のページの URL を貼り付けることで、リダイレクト ページを設定できます。
  • 電子メールを送信する: ユーザーが Web サイトに正常に登録すると、このオプションは登録を確認する電子メールをユーザーに送信します。電子メールの内容はカスタマイズ可能で、これらの電子メールをより温かみのある個人的なものにすることができます。ただし、すべてのユーザーに同じメールを送信したい場合は、このオプションを検討して送信することもできます。
5.png
  • 登録後に非表示にする: ユーザーがサイトに正常に登録した後、ユーザー登録フォームを非表示にしたい場合があります。 「登録後に隠す」オプションを使用すると、ユーザーをログイン ページに誘導する際に登録フォームを非表示にしたり、Web サイトにアクセスするためにログイン ページにアクセスするためのリンクを提供した後に単に「成功」​​メッセージを表示したりすることができます。このオプションは、ウィジェットの [コンテンツ] タブの [一般設定] セクションにあります。

次に、ウィジェットの [スタイル] タブを使用して、ユーザー登録フォームのデザインとスタイルを設定できます。

これを行うと、ユーザー登録フォーム ウィジェットの作成と構成プロセスが完了します。フォームはすべてライブ Web サイトで公開されるように設定されています。

ステップ 3: Web サイトにユーザー登録フォームを追加する

この部分は非常に基本的でシンプルです。他の Elementor ウィジェットと同様に、このウィジェットを直接ドラッグ アンド ドロップして追加できます。ウィジェットを含むセクションを保存し、必要な登録ページで保存されたセクションを取得することもできます。

6.png

以下では、Elementor エディターにウィジェットを追加するための方法をいくつか詳しく説明します。

WooCommerce ページのユーザー登録フォーム

カスタム WooCommerce ページ、つまりマイ アカウント ページをカスタム アカウント ページという名前で作成したい場合は、次のようにするだけです。

「Elementor で編集」ボタンをクリックすると、Elementor エディターが表示されます。

これと同じように別の登録フォームを作成し、上記と同じ手順に従ってカスタム アカウント ページで使用できるように保存します。

最後に、ページを「マイアカウントページ」として設定するには、WordPress ダッシュボードに移動します。そして、WooCommerce オプションで次のパスに従います。

WooCommerce > 設定 > 詳細 > ページ設定 > マイ アカウント ページ > マイ アカウント ページ > カスタム アカウント ページを選択

8.png

UAEのユーザー登録フォーム ウィジェットを含むページを確認できます

結論:

UAEを使用して、Web サイト用に、お好みのオプションを選択してスタイリッシュな登録フォームを作成できます。

この記事の手順に従うことで、 UAE。これは、新規ユーザー向けにスタイリッシュなユーザー登録フォームを作成するためのシンプルかつエレガントなソリューションです。

コメントを残す

あなたのメールアドレスは公開されません。 *が付いているフィールドは必須です