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

WordPressの会員制サイトやユーザー登録が可能なその他のウェブサイトを運営している場合、シームレスなサインアップ体験は非常に重要です。しかし、デフォルトのWordPressユーザー登録フォームは少し基本的であることに気づいたかもしれません。

このデフォルトのフォームにはカスタマイズオプションがなく、WordPressのブランディングが表示されるため、ウェブサイトのデザインと衝突する可能性があります。

WPBeginnerでは、ユーザー登録を含むすべてのタッチポイントで一貫したブランディングを維持することの重要性を理解しています。

カスタム登録フォームを追加することで、新規訪問者のユーザーエクスペリエンスを向上させ、一貫したブランドアイデンティティを確保し、WordPressウェブサイトでのユーザー登録を増やすことができます。

この記事では、WordPressでカスタムフロントエンド登録フォームを作成するプロセスを説明します。

WordPressでカスタムユーザー登録フォームを追加する理由

デフォルトのWordPressユーザー登録ページには、WordPressのブランディングとロゴが表示されますが、これはWordPressウェブサイトのデザインの他の部分と一致しません。

新しいユーザー登録フォームを作成すると、サイトの任意のページに登録フォームを追加でき、登録プロセス中に一貫したユーザーエクスペリエンスを提供できます。

登録フォームを使用すると、WordPressブログやビジネスに固有の特定の情報をユーザーから収集できます。

これには、追加の連絡先情報、設定、またはサイトの機能に関連するその他の情報を含めることができます。

例えば、イベントを企画している場合、登録フォームは、食事制限、セッションの好み、特別な要件などの参加者から重要な詳細を収集するのに役立ちます。

カスタムユーザー登録フォームでは、登録時にユーザーをリダイレクトすることもできます。追加のユーザープロファイルフィールドを表示したり、それらをカスタムフロントエンドログインフォームと組み合わせたり、メールマーケティングサービスに接続したりすることもできます。

とはいえ、WordPressでカスタムユーザー登録フォームを作成する方法をステップバイステップで見ていきましょう。

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

カスタムユーザー登録フォームを作成する最も簡単な方法は、WPFormsを使用することです。私たちの意見では、これはWordPressの最高の連絡フォームプラグインです。これにより、WordPressですべての種類の新しいフォームを作成できます。

WPBeginnerでは、すべての問い合わせフォームのニーズと年次アンケートにWPFormsを使用しています。このツールには良い経験しかありません。特に、ドラッグ＆ドロップビルダーが非常に使いやすい点を高く評価しています。

詳細については、WPFormsレビューをご覧ください。

まず、WPFormsプラグインをインストールしてアクティブ化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPress管理サイドバーから**WPForms » 設定**ページに移動して、ライセンスキーを入力します。

このキーはWPFormsウェブサイトのアカウントから取得できます。

キーが検証されたら、WordPressダッシュボードからWPForms » Addonsページにアクセスする必要があります。

ここから、「User Registration Addon」を見つけて、その下の「Install Addon」ボタンをクリックします。

WPFormsは、WordPressサイトにUser Registration Addonをインストールしてアクティブ化します。アドオンがインストールされると、ステータスが「アクティブ」に変わるのが表示されます。

カスタムユーザー登録フォームを作成する準備ができました。

これを行うには、管理サイドバーからWPForms » 新規追加ページにアクセスします。

これにより、「テンプレートの選択」ページに移動します。ここで、作成しようとしているフォームの名前を入力して開始できます。

それが完了したら、単に「ユーザー登録フォーム」テンプレートを見つけて、その下にある「テンプレートを使用」ボタンをクリックします。

これにより、画面にWPFormsのフォームビルダーが起動します。右側の列には、フィールドオプションが表示され、画面の左隅にはフォームのプレビューが表示されます。

デフォルトの登録フォームには、名前、ユーザー名、パスワード、メールアドレス、短い自己紹介フィールドが既に追加されています。

ただし、左側のパネルからフォームにフィールドを簡単に追加したり、フィールドをドラッグして順序を並べ替えたりすることもできます。

このプラグインでは、各フォームフィールドを編集することもできます。これを行うには、いずれかのフォームフィールドをクリックするだけで、左側の列に「フィールドオプション」が表示されます。

ここから、フィールドラベルの変更、フォーマットの編集、説明の追加、条件付き書式の設定、フィールドを必須にするなどの操作ができます。

完了したら、「保存」ボタンをクリックして設定を保存することを忘れないでください。

注意：登録ユーザーにメール通知を送信したい場合は、WordPressフォーム送信後に確認メールを送信する方法に関するチュートリアルをご覧ください。

カスタムユーザー登録フォームにカスタムフィールドを追加する

WPFormsでは、カスタムユーザープロファイルフィールドをユーザー登録フォームに接続することもできます。

これを行うには、WordPress サイトに追加のユーザープロファイルフィールドを追加する必要があります。これを行う最も簡単な方法は、WordPress プラグインを使用することです。

このチュートリアルでは、Advanced Custom Fields プラグインを使用しています。ただし、WPForms のフィールドマッピング機能は、標準の WordPress カスタムフィールドを使用してユーザーメタデータを追加および保存するあらゆるプラグインで機能します。

まず、Advanced Custom Fields プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。

プラグインを有効化したら、WordPress管理サイドバーから**ACF » Field Groups** ページに移動します。ここで、「+ Add Field Group」ボタンをクリックします。

これにより、「新しいフィールドグループを追加」ページに移動し、フィールドグループのタイトルを入力することから始めることができます。

このチュートリアルでは、ソーシャルメディアアカウントの詳細用のカスタムフィールドを作成します。

その後、「フィールドタイプ」ドロップダウンメニューまでスクロールし、カスタムフィールドのタイプを選択します。テキスト、数値、画像、ファイル、チェックボックス、URL、パスワードなど、さまざまなものを選択できます。

これが完了したら、プロファイルページに表示されるフィールドラベルを入力します。

例えば、Facebookプロフィールを収集するためのカスタムフィールドを追加したい場合は、フィールドラベルを「Facebook」と名付けることができます。

フィールドラベルを入力するとフィールド名が自動生成されることに気づくでしょうが、編集することもできます。

次に、「ラベル」セクションから「検証」タブに切り替えます。ここで、「必須」スイッチをオンにすると、ユーザーはフォームを送信する前にこのカスタムフィールドに入力することが必須になります。

ここからフィールドの文字数制限を設定することもできます。

これが完了したら、上部の「プレゼンテーション」タブに切り替えてください。

これで、作成者向けの指示、フィールドのプレースホルダーテキスト、ラッパー属性などを追加できます。

その後、上部から「条件付きロジック」タブに切り替えることで、作成中のカスタムフィールドに条件付きロジックを追加することもできます。

変更が完了したら、「場所ルール」セクションまでスクロールします。ここで、どの画面でこれらのカスタムフィールドを使用するかを決定するためのルールセットを作成する必要があります。

このフィールドをすべてのユーザープロファイルに表示させたいので、左側のドロップダウンメニューから「ユーザーロール」オプションを選択する必要があります。

その後、中央のドロップダウンメニューはそのままにして、右側のドロップダウンメニューから「すべて」オプションを選択します。

これで、作成中のカスタムフィールドグループがすべてのユーザープロファイルに表示されます。

次に、上部から「グループ設定」タブに切り替えます。

そこに着いたら、フィールドグループがアクティブになっていることを確認するために、トグルを「いいえ」から「はい」にスライドしてください。

これが完了したら、「フィールドを追加」ボタンをクリックして、他のカスタムフィールドをフィールドグループに追加することもできます。

例えば、複数のソーシャルメディアフィールドを作成したい場合は、「フィールドを追加」ボタンをクリックして、他のソーシャルメディアプラットフォーム用のフィールドのカスタマイズを開始できます。

作成したすべてのフィールドは、同じフィールドグループの一部になることに注意してください。

完了したら、設定を保存するために上部にある「変更を保存」ボタンをクリックすることを忘れないでください。

これで、フィールドグループを正常に公開しました。

さて、作成したカスタムフィールドを表示するには、管理エリアからユーザー » プロフィールページに移動します。

ここで、プロファイルページの最下部にカスタムフィールドが追加されているのがわかります。

カスタムユーザープロファイルフィールドを作成したら、WPFormsのカスタムユーザー登録フォームに追加する必要があります。

その後、データを適切に保存するために、フォームフィールドをカスタムフィールドにマッピングする必要もあります。

これを行うには、WordPressダッシュボードから WPForms » すべてのフォーム ページにアクセスします。次に、先ほど作成して保存したユーザー登録フォームの下にある「編集」リンクをクリックします。

これにより、WPFormsのフォームビルダーでフォームが開きます。そこにアクセスしたら、左側のパネルからフィールドをドラッグしてフォームに追加するだけです。

この例では、フォームに「ウェブサイト/URL」フィールドを追加しています。

Webサイト/URLフィールドを追加したら、それをクリックして左側の列にフィールドのプロパティを開きます。

次に、フィールドラベルを「ウェブサイト/URL」から作成したフィールドグループの名前に変更してください。

必要に応じて、フィールドの説明を追加することもできます。

その後、フォームを保存するために「保存」ボタンをクリックすることを忘れないでください。

次に、高度なフォーム設定とフィールドマッピングのために、右隅にある「設定」ボタンをクリックする必要があります。設定ページで、「ユーザー登録」タブをクリックします。

WPFormsは、フォームフィールドと、それらの下にWordPress登録フィールドを選択してマッピングするためのドロップダウンメニューを表示します。

WPFormsが名前、メール、パスワードなどのデフォルトフィールドを自動的にマッピングすることに気づくでしょう。

ここから、「ウェブサイト」オプションの下のドロップダウンメニューでフィールドグループ名オプションを選択します。

その後、「カスタムユーザーメタ」セクションまで下にスクロールします。

カスタムメタキーオプションに、以前に作成したフィールドグループの名前を入力し、ドロップダウンメニューからマッピングしたいカスタムフォームフィールドを選択できます。

注意：登録ユーザーにメール通知を送信したい場合は、WordPressフォーム送信後に確認メールを送信する方法のチュートリアルを参照してください。

最後に、画面の右上にある「保存」ボタンをクリックして設定を保存します。

カスタムユーザー登録フォームを WordPress に追加する

WPForms を使用すると、WordPress の投稿、ページ、サイドバーウィジェットにフォームを簡単に追加できます。

まず、カスタム登録フォームを追加したい既存または新規の投稿/ページを開く必要があります。

そこに着いたら、左上隅の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここから、WPFormsブロックをページ/投稿に配置して追加します。

その後、ブロック自体のドロップダウンメニューからカスタム登録フォームを選択できます。

WordPressエディタに登録フォームのプレビューが表示されます。投稿またはページを発行して、カスタム登録フォームが機能していることを確認してください。

サイドバーにカスタムユーザー登録フォームを追加する

WPFormsでは、カスタムユーザー登録フォームをサイドバーに追加することもできます。管理エリアから**外観 » ウィジェット**ページにアクセスし、「ブロックを追加」(+)ボタンをクリックするだけです。

これによりブロックメニューが開かれ、そこから「ウィジェット」ページのサイドバータブにWPFormsブロックを追加できます。

その後、WPFormsブロックのドロップダウンメニューからユーザー登録フォームを選択するだけです。

完了したら、設定を保存するために「更新」ボタンをクリックすることを忘れないでください。

これで、ウェブサイトにアクセスして、ウェブサイトのサイドバーにユーザー登録フォームを表示できます。

カスタムユーザー登録フォームをフルサイトエディターに追加する

ブロックベースのWordPressテーマを使用している場合、ウィジェットページはありません。フルサイトエディター（FSE）でサイドバーに登録フォームを追加するには、管理サイドバーから外観 » エディターページに移動します。

そこに移動したら、左上にある「ブロックを追加」（+）ボタンをクリックしてブロックメニューを開きます。

ここから、WPFormsブロックを見つけて、ウェブサイトの希望する場所に配置する必要があります。

その後、ブロック自体のドロップダウンメニューから登録フォームを選択します。

最後に、「保存」ボタンをクリックして設定を保存します。

次に、ウェブサイトにアクセスして、カスタムユーザー登録フォームが機能していることを確認します。

ボーナス：登録フォームでカスタムログインページを作成する

ウェブサイトのページに登録フォームを追加すると、WordPressはデフォルトでテーマのレイアウト、テンプレート、スタイルを使用します。

しかし、WordPressのランディングページビルダーを使用すると、ゼロから見事な登録ページを作成できます。

SeedProd は、WordPress に最適なページビルダーです。使いやすく、ドラッグ＆ドロップビルダーを備えているため、あらゆる種類のランディングページを作成できます。このプラグインは、あらかじめ作成されたテンプレートや多くのカスタマイズ機能も提供しています。

当社のパートナーブランドの中には、これを使用してカスタムテーマを作成し、サイトを視覚的に魅力的なものにし、ユーザーから高い評価を得ているところもあります。詳細については、SeedProdのレビューをお読みください。

まず、SeedProdプラグインをサイトにインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法のチュートリアルを参照してください。

有効化したら、**SeedProd » Settings** ページにアクセスして、プラグインライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントで見つけることができます。

キーを検証すると、登録フォームを使用してログインページを作成する準備が整いました。

まず、管理サイドバーから SeedProd » Landing Pages 画面に移動し、「Set up a Login Page」ボタンをクリックします。

これにより、「新しいページテンプレートを選択」画面に移動し、作成しようとしているログインページ用の既製のテンプレートを選択できます。

テンプレートを選択すると、ポップアップウィンドウが表示されます。

これで、ランディングページの名称とURLを入力する必要があります。それが完了したら、「ページを保存して編集を開始」ボタンをクリックしてください。

次に、SeedProdのドラッグ＆ドロップランディングページビルダーを使用してログインページを編集できます。

これを行うには、左側のメニューからブロックを選択し、ログインページに追加したい場所にドラッグします。

例えば、ランディングページにヘッダー、画像、動画、ソーシャル共有ブロックを追加できます。

それが完了したら、左側の列から「高度なブロック」セクションに移動します。

ここから、「お問い合わせフォーム」ブロックを選択し、ログインページに配置します。

ユーザーがログイン情報を2回入力する必要がないように、テンプレートから既存のユーザー名とパスワードブロックを削除することをお勧めします。

次に、ログインページでWPFormsブロックをクリックして、左側の列で設定を開きます。

メニューに「フォームを選択」オプションが表示されるようになります。

ここから、ドロップダウンメニューで登録フォームを選択してください。

ランディングページビルダーに登録フォームのプレビューが表示されるはずです。

最後に、変更を保存するために「保存」ボタンをクリックすることを忘れないでください。

その後、「接続」タブに移動し、さまざまなメールマーケティングサービスを登録フォームと統合できます。

SeedProdは、Drip、Constant Contact、AWeberなどの人気のメールマーケティングサービスと簡単に統合でき、メールリストの改善に役立ちます。

次に、「ページ設定」タブに移動し、一般設定の下でページステータスを公開に変更できます。

このタブでは、ページタイトルとURLを編集したり、SeedProdリンクを有効にしたりすることもできます。

検索エンジン向けにページを最適化したい場合は、SEOタブに移動します。

ここから、SEOタイトル、説明、ソーシャルメディアサムネイルなどを入力して設定を構成できます。

SeedProdでは、「スクリプト」設定の下にコードスニペットを追加することもできます。設定に満足したら、上部にある「保存」ボタンをクリックしてページビルダーを閉じます。

その後、**SeedProd » Landing Pages** 画面に移動し、ログインページの下にあるスイッチを切り替えて、ページを「アクティブ」にします。

これで、ログインページにアクセスして、登録フォームが機能していることを確認できます。

この記事が、WordPressでカスタムユーザー登録フォームを簡単に追加する方法を学ぶのに役立ったことを願っています。また、WordPressフォームの究極のガイドや、おすすめのWordPressユーザー登録プラグインもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。