人々が特別な機能を利用するためにサインアップするメンバーシップWebサイトを作成したい場合は、専用のログインおよび登録ページを作成することをお勧めします。 これにより、Webサイトをよりプロフェッショナルに感じさせたり、サインアップ手順中に追加のユーザー情報を要求したりすることができます。
そのため、 Elementorページビルダーpluginを使用してカスタムログインおよび登録ページを作成するのに役立つ詳細なチュートリアルをまとめました。
Elementorは、WordPress用の最も人気があり機能満載のページビルダーpluginの1つです。 pluginの無料バージョンには、基本的なサイト構築のための大量のブロックとウィジェットが付属しています。 pluginプロバージョンが存在するのに対し、より高度なウィジェットとブロックを提供します。
現在、Elementorに付属しているフォームビルダーウィジェットは、プロバージョン内にロックされています。 ただし、登録フォームを作成するためにElementor Proを入手する代わりに、 ElementorProと比較して強力なブロックとウィジェットが多数付属しているUltimateAddon for Elementor（UAE） plugin使用することをお勧めします。
目次
- カスタム登録ページを作成する利点
- 1.ユーザー登録ページをパーソナライズする
- 2.1つのフォームから必要なすべての情報を収集します
- 3.ユーザーエクスペリエンスをカスタマイズする
- 4.スパムとの戦いとセキュリティの強化
- 5.あなたのブランドスタイルにぴったり
- Elementorを使用してカスタムユーザー登録フォームを作成するにはどうすればよいですか？
- ステップ1：UAE（ElementorのUltimate Addon） Pluginを使用してユーザー登録フォームを作成する
- ステップ2：フォーム設定を構成する
- 新しいユーザー役割
- 登録後のアクションを選択
- ステップ3：ユーザー登録フォームをWebサイトに追加する
- 結論：
カスタム登録ページを作成する利点
機能だけでも、ウェブサイトで一般的な登録ページを使用しても問題はありません。 しかし、これを行うと、Webサイトに合わせて作成された登録ページに付属する多くの利点を逃してしまいます。
カスタム登録ページを作成してアイデアを得る主な利点のいくつかを次に示します。
1.ユーザー登録ページをパーソナライズする
カスタム登録ページを使用すると、カスタムフィールドを使用して登録フォームを作成し、要件に応じてそれらを設計できます。 ニーズや要件に合わせてフォームのスタイルを設定し、ビジネスアイデアやWebサイトに共鳴するようにすることができます。
ユーザー登録フォームウィジェットは次の目的で使用できます。
- オンラインストアのメンバーになるためのエレガントなソリューション
- ビジネスを反映するカスタムWordPress登録フォーム
- フォーラムおよびeラーニングWebサイト用の安全なフォーム
- 会員ウェブサイト用のカスタマイズされた登録フォーム
2.1つのフォームから必要なすべての情報を収集します
メンバーから収集したい特定の情報がある場合は、それを登録フォームの一部にすることができます。
つまり、ユーザーが選択できるのはユーザー名とパスワードだけではなく、それだけです。 名前、メールアドレス、連絡先の詳細などのフォームフィールドをさらに追加できます。 登録フォームの一部となるカスタムフィールドを使用して、包括的なフォームをエレガントに作成できます。
3.ユーザーエクスペリエンスをカスタマイズする
カスタマイズされたユーザーエクスペリエンスをメンバーに提供できます。 これは、ユーザーを特定のページにリダイレクトしたり、アカウントへの自動ログインを支援したり、受信トレイにメールを送信したりする場合があります。
4.スパムとの戦いとセキュリティの強化
HoneypotとReCaptchaを追加すると、スパマーと戦い、偽の登録を防ぐことができます。
5.あなたのブランドスタイルにぴったり
登録フォームは、Webサイトの他のページと同じように表示されます。 カスタム登録フォームを使用すると、ビジネスに響くフォームを作成できます。
Elementorを使用してカスタムユーザー登録フォームを作成するにはどうすればよいですか？
カスタムユーザー登録フォームがビジネスにどのように役立つかについての基本的な理解ができたので、ElementorとUAEアドオンを使用して独自のカスタムユーザーログインエクスペリエンスを作成する方法に関する包括的なステップバイステップガイドを次に示します。
ここでは、Webサイトのユーザー登録フォームを作成する方法に関する3つのステップのガイドを示します。
注：先に進む前に、 [ダッシュボード]>[設定]>[一般]>[メンバーシップ：有効]メンバーシップ]オプション。
メンバーシップオプションを有効にすると、すべてのユーザーがWebサイトに登録できます。
ステップ1： UAE （ElementorのUltimate Addon） Pluginを使用してユーザー登録フォームを作成する
カスタムユーザー登録フォームを作成するには、ブロックがアクティブ化されたUAE plugin更新バージョンがあることを確認してください。
ログインページを作成するための前提条件を確認したら、新しいページを作成または追加する必要があります。 そして、ユーザー登録フォームを添付するページを編集します。
ウィジェットをドラッグアンドドロップすると、デフォルトのフォームフィールドが表示されます。
フィールドをいじることができます。不要なフィールドを削除したり、ユーザー名、名などの他のフィールドを追加したりできます。
個々のフォームフィールドで必要な列幅を管理するオプションがあります。
入力サイズ、フィールドのラベル（フィールドを表示するか非表示にするか）、または必須マークを管理することもできます。
ステップ2：フォーム設定を構成する
基本を説明した後、 [一般設定]セクションにアクセスしてフォーム設定を構成できます。 ここから次の機能を実行できます。
- 新しいユーザー役割
- 「登録後のアクション」を選択します
ここに両方の詳細な説明があります：
新しいユーザー役割
ユーザーが自分のWebサイトに登録する必要があるメンバーシップサイトがある場合、デフォルトでは、「ユーザーロール」をサブスクライバー。
メンバーのデフォルトのユーザーロールを設定できます。割り当てられたロールは、Webサイトに登録したすべての新しいユーザーに設定されます。
登録後のアクションを選択
ユーザーは、ユーザー登録フォームウィジェットを使用して、メンバーシップサイトに登録した後に実行できる次のアクションを選択できます。
- 自動ログイン：このオプションを使用すると、ユーザーがWebサイトに自動的にログインできるようにすることができます。 初めて資格情報を提供した後、ユーザーは登録が成功すると自動的にWebサイトにログインするため、再度ログインする必要はありません。
- 登録後にリダイレクト：このオプションを使用すると、登録が成功した後、ユーザーをウェルカムページまたはログインページにリダイレクトできます。 このオプションの下のURLフィールドに目的のページのURLを貼り付けることにより、リダイレクトページを設定できます。
- メールを送信する：ユーザーがウェブサイトにユーザーを登録すると、このオプションにより、登録を確認するメールが送信されます。 電子メールのコンテンツはカスタマイズ可能であり、これらの電子メールをより暖かくするために個人的なものにすることができます。 ただし、すべてのユーザーに同じメールを送信する場合は、このオプションを使用して送信することもできます。
- 登録後に非表示：サイトに正常に登録した後、ユーザー登録フォームを非表示にしたい場合があります。 「登録後に非表示」オプションを使用すると、ログインページに移動する間、登録フォームを非表示にしたり、ログインページにアクセスしてWebサイトにアクセスするためのリンクを提供した後に「成功」メッセージを表示したりできます。 このオプションは、ウィジェットの[コンテンツ]タブの[一般設定]セクションにあります。
次に、ウィジェットの「スタイル」タブを使用して、ユーザー登録フォームをデザインおよびスタイルできます。
これで、ユーザー登録フォームウィジェットの作成と構成のプロセスは完了です。 フォームは、すべてライブWebサイトで公開されるように設定されています。
ステップ3：ユーザー登録フォームをWebサイトに追加する
この部分はかなり基本的でシンプルです。 他のElementorウィジェットと同様に、このウィジェットを直接ドラッグアンドドロップして追加できます。 ウィジェットを含むセクションを保存し、必要な登録ページで保存したセクションをフェッチすることもできます。
以下では、Elementorエディターでウィジェットを追加するのに役立ついくつかの方法を詳しく説明しました。
例： WooCommerceページのユーザー登録フォーム
カスタムWooCommerceページ、つまりマイアカウントページをカスタムアカウントページという名前で作成する場合は、次のようにするだけです。
Elementorボタンで編集をクリックすると、Elementorエディターに移動します。
このように別の登録フォームを作成し、上記と同じ手順に従って、カスタムアカウントページで使用するために保存できます。
最後に、ページを「マイアカウントページ」に設定するには、WordPressダッシュボードに移動します。 そして、WooCommerceオプションの下で次のパスに従ってください：
WooCommerce>設定>詳細設定>ページ設定>マイアカウントページ>マイアカウントページ>カスタムアカウントページを選択
WooCommerceアカウントページでUAEを含むページを見ることができ
結論：
ElementorとUAEを使用して、Webサイト用に、選択したオプション設定でスタイリッシュな登録フォームを作成できます。
この記事に記載されている手順に従うことで、 UAEのユーザー登録フォームウィジェットを使用してユーザーを登録できます。 これは、新しいユーザー向けのスタイリッシュなユーザー登録フォームを作成するためのシンプルでエレガントなソリューションです。
