Webflow Designerでページアイコンをクリックすると、5つのタイプのページが表示されます。これらは静的ページ、ユーティリティページ(404エラーページやパスワードページのような)、CMSコレクションページ、およびEcommerceページです。ユーザーアカウントをサイトに追加したら、ユーザーページセクションが表示されます。
このレッスンでは、以下の内容をカバーします:
ユーザーページにアクセスして、ユーザーが表示するページを編集およびスタイル設定します。
Webflow Designerでページアイコンをクリックすると、5つのタイプのページが表示されます。これらは静的ページ、ユーティリティページ(404エラーページやパスワードページのような)、CMSコレクションページ、およびEcommerceページです。ユーザーアカウントをサイトに追加したら、ユーザーページセクションが表示されます。
このレッスンでは、以下の内容をカバーします:
ユーザーページにアクセスするには、まずサイトでユーザーアカウントが有効になっていることを確認してください。次に、ページアイコンをクリックしてページパネルを開きます。ユーザーページはUser pagesセクションの下に表示されます。
Log inページは、ユーザーが既存のアカウントにログインしたり、アカウントを持っていない場合は新しいアカウントにサインアップするためのフォームです。
Log in formには見出し、メールフィールド、パスワードフィールド、"ログイン"ボタン、"アカウントをお持ちでないですか?"スパン、サインアップリンクが含まれています。ログインフォームの要素のテキストやスタイリングを編集できます。
注意: ログインフォームからユーザーのメールフィールド、ユーザーパスワードフィールド、または"ログイン"ボタンを削除することはできません。
ログインフォームブロックには2つの状態があります: normal と error。
どちらの状態でも、ログインフォームを編集して、各状態がサイト訪問者にどのように表示されるかを変更できます。これらの状態にアクセスするには:
normalの状態は、フォームが正常に送信された場合に発生します。正常に送信された後、ユーザーはredirect fallbackドロップダウンで指定されたページに移動します。
注意: サイト訪問者がログアウト状態で制限コンテンツにアクセスしようとした場合、自動的にログインページにリダイレクトされます。正常にログインすると、指定されたredirect fallbackページにリダイレクトされる代わりに、以前アクセスしようとしていた制限コンテンツページに送信されます。
リダイレクトフォールバック(redirect fallback )ページを変更するには:
エラー の状態は、フォームが正常に送信されなかった場合に発生します。エラーステートディブロックがログインフォームブロックの下にエラーメッセージを含めて表示されます。エラーステートディブロックのデフォルトのスタイリングを変更したり、デフォルトのエラーメッセージテキストを編集したりできます。
ログインページには2つのエラーメッセージが表示される可能性があります: general error と wrong email or password
error messageのデフォルトテキストを編集するには:
Sign upページは、ユーザーが新しいアカウントにサインアップするか(既にアカウントを持っていない場合)、または既存のアカウントにログインするためのフォームです。
Sign up form には見出し、メールフィールド、名前フィールド、パスワードフィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックス、サインアップボタン、"すでにアカウントをお持ちですか?"リンク、およびログインリンクが含まれています。サインアップフォームの要素のテキストやスタイリングを編集できます。
注意: ユーザーのメールフィールド、ユーザーパスワードフィールド、またはサインアップボタンをサインアップフォームから削除することはできません。ただし、名前フィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックスは、Element settings panel.から削除する必要があります。
これらのフィールドを削除するには:
また、これらのフィールドをフォームに戻すこともできます。
User account settingsでカスタムフィールドを追加した場合、それをSign up form追加することもできます。カスタムフィールドを使用すると、共通のフィールドから収集されていないユーザーからの追加情報を収集できます。
カスタムフィールドを追加するには:
カスタムフィールドに最小文字数または最大文字数を追加した場合(ユーザーアカウント設定を介して)、サインアップフォームにそれらの制限についてのメモを作成して、ユーザーが何を期待し、有効な情報を送信するかを知らせることができるかもしれません。
重要: カスタムフィールドをUser account settingsページでrequiredとして設定した場合、それをSign up formに追加する必要があります。必須フィールドをSign up formに追加しないと、ユーザーがサインアップしようとしたときにエラーが発生します。カスタムフィールドが必須かどうかを変更するには、ユーザーアカウント設定に移動します。
サインアップフォームブロックには2つのステータスがあります: default と verification。
これらのステータスにアクセスするには:
デフォルト ステータスでは、サイトの訪問者がアカウントを作成できるサインアップフォームが表示されます。
デフォルト ステータスには3つの異なる状態があります: default、success、および error。
default 状態は、サイトの訪問者がサインアップページを初めて開いたときに表示されます。この状態では空のフォームが表示されます。サインアップフォーム内の要素のテキストやスタイリングを編集できます。
ユーザーのメールフィールド、ユーザーパスワードフィールド、またはサインアップボタンをサインアップフォームから削除することはできないことに注意してください。ただし、名前フィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックスは、Element settings panelから削除する必要があります。
success 状態は、サイトの訪問者のメールが確認され、アカウントが正常に作成された後に表示されます。これには画像、見出し(例: "アカウントが有効化されました")、段落、およびログインページに移動するように促すコールトゥアクションボタンが表示されます。このページのすべての要素を編集できます。
サインアップフォームの送信に問題がある場合、サインアップフォームの下にエラー状態のディブロックが表示されます。エラー状態のディブロックのデフォルトのスタイリングを変更できます。
サインアップフォームページには6つのエラーメッセージが表示される可能性があります: 一般エラー、許可されていないメール、無効なメール、既存のメール、招待メールを使用する必要がある、および 無効なパスワード。
これらのサインアップエラーメッセージのテキストを編集するには:
Verification status は、フォームが送信された後に表示されるメッセージを示し、ユーザーに対してアカウントを確認するためにメールをチェックするよう指示します。
注意: サイト訪問者は、アカウントが正常に作成されるためにはメールアドレスを確認する必要があります。
Verification status には、2つの可能なステートがあります: normal と error。
normalステートには、ユーザーに対してメールで確認リンクをチェックするように指示する画像、見出し、および段落が含まれます。これらの要素のいずれも編集できます。
errorステートは、アカウントの確認にエラーが発生した場合に表示されます。これは、元の確認メッセージの下に確認ページにdivブロックとメッセージとして表示されます。このdivブロックにはデフォルトのスタイルが適用されており、いつでも変更できます。
確認ステータスページには、2つのエラーメッセージが表示される可能性があります: verification failed と verification expired。
これらの確認エラーメッセージのテキストを編集するには:
Reset passwordページは、ユーザーがアカウントにログインできない場合にパスワードをリセットできるフォームです。
Reset password form には、見出し、ユーザーのメールフィールド、および「パスワードをリセット」ボタンが含まれています。フォーム内のすべての要素にスタイルを適用できます。
パスワードリセットフォームブロックには、3つのステータスがあります: normal、success、およびerror。これらのステータスにアクセスするには:
normal ステータスは、ユーザーが初めてパスワードリセットページを訪れたときに表示されます。これにより、サイト訪問者はメールアドレスを送信してパスワードをリセットできます。
success ステータスは、ユーザーがパスワードリセットフォームに有効なメールアドレスを送信した場合に表示されます。これには、画像、見出し、および段落テキストが含まれ、そのメールアドレスに関連付けられているアカウントがある場合、ユーザーにそれを知らせます。成功 ステータス内の要素はすべて編集またはスタイルを適用できます。
error ステータスは、サイト訪問者が無効なメールアドレスを送信した場合に表示されます。元のパスワードリセットフォームの下にエラーメッセージが含まれたdivブロックが表示されます。
エラーメッセージのテキストを編集するには:
Update passwordページを使用すると、ユーザーはパスワードを更新できます。ユーザーは、パスワードリセットフォームを送信した後に受け取るReset password email内の「Reset password」ボタンをクリックしてこのページにアクセスできます。
Update password formには、見出し、説明段落、新しいパスワードフィールド、および「Update password」ボタンが含まれています。フォーム内のすべての要素にスタイルを適用できます。
注意: ユーザーパスワードフィールドと「Update password」ボタンはフォームから削除できません。
パスワード更新フォームブロックには、3つのステータスがあります: normal、success、およびerror。
これらのステータスにアクセスするには:
normal ステータスは、ユーザーが初めてパスワード更新ページを訪れたときに表示されます。これにより、ユーザーは少なくとも8文字の新しいパスワードを送信できます。
The successステータスは、ユーザーが新しい有効なパスワードを送信した場合に表示されます。これには、画像、「パスワードが更新されました」という見出し、ユーザーにパスワードが正常に更新されたことを伝える段落テキスト、およびホームページに移動するための呼びかけボタンが含まれています。ユーザーがホームページに移動するためのリンクをクリックすると、自動的にログインされます。success ステータス内の要素はすべて編集またはスタイルを適用できます。
errorステータスは、ユーザーが無効なパスワードを送信した場合、またはフォームを送信すると一般的なエラーが発生した場合に表示されます。元のパスワード更新フォームの下にエラーメッセージが含まれたdivブロックが表示されます。divブロックとエラーメッセージは編集またはスタイルを適用できます。
パスワード更新ページに表示されるエラーメッセージは3つあります: general error、weak password、およびrepeat password used。
デフォルトのエラーメッセージテキストはいつでも編集できます:
Access denied ページは、ユーザーに、その時点ではアクセス権がないページをアクセスしようとしたことを知らせるページです。ユーザーは、以下の2つの要件が両方満たされた場合にのみ、そのページにアクセスできます。
フォームヘッダーには「鍵」の画像と「Access denied」という見出しが含まれています。フォームヘッダーの下にある段落では、リクエストされたページを表示するにはサイトのメンバーシップが必要であることを説明し、2つのリンクが含まれており、それはサインアップ ページとログイン ページを指しています。アクセス拒否ページのすべての要素にスタイルを適用できます。
User account ページは、ユーザー(確認済みまたは未確認のユーザー)が、自分のアカウント情報を確認できる場所で、その情報にはメール、名前、マーケティングメールの受信に関する同意などが含まれます。このページは、ユーザーがサイトでアカウントを作成した際に提供したデータで事前に入力されます。また、サインアップページのサインアップフォームにカスタムフィールドを追加した場合、これらのフィールドをここに追加できます。ユーザーがサインアップページで提供したカスタムフィールドの回答が、サインアップフォームに追加されている場合、それらのカスタムフィールドも自動的に入力されます。さらに、サイトでEコマース を有効にしている場合、ユーザーがサイトのサブスクリプションを管理できるようにするために、ユーザーアカウントページにサブスクリプション要素 を追加することもできます。
このページは、見出し(「マイアカウント」)とUser account formから構成されており、ユーザーのメールアドレスフィールドと名前テキストフィールドが含まれています。フォームフィールドの下には「パスワード設定」という見出しがあり、その下に「パスワードをリセット」へのリンクがあり、また「マーケティングメールを受信するための同意」のチェックボックス、保存ボタン、キャンセルボタンもあります。また、Sign up ページのサインアップフォームに追加したカスタムフィールド、またはUser accounページでのみ表示したいカスタムフィールドを追加することもできます。カスタムフィールドがサインアップページのサインアップフォームに追加されている場合、ユーザーがサインアップフォームに提供した回答が、サイトのアカウントを作成した際に自動的に入力されます。さらに、サイトでEコマース を有効にしている場合、ユーザーアカウントページにサブスクリプション要素を追加することで、ユーザーがサイトのサブスクリプションを管理できるようにすることができます。
フォームとユーザーアカウントページのすべての要素にスタイルを設定できます。
共通フィールド を追加するには:
カスタムフィールド を追加するには:
フィールドを削除するには:
注:「プライバシーポリシーと利用規約に同意する」チェックボックスは、ユーザーアカウントページのオプションとして表示されません。これは、ユーザーがウェブサイトのプライバシーポリシーや利用規約を承認しないようにするためです。
エラーメッセージを編集するには:
normal 状態は、ユーザーが初めてユーザーアカウントページを訪れたときに表示されます。これにより、ユーザーはフォーム内の個人情報を確認し、マーケティングメールを受信するための同意チェックボックスの選択/選択解除、および行った変更の保存ができます。
success 状態は、フォームが送信され、ユーザーアカウントが正常に更新された後に表示されます。ユーザーアカウントフォームの下に、次のように表示される段落があります。「アカウントは正常に更新されました。(Your account was updated successfully)」 このメッセージは編集またはスタイル設定できます。
error 状態は、フォームが正常に送信されなかった場合に表示されます。ユーザーアカウントフォームの下に、一般的なエラーメッセージが含まれた div ブロックが表示され、次のように表示されます。「アカウントの更新中にエラーが発生しました。もう一度試してみるか、問題が解決しない場合はお問い合わせください。(There was an error updating your account. Please try again, or contact us if you continue to have problems)」
エラーメッセージを編集するには
サブスクリプション要素
事前に用意された サブスクリプション 要素を ユーザーアカウント ページに追加することで、ユーザーはユーザーアカウントから直接サイトのサブスクリプションを管理できます。
Subscriptions 要素を追加するには:
サブスクリプション 要素には、プレースホルダーの画像とサブスクリプションの詳細が含まれており、サブスクリプションの名前と価格、購入日、次回請求日(または次回キャンセル日)などが表示されます。また、ユーザーはユーザーアカウント ページから直接サブスクリプションをキャンセルできる "キャンセル" ボタンも含まれています。
ユーザーページからフォームを削除して再追加したい場合、フォームを元の状態からスタイル設定したい場合、該当のユーザーページにフォームをAdd panelから追加することができます(例:ログインページにログインフォームを追加できます)。これは、ページのフォームを元の状態からスタイル設定したい場合に便利です。
ログインフォームエレメントは、ログインユーザページの追加パネルから追加することができます。他のユーザページのフォームは、各ユーザページの追加パネルの同じ場所にあります。
デフォルトでは、チェックボックス はサインアップ ページとユーザーアカウント ページに表示されます。サインアップ ページには2つのチェックボックスが付属しており、それは「プライバシーポリシーと利用規約に同意する」チェックボックスと「通信を許可する」チェックボックスです。ユーザーアカウント ページには、マーケティングメールを受け取るための1つのチェックボックスが付属しています。
これらのチェックボックスのスタイルやカスタマイズを行うことができます。
チェックボックスの設定では、チェックボックスの名前を変更することができます。また、チェックボックスのスタイルをデフォルトとカスタムの間で切り替えることができます。カスタムを選択すると、スタイルパネルを使用してチェックボックスのスタイルを設定できます。
サインアップページまたはユーザーアカウントページでフォームの送信時にチェックボックスを必須にするには:
また、フォームの送信時にチェックボックスを必須にしない場合は、「必須」チェックボックスのチェックを外すこともできます。
サインアップページまたはユーザーアカウントページの読み込み時にチェックボックスをデフォルトでチェックされた状態にするには:
また、ページの読み込み時にチェックボックスをデフォルトでチェックされない状態にする場合は、Start checkedのチェックボックスを外すこともできます。
デフォルトでは、テキストフィールドはアクセス拒否 ページを除くすべてのユーザーページに含まれています。
プレースホルダーテキストをテキストフィールド(通常のテキスト、パスワード、およびカスタムフィールドなど)に追加できます。プレースホルダーテキストは、テキストフィールドの本文に薄いテキストとして表示され、フィールドの目的に関する文脈を追加するために通常使用されます(フィールドラベル自体と一緒に)。プレースホルダーテキストは、サイト訪問者がフィールドに入力し始めると消えます。
プレースホルダーテキストを追加するには:
自動フォーカスを非パスワードテキストフィールド(通常のフィールドとカスタムフィールドなど)に追加できます。フィールドにautofocusのチェックが付いている場合、サイト訪問者のカーソルはページが読み込まれるときにテキストフィールド内に置かれます。通常、自動フォーカスはフォーム内の最初のテキストフィールドに設定されます。
フィールドに自動フォーカスを追加するには:
もしフォーム内の2つ以上のフィールドに誤って自動フォーカスを追加した場合、自動フォーカスはページナビゲーション内の最初のフィールドに設定されます。
また、フォーム送信に問題が発生する可能性があるため、隠れたフォームフィールドには自動フォーカスチェックボックスがチェックされていないことを確認するのがベストプラクティスです。フォーム内での自動フォーカスの詳細を学ぶ。
ユーザーページの送信ボタンのデフォルトテキストと待機テキストをカスタマイズできます。デフォルトテキストはページが読み込まれたときに表示されます。待機テキストはフォームが送信中に表示され、通常は「お待ちください...」などと表示されます。
送信ボタンのデフォルトテキストを編集するには:
送信ボタンの待機テキストを編集するには:
ユーザーアカウントページのキャンセルボタンのデフォルトテキストをカスタマイズできます。デフォルトテキストはページが読み込まれたときに表示されます。
キャンセルボタンのデフォルトテキストを編集するには:
リンク設定とリンクをクリックしたときにユーザーをどこに送信するかを変更できます。デフォルトでは、リセットパスワードページとパスワードの更新ページを除くすべてのユーザーページにリンクが含まれています。
リンク設定にアクセスするには:
User account settingsタブを使用すると、ユーザーアカウント(基本情報とカスタムフィールド)で利用可能なユーザーデータフィールドを確認できます。また、 User account settings内でフォームプレビューを表示することもでき、ユーザーが情報を入力する際にフォームフィールドがどのように表示されるかを確認できます。
ユーザーアカウント設定にアクセスするには:
ユーザーページのフォームには2種類の入力フィールドがあります:共通フィールドとカスタムフィールド。共通フィールドには通常、サインアップフォームに含まれるフィールドが含まれます。例えば、メールアドレスフィールド、名前フィールド、パスワードフィールドなどです。カスタムフィールドを作成して、サイトに関連する追加情報を収集することができます(例:キャリアネットワーキングサイトの「業界」フィールドなど)。
カスタムフィールドは、サインアップページのサインアップフォームとユーザーアカウントページのユーザーアカウントフォームに追加できます。サイトごとに最大20個のカスタムフィールドを追加でき、これによりユーザーから追加情報を収集することができます。このデータは、サイトオーナーがユーザーアカウントから、ユーザーがユーザーアカウントページからアクセスできます。
カスタムフィールドを追加するには:
カスタムフィールドは、ユーザーアカウント設定で追加した後にサインアップページとユーザーアカウントページに追加する必要があることに注意してください。これらはデフォルトのフォームに自動的に表示されません。
カスタムフィールドを更新するには:
カスタムフィールドを削除するには:
ユーザーページがサイトに追加されると、各ページにはプリセットのスラッグがあります:
ログインページ:/log-in
サインアップページ:/sign-up
パスワードリセットページ:/reset-password
パスワード更新ページ:/update-password
アクセス拒否ページ:/access-denied
ユーザーアカウントページ:/user-account
これらのユーザーページのスラッグは編集できません。さらに、将来的にサイトからユーザーアカウントを削除することを決定した場合、これらの予約済みのスラッグを新しいページに使用することはできません。
サイト内検索結果からユーザーページを除外して、ユーザーがサイトを検索する際にこのページを見つけられないようにすることができます。
ページを除外するには:
ユーザーページの検索エンジンインデックスを無効にして、検索エンジンがこれらのサイトページをインデックス化せず、検索結果にリストしないようにすることができます。
ユーザーページの検索エンジンインデックスを無効にするには、サイトにrobots.txtルールを追加します。既にユーザーページが検索エンジンにインデックス化されている場合、noindexメタコードを使用してそのコンテンツを検索エンジンのインデックスから削除することもできます。