WordPressでカスタムユーザー登録フォームを作成する方法

公開: 2022-05-19

ユーザーの登録は、訪問者がWebサイトにアカウントを作成するプロセスです。ユーザーの登録に関心がある理由はさまざまです。たとえば、定期的な顧客のデータを保存したり、フォーラムのメンバーとして参加したり、アフィリエーションまたはメンバーシッププログラムに参加したり、とりわけ、あなたのウェブサイトの共同編集者または著者。

デフォルトでは、WordPressでは、 [設定]»[一般]で、誰でも新しいユーザーのデフォルトプロファイルに登録できることを示すことで、ユーザー登録を簡単に作成できます。

したがって、登録URLを指定することにより、 https://my-website/wp-login.php?action=registerは、ユーザーが登録するための次のページを表示します。

WordPressサイトでのユーザー登録 — WordPressサイトでの新規ユーザー登録。

デフォルトのWordPressユーザー登録の問題は、一方ではユーザーに関する追加情報を追加できないこと、もう一方ではページの外観がサイトの外観とはほとんど関係がないことです。感じられる。

両方の問題を解決する最も簡単な方法は、WordPressで必要なすべての情報を含み、さらに、使用するテーマのスタイルと完全に統合されたカスタム登録フォームを作成することです。 NelioFormsプラグインを使用してこのタイプのフォームを作成するための手順は次のとおりです。あなたはそれがどれほど簡単であるかを見るでしょう！

Nelioフォームプラグイン

Nelio Formsは、WordPressブロックエディターに統合するフォームを作成するためのプラグインであり、これに伴うすべての利点があります。無料版をWordPressプラグインディレクトリから直接ダウンロードして、必要なすべてのシンプルなフォームを作成できます。または、その可能性をすべて解き放ちたい場合は、プレミアムバージョンを49ユーロで入手して、スパム保護やデータロギングなどの機能を利用できます。

最初の登録フォームを作成する

ダッシュボードからインストールすると、フォームの作成は投稿やページの作成と同じくらい簡単です。サイドバーメニューで、Nelioフォームメニューから[新規追加]オプションをクリックします。

NelioFormsで新しいお問い合わせフォームを追加する — NelioFormsで新しいお問い合わせフォームを追加します。

ブロックエディタに移動し、登録フォームを作成します。ここで、フォーム自体を定義する必要があります。

Nelioフォームを使用したフォームの編集 — NelioFormsを使用してフォームを編集します。

上の画像でわかるように、他のブロックと同様に、クリックしてドラッグするだけでフォームにフィールドとして含めることができる一連のブロックがあります。フィールドラベルを表示する場合は、フィールドが必須かどうかを指定し、該当する場合はプレースホルダーを追加できます。また、列とテキストを追加することもできます。

フォームのユーザー登録アクションを作成する

現在、次のフォーム送信アクションがあります。

エントリーレコーディング、
電子メール通知、
ユーザー登録、および
コンテンツの作成。

エントリー記録オプションを有効にすると、フォームに入力された情報がWordPressデータベースに保存されます。 電子メール通知は、送信されたフォームフィールドを含む電子メールを提供された電子メールアドレスに送信します。そして、4番目のオプションであるコンテンツ作成は、フォームに入力された情報を使用して投稿、ページ、またはカスタムコンテンツタイプを作成するために使用されます。

データベースにユーザーを登録するには、 NelioFormsプラグインのユーザー登録オプションを有効にする必要があります。モーダルウィンドウが開き、データベースのフォームから保存されるデフォルト値が表示されます。

ユーザーレコードモーダルウィンドウの編集 — ユーザー登録編集モーダルウィンドウ。

各フィールドを確認し、必要に応じて各フィールドの値を変更します。これを行うには、フィールドの右側にあるラベルアイコンをクリックするだけで、送信で提供されたフォームフィールドのいずれかを選択できます。

いずれかのフィールドの内容を変更する — フォームフィールドの1つの内容を変更します。

たとえば、ユーザーのメールアドレスを選択して、フォームの送信時に作成されるユーザーの「ユーザー名」として使用できます。

詳細設定オプションでは、登録が完了したらユーザーにログインさせるかどうかを指定できます。ランダムなパスワードを生成するか、この例のように、ユーザーがフォームに入力するときに入力したパスワードを登録パスワードとして使用するかを指定することもできます。

レジストリパスワードフィールドの値を示します — 登録パスワードフィールドの値を指定します。

Nelio Formsを使用すると、ユーザー登録フォームでWebサイトのURLの値を指定し、ドロップダウンから登録するユーザーロールを選択することもできます。

最後に、登録を完了するために、ユーザーからWebサイトのデータベースに保存する追加のメタフィールドをフォームに追加できます。これは、電話番号、住所、年齢、またはユーザーに関するその他の情報などの追加情報を保存するのに非常に役立ちます。

データベースのユーザーレコードにメタフィールドを追加する — データベースのユーザー登録にメタフィールドを追加します。

ご覧のとおり、データベースにユーザーを登録するためのさまざまなデータオプションがあります。

表示したい場所にフォームを挿入します

フォームを作成したら、あとは表示したいページにフォームを挿入するだけです。 Nelio Formsの大きな利点は、WordPressエディターとの完全な統合です。つまり、フォームを通常のブロックとして挿入したり、インラインで編集したりすることができます。

ページへのフォームブロックの追加 — *Cover*ブロック内の*Media＆Text*ブロック内に*Form*ブロックを追加します。

次に、ここで直接フォームを作成するオプションがあります。この場合、上記の手順に従うか、以前に作成したフォームを選択できます。

フォームを選択すると、他のブロックと同じように、フォームがページに挿入されます。

私が言ったように、あなたはそれが使われているページで直接フォームを修正することができます。そうすると、ページを更新するボタンが少し異なり、「更新」の左側に白い点が表示されます。ページを更新するときに、ページとフォームの両方に加えられた変更を保存するかどうかを確認する必要があります。

ご覧のとおり、たとえばショートコードを使用してフォームを挿入した場合よりも、フォームを挿入したページの外観を直接変更する方がはるかに便利です。

WordPressの登録ユーザーを確認してください

登録フォームがページに追加されたら、ユーザーが追加した情報がデータベースのwp_userテーブルとwp_usermetaテーブルに登録されていることを確認し、WordPressの[ユーザー]タブで詳細を表示できます。

NelioFormsに登録されているユーザー — NelioFormsで登録ユーザーを表示します。

この例では、Podsプラグインを使用して、フォームに追加されたメタフィールドの表示を[ユーザー]タブに追加しました。

結論

Nelio Formsを使用してカスタムユーザー登録フォームを作成するために、コーディング方法を知る必要はありません。Webサイトに投稿やページを作成するのと同じくらい簡単です。フォームに必要なフィールドを追加できます。このフィールドを任意のページに追加するのは、他のブロックを追加するのと同じくらい簡単で、Webサイトのスタイルと完全に統合されています。

UnsplashのDaiKEによる注目の画像。