AI要約
WordPressウェブサイトのログインページをカスタマイズしたいですか？WPFormsを使えば、コーディング不要でログインフォームをスタイリングする方法がたくさんあります！
この記事では、人気のサイトのログインページを7つの異なる例で紹介し、それらをどのように再現するかを説明します。ここで紹介する例と同じスタイルで、マウスを数回クリックするだけで、各フォームを作成するプロセスを説明します。
始めましょう！
ログインページに何を書くか？
ログインページには、ユーザーがユーザー名、メールアドレス、パスワードなどを入力するいくつかのフィールドが含まれているでしょう。
サイトのログインページは、ウェブサイトのユーザーがサイトにアクセスするために資格情報を入力する場所です。これらの訪問者は、サイトにアカウントを持っているか、ウェブサイトにログインする必要があるその他の理由がある場合があります。
ウェブサイトのユーザーにサイトへのアクセス方法を通知またはガイドするために、ログインページに何らかのテキストを含めたいと思うでしょう。また、ロゴやイラストなどの画像を追加したり、不要なスパムがログインページを詰まらせないように、追加のセキュリティ機能を選択したりすることもできます。
ログインページの7つの例
この記事の内容
1. シンプルなログインフォーム
このHubSpotウェブサイトのログインページは非常に基本的で、フォームに含まれる詳細はあまりありません。フォームは、メール入力、パスワード、チェックボックス、ログインボタンで構成されています。
このようなフォームの点は、他のすべてのログインフォームの例の基盤のようなものであるということです。ログインページに必要な最も基本的な要素が含まれています。
また、お好みで、独自のログインページもこのように簡略化できます。WPFormsはWordPress向けの最高のフォームビルダープラグインであり、ウェブサイトにカスタムログインページを追加することを非常に簡単にします。
まず、WPFormsをインストールし、User RegistrationアドオンにアクセスするためにPro Planにサインアップする必要があります。
WPFormsの設定にライセンスキーを入力したら、ダッシュボードのWPForms » Addonsに移動します。利用可能なアドオンをスクロールしてUser Registrationアドオンを見つけ、それをインストールします。インストールしたら、アドオンをアクティブ化することも忘れないでください。
これでログインフォームを作成する準備ができました。WPForms » Add Newに移動し、利用可能なアドオンテンプレートからUser Login Formテンプレートを見つけます。Use Templateボタンをクリックしてこのテンプレートを選択し、フォームビルダーを開きます。
WPFormsのフォームビルダーを使用すると、この既製のテンプレートをニーズに合わせて簡単に編集できます。オンラインフォームに必要なほぼすべての要素を網羅する、豊富なフォームフィールドのセレクションが見つかります。必要なのは、各フィールドを所定の位置にドラッグアンドドロップするだけです。
User Login Formには、必要なフィールドがすでに読み込まれていることがわかります。
しかし、すべてのWPFormsテンプレートと同様に、このフォームも高度にカスタマイズ可能であるため、さまざまな方法でフォームにフィールドを追加および編集できます。
このフォームでは、フォームの下部にある送信ボタンを編集して、HubSpotログインページの例のように「ログイン」と表示させましょう。
ボタンをクリックするだけで、設定を展開できます。
次に、ボタンのテキストを変更するには、一般タブを開き、送信ボタンのテキストボックスまでスクロールします。
次に、「ログイン」など、ボタンに表示させたいテキストを入力します。
フォームを再度見ると、フォームの下部にあるボタンが、このページのログインの性質により適合しています。
これで、HubSpotログインページで使用されているような基本的なログインフォームを作成するために必要なすべてが完了しました。
ここから、このフォームを保存してください。
保存されると、このフォームはWordPressダッシュボードのWPFormsすべてのフォームページで使用できるようになります。
これで、サイトにすばやく公開できるシンプルなログインフォームができました。または、より詳細なログインページを作成するための基本として使用することもできます。これらは、ここで取り上げたいくつかのログインページ例すべてに必要とされる基本的な手順です。
2. 指示テキスト付きログインフォーム
WordPress.orgのログインページをご覧ください。最初に説明した例と同様に、これもかなり基本的です。
しかし、上部には簡単な説明テキストがあり、あなたのフォームにもそれを含めることができます。
述べたように、ここで行う各フォームは、このフォームも含め、最初にユーザーログインフォームテンプレートを必要とします。再度テンプレートを選択してください。
次に、フォームビルダーで、コンテンツフィールドをフォームの上部にドラッグしてドロップします。
前述のように、このフィールドはフォームの好きな場所にドラッグアンドドロップできます。
しかし、上記のログインページの指示テキストに似せるために、フィールドを一番上に配置しましょう。
フィールドをクリックして、画面左側にあるカスタマイズ可能なオプションを開きます。次に、テキストエディターを使用して、このフィールドに表示したい指示テキストを入力します。
上記の例のように、ユーザーがウェブサイトにログインするために情報を入力するように指示することができます。
テキストエディターのおかげで、カスタマイズ可能なフォントスタイル、色などがこのフィールドで利用可能になり、多くのオプションが指先で利用できます。
たとえば、例1のHubSpotログインページを再度見てください。非常に短い指示テキストがあることに注意してください。指示テキストは「アカウントをお持ちでない場合は、サインアップしてください」と表示され、ユーザーがアカウントを作成できるページへのリンクが提供されています。
これは、フォームのコンテンツフィールドのテキストエディターでも可能です。
まず、指示テキストを入力し、リンクしたい部分をハイライトします。次に、テキストエディターツールバーのリンクアイコンをクリックします。
次に、ユーザーに着陸させたいページへのURLを挿入します。完了したらOKをクリックします。
これで完了です！フォームに指示テキストとリンクが表示されました。
いつものように、フォームは後で保存するか、ページに埋め込むことができます。ログインページをサイトで公開する準備ができた際には、公開方法の詳細をこの投稿の最後に共有します。
3. ヘッダー画像付きログインフォーム
ログインページでユーザーログインフォームをカスタマイズするもう1つの方法は、好みのヘッダー画像を追加することです。フォームの上部に画像を使用することは、フォームをパーソナライズしたり、ウェブサイトのスタイルを引き立てたりするのに良い方法です。
ヘッダー画像を追加するには、再度コンテンツフィールドとユーザーログインフォームテンプレートを使用します。以前のように、このフィールドをフォームの上部にドラッグアンドドロップしてください。
ただし、今回はテキストエディタの上にあるメディアを追加ボタンをクリックします。
次に、好みの画像をアップロードします。これはテキストエディタ内のテキストの上に表示されます。
今回は、必要であればテキストを削除して、画像のみを使用することもできます。
画像をクリックして表示設定にアクセスし、画像を好みの位置に配置してください。
例の画像が実際のヘッダー画像として機能するように、配置を中央揃えにし、フルサイズを選択します。好みに合わせてこれらの設定を何度か調整してください。
変更を適用するには、青い更新ボタンをクリックしてください。
その他の設定タブを探索して、高度な設定タブのフィールドサイズの変更などのオプションを確認することもできます。
大フィールドサイズを試して、実際のヘッダー画像のように、フォームの上部に画像がさらに大きく表示されるのを確認してください。
再度、フォームは後で保存してください。この例に関連するヒントについては、フォームにヘッダー画像を追加するに関するこの投稿全体を確認してください。
4. 会社ロゴ付きログインフォーム
SendLayerのログインページを見てみましょう。以前説明した指示テキストの上、フォームの上部には、ウェブサイトのロゴが配置されています。
ユーザーログインフォームのコンテンツフィールドを再度使用して、あなたもフォームにロゴを追加できます。
ヘッダー画像をアップロードするためにコンテンツフィールドを使用したことを覚えていますか？ロゴを表示するために同様のプロセスを使用してみてはどうでしょうか？フォームビルダーのおかげで、フォームにロゴを配置するための複数のオプションがあります。
コンテンツフィールドをフォームの目的の位置にドラッグするだけです。
上記の例に似せるために、ロゴをフォームの上部に配置しましょう。これはヘッダー画像のようなものなので、横長のロゴがここに最適かもしれません。
ロゴをアップロードするには、コンテンツフィールドのメディアを追加ボタンをクリックするだけです。
追加の設定もお忘れなく。ロゴを中央揃えにしたり、フルサイズにしたり、高度な設定でフィールドサイズを変更したりしたい場合があります。
指示テキストの例で説明したように、ロゴの下のテキストを編集することもできます。これにより、ここのフォームが例と非常によく似たものになります。
これで、ログインページにロゴがフォームに明確に表示されました。必要に応じて、下部、またはコンテンツフィールドをドラッグしたい他の場所に別のロゴを追加することもできます！
5. イラスト付きログインフォーム
次に、TrustPulseのログインページに注目しましょう。このログインフォームは、画面の片側に認証情報が入力され、その上に小さなロゴが表示され、反対側には大きなイラストが表示されています。
あなたもレイアウトフィールドとコンテンツフィールドを組み合わせて、このようなフォームを作成できます。
まず、レイアウトフィールドをユーザーログインフォームにドラッグします。
レイアウトフィールド自体にフォームの事前読み込み済みフィールドをドラッグすることになるため、現時点ではレイアウトフィールドをどこにドラッグアンドドロップしても、それほど重要ではありません。
とりあえず、整理のためにフォームの上部にドラッグしておきましょう。レイアウト内の列の向きも選択します。これにより、このフィールド内のコンテンツのサイズと配置が決まります。
次に、TrustPulseの例のようにここにロゴを表示できるように、フォームのレイアウトフィールドの最初の列にコンテンツフィールドをドラッグします。
メディアの追加ボタンを使用して、もう一度ロゴをアップロードし、画像の向きとサイズが希望通りになるように設定を確認してください。
次に、フォームの他のフィールドをレイアウトフィールドのその側にドラッグアンドドロップします。
マウスで各フィールドをつかみ、レイアウト列にドラッグしてドロップするだけです。メールフィールド、パスワードフィールド、チェックボックスがフォームの左側の列に配置されます。
次に、レイアウトフィールドのもう一方の列にコンテンツを追加します。
コンテンツフィールドを再度選択し、フォームの右側にあるより大きな列にドラッグします。
これで、この側のフォームに大きく表示されるイラストを追加できます。
反対側で行ったようにメディアの追加ボタンをクリックして、イラストをアップロードします。
そして、もう一度、フィールドの設定を調整して、イラストのサイズと配置をカスタマイズしてください。
例のような大きなイラストの場合は、コンテンツフィールドから追加のテキストを削除したい場合があります。
これで、フォームの片側には小さなロゴと認証情報入力欄、反対側には大きなイラストが表示されます。
いつものように、このフォームをダッシュボードのWPFormsに保存し、使用する準備ができたらWordPressページに埋め込む必要があります。
6. CTA付きログインフォーム
次に、ExactMetricsのログインページを見てみましょう。これは前のログインと似ていますが、フォームの片側にイラストの代わりにコールトゥアクションボタンがあります。
片側には小さなロゴ、メール入力欄、パスワード入力欄、ログインボタンがあり、もう片側にはかなりの量のテキストがあり、その後にクリック可能なCTAがあります。
独自のフォームで同様の外観を作成するには、前の例で説明した手順に従うだけです。まず、レイアウトフィールドをユーザーログインフォームに追加し、フィールドをレイアウトの片側または列にドラッグします。
ロゴをアップロードするためにコンテンツフィールドをレイアウトにドラッグし、次にフォームの残りのフィールドもその側のレイアウトにドラッグすることを忘れないでください。
しかし、レイアウトフィールドのもう一方の側、2列目については、何もアップロードする必要はありません。ここにあるテキストを編集するだけです。
プリロードされたテキストの一部が、その下にあるテキストよりも大きく太字になっていることに注意してください。これは、例のテキストスタイルに似ています。
これにより、テキストを例のように簡単に作成できますが、テキストエディタを有利に活用できる他のすべての方法を忘れないでください。テキストのサイズ、向き、色などを必要に応じて変更できます。
そして、コンテンツフィールドのテキストエディタ内で、コードスニペットを挿入してCTAボタンを作成することもできます。
ボタンを作成するために使用したいコードをコピーして貼り付けるには、テキストエディタボックスの「テキスト」タブをクリックします。
CTAボタンの外観を好きなようにスタイル設定するために、コードスニペットを編集できます。
これで、フォームにCTAボタンができました！
もう一度、このフォームを保存し、使用する準備ができたらWordPressページに埋め込む必要があります。
7. reCAPTCHA付きログインフォーム
ログインフォームのスタイル設定に関するより複雑な方法をすべて見てきましたので、次に、フォームのどこにでも簡単に追加できるセキュリティ要素の1つを見てみましょう。
reCAPTCHA検証は、WordPressウェブサイトを、フォームを使用してサイトに侵入しようとするボットやスパムから保護するのに役立ちます。
ご覧のとおり、WPFormsのログインページでこれを使用しています。
あなたのログインフォームにもreCAPTCHAフィールドを簡単に追加できます。ただし、まずWPFormsの設定で設定する必要があります。
WordPressダッシュボードから、「WPForms」→「設定」に移動します。次に、「CAPTCHA」画面が表示されていることを確認します。
画面の中央から「reCAPTCHA」オプションを選択します。
次に、使用したいreCAPTCHA検証の種類を選択します。
「チェックボックスreCAPTCHA v2」を選択しましょう。
次に、Googleから提供された「サイトキー」と「シークレットキー」をこの設定ページに入力する必要があります。これらのキーを受け取るには、GoogleのreCAPTCHA管理コンソールでセットアッププロセスに従う必要があります。
詳細情報と完全なチュートリアルについては、WordPressフォームでのreCAPTCHAの設定と使用に関する記事をご覧ください。
これらの設定をreCAPTCHAフィールドに適用するために、画面下部にある「保存」をクリックすることを忘れないでください。
これで、reCAPTCHA検証をフォームに追加する準備ができました。
フォーム作成ページに戻り、「reCAPTCHA」フィールドをクリックするだけで、ユーザーログインフォームで有効になります。
これで完了です！あなたのログインフォームは、そうでなければあなたのサイトに侵入する可能性のあるボットやスパムから保護されています。
さらに、フォームにreCAPTCHAアイコンが表示され、ユーザーに情報が安全であることを伝えます。
WordPressにカスタムログインページを追加する方法
WPFormsのフォームビルダーの便利な点は、これらの例に着想を得たカスタマイズ可能なオプションとスタイリングの選択肢をすべて、フォーム自体で作成できることです。
ただし、これらの例で達成されたスタイルの一部は、ログインページでの追加の編集の結果である可能性があります。
したがって、WPFormsを使用してWordPressページでさらに多くのスタイリングを実現する方法についての詳細なヒントについては、CSSでフォームをスタイリングする方法に関するこの記事をご覧ください。
また、ここで取り上げたすべての作成済みフォームと例について、編集が終了したらフォームを保存する必要があることに注意してください。その後、必要に応じて後で、フォームをページに埋め込み、準備ができたら公開できます。
または、フォームビルダーから、今すぐフォームをページに埋め込むことができます。
埋め込むをクリックすると、すでに作成したウェブサイトのページにログインフォームを埋め込むか、このログインフォーム用の新しいページを今すぐ作成できます。
新しいページを作成することにした場合は、WordPressダッシュボードで簡単に見つけられるように、ウェブサイトの他のページの名前と同じようにページに名前を付ける必要があります。
続行するには 開始する！をクリックしてください。WPFormsは自動的にログインフォームを新しいページに追加します。
フォームが埋め込まれた後、WPFormsブロックの設定にアクセスしたり、ページの他のスタイリング要素を編集したりすることで、WordPressページ自体でさらにいくつかのことを編集できます。
WordPressログインページを編集およびカスタマイズする方法に関するその他のアイデアについては、この記事をご覧ください。
そして、すべてのWordPressページと同様に、埋め込まれたフォームを含むページを公開してウェブサイトでライブにする必要があることを忘れないでください。
公開前にページをプレビューすることも、後で下書きとして保存することもできます。
このトピックについてさらに詳しく知りたい場合は、ログインフォームと登録フォームの表示方法をカバーするこのチュートリアルをご覧ください。
次に、PayPalで登録フォームを作成します
WordPressウェブサイト用のログインフォームの作成方法をすべて学んだので、次はPayPalでWordPress登録フォームを作成することに挑戦してみてはいかがでしょうか？そうすれば、ウェブサイトのユーザーを登録し、支払いを受け取ることができます。
フォームエントリの印刷が必要な場合は、WordPressフォームをPDFに印刷する方法に関するガイドを確認することをお勧めします。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
