料金プランを有効化して学習を始めましょう。

ユーザーページの概要

ユーザーページにアクセスして、ユーザーが表示するページを編集およびスタイル設定します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

Webflow Designerでページアイコンをクリックすると、5つのタイプのページが表示されます。これらは静的ページ、ユーティリティページ（404エラーページやパスワードページのような）、CMSコレクションページ、およびEcommerceページです。ユーザーアカウントをサイトに追加したら、ユーザーページセクションが表示されます。

このレッスンでは、以下の内容をカバーします：

ユーザーページにアクセスする方法

ユーザーページにアクセスするには、まずサイトでユーザーアカウントが有効になっていることを確認してください。次に、ページアイコンをクリックしてページパネルを開きます。ユーザーページはUser pagesセクションの下に表示されます。

ログインページ

Log inページは、ユーザーが既存のアカウントにログインしたり、アカウントを持っていない場合は新しいアカウントにサインアップするためのフォームです。

Log in formには見出し、メールフィールド、パスワードフィールド、"ログイン"ボタン、"アカウントをお持ちでないですか？"スパン、サインアップリンクが含まれています。ログインフォームの要素のテキストやスタイリングを編集できます。

注意: ログインフォームからユーザーのメールフィールド、ユーザーパスワードフィールド、または"ログイン"ボタンを削除することはできません。

ログインフォームブロックの状態

ログインフォームブロックには2つの状態があります: normal と error。

どちらの状態でも、ログインフォームを編集して、各状態がサイト訪問者にどのように表示されるかを変更できます。これらの状態にアクセスするには:

  1. WebflowキャンバスまたはナビゲーターパネルでLog in form blockを選択します。
  2. Element settings panel > Log in form block settingsに移動します。
  3. アクセスしたい state (normal か error)を選択します。

normalの状態は、フォームが正常に送信された場合に発生します。正常に送信された後、ユーザーはredirect fallbackドロップダウンで指定されたページに移動します。

注意: サイト訪問者がログアウト状態で制限コンテンツにアクセスしようとした場合、自動的にログインページにリダイレクトされます。正常にログインすると、指定されたredirect fallbackページにリダイレクトされる代わりに、以前アクセスしようとしていた制限コンテンツページに送信されます。

リダイレクトフォールバック（redirect fallback ）ページを変更するには:

  1. キャンバスでLog in form block を選択します。
  2. Element settings panel > Log in form block settingsに移動します。
  3. redirect fallbackドロップダウンからページを選択します。

エラー の状態は、フォームが正常に送信されなかった場合に発生します。エラーステートディブロックがログインフォームブロックの下にエラーメッセージを含めて表示されます。エラーステートディブロックのデフォルトのスタイリングを変更したり、デフォルトのエラーメッセージテキストを編集したりできます。

ログインページには2つのエラーメッセージが表示される可能性があります: general error  と wrong email or password

  • General error – このエラーメッセージはフォームの送信時に一般的なエラーが発生した場合に表示されます。デフォルトのエラーメッセージは次のとおりです: "ログインで問題が発生しています。もう一度お試しください。問題が続く場合はお問い合わせください。”‍
  • Wrong email or password – このエラーメッセージは、サイト訪問者が間違ったメールアドレスまたはパスワードを入力した場合に表示されます。デフォルトのエラーメッセージは次のとおりです: "無効なメールアドレスまたはパスワードです。もう一度お試しください。”

error messageのデフォルトテキストを編集するには:

  1. キャンバスで Log in form blockを選択します。
  2. Element settings panel >  Log in form block settingsに移動します。
  3. error stateを選択します。
  4. キャンバスでError message text blockを選択します。
  5. Element settings panel > Error message settingsに移動します。
  6. 編集したいエラーメッセージに鉛筆 アイコンをクリックします。
  7. Edit text fieldに新しいエラーメッセージを入力します

サインアップページ

Sign upページは、ユーザーが新しいアカウントにサインアップするか（既にアカウントを持っていない場合）、または既存のアカウントにログインするためのフォームです。

Sign up form には見出し、メールフィールド、名前フィールド、パスワードフィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックス、サインアップボタン、"すでにアカウントをお持ちですか？"リンク、およびログインリンクが含まれています。サインアップフォームの要素のテキストやスタイリングを編集できます。

注意: ユーザーのメールフィールド、ユーザーパスワードフィールド、またはサインアップボタンをサインアップフォームから削除することはできません。ただし、名前フィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックスは、Element settings panel.から削除する必要があります。

これらのフィールドを削除するには:

  1. キャンバスでSign up formを選択します。
  2. Element settings panel > Sign up form settingsに移動します。
  3. 削除したいフィールドの右にある "ゴミ箱" アイコンをクリックします。

また、これらのフィールドをフォームに戻すこともできます。

  1. キャンバスでSign up formを選択します。
  2. Element settings panel > Sign up form settingsに移動します。
  3. Common fieldsの右にある "プラス" アイコンをクリックします。
  4. Add input ドロップダウンから復元したいフィールドを選択します。

User account settingsでカスタムフィールドを追加した場合、それをSign up form追加することもできます。カスタムフィールドを使用すると、共通のフィールドから収集されていないユーザーからの追加情報を収集できます。

カスタムフィールドを追加するには:

  1. キャンバスでSign up formを選択します。
  2. Element settings panel > Sign up form settingsに移動します。
  3. Custom fieldsの右にある "プラス" アイコンをクリックします。
  4. Add input ドロップダウンからフィールドを選択します。

カスタムフィールドに最小文字数または最大文字数を追加した場合（ユーザーアカウント設定を介して）、サインアップフォームにそれらの制限についてのメモを作成して、ユーザーが何を期待し、有効な情報を送信するかを知らせることができるかもしれません。

重要: カスタムフィールドをUser account settingsページでrequiredとして設定した場合、それをSign up formに追加する必要があります。必須フィールドをSign up formに追加しないと、ユーザーがサインアップしようとしたときにエラーが発生します。カスタムフィールドが必須かどうかを変更するには、ユーザーアカウント設定に移動します。

サインアップフォームブロックのステータス

サインアップフォームブロックには2つのステータスがあります: default と verification。

これらのステータスにアクセスするには:

  1. キャンバスで Sign up form block を選択します。
  2. Element settings panel > Sign up form block settings に移動します。
  3. Sign up statusに移動し、キャンバス上でそのステータスを表示するために default または verification を選択します。

デフォルト（default）ステータス

デフォルト ステータスでは、サイトの訪問者がアカウントを作成できるサインアップフォームが表示されます。

デフォルト ステータスには3つの異なる状態があります: default、success、および error。

default 状態は、サイトの訪問者がサインアップページを初めて開いたときに表示されます。この状態では空のフォームが表示されます。サインアップフォーム内の要素のテキストやスタイリングを編集できます。

ユーザーのメールフィールド、ユーザーパスワードフィールド、またはサインアップボタンをサインアップフォームから削除することはできないことに注意してください。ただし、名前フィールド、プライバシーポリシーと利用規約を受け入れるためのチェックボックス、通信を受け入れるためのチェックボックスは、Element settings panelから削除する必要があります。

success 状態は、サイトの訪問者のメールが確認され、アカウントが正常に作成された後に表示されます。これには画像、見出し（例: "アカウントが有効化されました"）、段落、およびログインページに移動するように促すコールトゥアクションボタンが表示されます。このページのすべての要素を編集できます。

サインアップフォームの送信に問題がある場合、サインアップフォームの下にエラー状態のディブロックが表示されます。エラー状態のディブロックのデフォルトのスタイリングを変更できます。

サインアップフォームページには6つのエラーメッセージが表示される可能性があります: 一般エラー、許可されていないメール、無効なメール、既存のメール、招待メールを使用する必要がある、および 無効なパスワード。

これらのサインアップエラーメッセージのテキストを編集するには：

  1. キャンバス上で Sign up form blockを選択します。
  2. Element settings panel > Sign up form block settings > State を選択し、error を選択します。
  3. キャンバス上で Error message を選択します。
  4. Element settings panel >  Error message settings に移動します。
  5. 編集したいエラーメッセージの右にある「鉛筆」アイコンを選択します。
  6. Edit textフィールドに新しいエラーメッセージを入力します。

確認ステータス（Verification status）

Verification status は、フォームが送信された後に表示されるメッセージを示し、ユーザーに対してアカウントを確認するためにメールをチェックするよう指示します。

注意: サイト訪問者は、アカウントが正常に作成されるためにはメールアドレスを確認する必要があります。

Verification status には、2つの可能なステートがあります: normal と error。

normalステートには、ユーザーに対してメールで確認リンクをチェックするように指示する画像、見出し、および段落が含まれます。これらの要素のいずれも編集できます。

errorステートは、アカウントの確認にエラーが発生した場合に表示されます。これは、元の確認メッセージの下に確認ページにdivブロックとメッセージとして表示されます。このdivブロックにはデフォルトのスタイルが適用されており、いつでも変更できます。

確認ステータスページには、2つのエラーメッセージが表示される可能性があります: verification failed と verification expired。

  • Verification failed – これは、一般的なエラーが発生し確認が失敗した場合に表示されるエラーメッセージです。デフォルトのエラーメッセージには次のように表示されます: “アカウントの確認ができませんでした。もう一度試してみてください。または問題が続く場合はお問い合わせください
  • Verification expired – これは、サイト訪問者のメールにある確認リンクの有効期限が切れた場合に表示されるエラーメッセージです。確認リンクは24時間有効です。デフォルトのエラーメッセージには次のように表示されます: “この確認リンクは期限切れです。新しい確認リンクがメールに送信されました。もう一度試してみてください。または問題が続く場合はお問い合わせください。

これらの確認エラーメッセージのテキストを編集するには：

  1. キャンバス上で Sign up form block を選択します。
  2. Element settings panel > Sign up form block settings > Sign up statusを選択し、verification を選択します。
  3. State を選択し、error を選択します。
  4. キャンバス上で Error message を選択し、Element settings panel >  Error message settings に移動します。
  5. Error message またはverification expired  のいずれかのエラーメッセージの右側にある「鉛筆」アイコンを選択します。
  6. Edit textフィールドに新しい確認エラーメッセージを入力します。

パスワードリセットページ

注意: パスワードリセットフォームから、ユーザーEメールフィールドと "パスワードリセット "ボタンは削除できません。

Reset passwordページは、ユーザーがアカウントにログインできない場合にパスワードをリセットできるフォームです。

Reset password form には、見出し、ユーザーのメールフィールド、および「パスワードをリセット」ボタンが含まれています。フォーム内のすべての要素にスタイルを適用できます。

注意: ユーザーメールフィールドと「パスワードをリセット」ボタンは、パスワードリセットフォームから削除できません。

パスワードリセットフォームブロックのステータス

パスワードリセットフォームブロックには、3つのステータスがあります: normal、success、およびerror。これらのステータスにアクセスするには：

  1. キャンバス上で Reset password form block を選択します。
  2. Element settings panel > Reset password form block settingsに移動します。
  3. アクセスしたいステータス（例: normal、success、またはerror）を選択します。

normal ステータスは、ユーザーが初めてパスワードリセットページを訪れたときに表示されます。これにより、サイト訪問者はメールアドレスを送信してパスワードをリセットできます。

success ステータスは、ユーザーがパスワードリセットフォームに有効なメールアドレスを送信した場合に表示されます。これには、画像、見出し、および段落テキストが含まれ、そのメールアドレスに関連付けられているアカウントがある場合、ユーザーにそれを知らせます。成功 ステータス内の要素はすべて編集またはスタイルを適用できます。

error ステータスは、サイト訪問者が無効なメールアドレスを送信した場合に表示されます。元のパスワードリセットフォームの下にエラーメッセージが含まれたdivブロックが表示されます。

エラーメッセージのテキストを編集するには：

  1. キャンバス上で Reset password form block を選択します。
  2. Element settings panel > Reset password form block settings > State を選択し、error を選択します。
  3. キャンバス上で  Error messageを選択します。
  4. Element settings panel >  Error message settings に移動します。
  5. エラーメッセージを編集したい場合、右側にある「鉛筆」アイコンを選択します。
  6. Edit text フィールドに新しいエラーメッセージを入力します。

パスワード更新ページ（Update password page）

Update passwordページを使用すると、ユーザーはパスワードを更新できます。ユーザーは、パスワードリセットフォームを送信した後に受け取るReset password email内の「Reset password」ボタンをクリックしてこのページにアクセスできます。

Update password formには、見出し、説明段落、新しいパスワードフィールド、および「Update password」ボタンが含まれています。フォーム内のすべての要素にスタイルを適用できます。

注意: ユーザーパスワードフィールドと「Update password」ボタンはフォームから削除できません。

パスワード更新フォームブロックのステータス

パスワード更新フォームブロックには、3つのステータスがあります: normal、success、およびerror。

これらのステータスにアクセスするには：

  1. キャンバス上で Update password form block を選択します。
  2. Element settings panel > Update password form block settings に移動します。
  3. アクセスしたいステータス（例: normal、success、またはerror）を選択します。

normal ステータスは、ユーザーが初めてパスワード更新ページを訪れたときに表示されます。これにより、ユーザーは少なくとも8文字の新しいパスワードを送信できます。

The successステータスは、ユーザーが新しい有効なパスワードを送信した場合に表示されます。これには、画像、「パスワードが更新されました」という見出し、ユーザーにパスワードが正常に更新されたことを伝える段落テキスト、およびホームページに移動するための呼びかけボタンが含まれています。ユーザーがホームページに移動するためのリンクをクリックすると、自動的にログインされます。success ステータス内の要素はすべて編集またはスタイルを適用できます。

errorステータスは、ユーザーが無効なパスワードを送信した場合、またはフォームを送信すると一般的なエラーが発生した場合に表示されます。元のパスワード更新フォームの下にエラーメッセージが含まれたdivブロックが表示されます。divブロックとエラーメッセージは編集またはスタイルを適用できます。

パスワード更新ページに表示されるエラーメッセージは3つあります: general error、weak password、およびrepeat password used。

  • General error – このエラーメッセージは、フォームの送信時に一般的なエラーが発生した場合に表示されます。デフォルトのメッセージは次のようになっています: 「パスワードの更新中にエラーが発生しました。もう一度試してみてください。続けて問題が発生する場合はお問い合わせください。（There was an error updating your password. Please try again, or contact us if you continue to have problems）」
  • Weak password – このエラーメッセージは、ユーザーが8文字未満のパスワードを送信した場合に表示されます。デフォルトのエラーメッセージは次のようになっています: 「パスワードは少なくとも8文字必要です（Your password must be at least 8 characters.）」

デフォルトのエラーメッセージテキストはいつでも編集できます：

  1. キャンバス上で Update password form blockを選択します。
  2. Element settings panel > Update password form block settings > State を選択し、error を選択します。
  3. キャンバス上で Error message を選択します。
  4. Element settings panel > Error message settings に移動します。
  5. エラーメッセージを編集したい場合、右側にある「鉛筆」アイコンを選択します。
  6. Edit textフィールドに新しいエラーメッセージを入力します。

アクセス拒否ページ（Access denied page）

Access denied ページは、ユーザーに、その時点ではアクセス権がないページをアクセスしようとしたことを知らせるページです。ユーザーは、以下の2つの要件が両方満たされた場合にのみ、そのページにアクセスできます。

  • ログインしていること
  • その特定の制限コンテンツにアクセスできるアクセスグループの一部であること

フォームヘッダーには「鍵」の画像と「Access denied」という見出しが含まれています。フォームヘッダーの下にある段落では、リクエストされたページを表示するにはサイトのメンバーシップが必要であることを説明し、2つのリンクが含まれており、それはサインアップ ページとログイン ページを指しています。アクセス拒否ページのすべての要素にスタイルを適用できます。

ユーザーアカウントページ（User account page）

User account ページは、ユーザー（確認済みまたは未確認のユーザー）が、自分のアカウント情報を確認できる場所で、その情報にはメール、名前、マーケティングメールの受信に関する同意などが含まれます。このページは、ユーザーがサイトでアカウントを作成した際に提供したデータで事前に入力されます。また、サインアップページのサインアップフォームにカスタムフィールドを追加した場合、これらのフィールドをここに追加できます。ユーザーがサインアップページで提供したカスタムフィールドの回答が、サインアップフォームに追加されている場合、それらのカスタムフィールドも自動的に入力されます。さらに、サイトでEコマース を有効にしている場合、ユーザーがサイトのサブスクリプションを管理できるようにするために、ユーザーアカウントページにサブスクリプション要素 を追加することもできます。

このページは、見出し（「マイアカウント」）とUser account formから構成されており、ユーザーのメールアドレスフィールドと名前テキストフィールドが含まれています。フォームフィールドの下には「パスワード設定」という見出しがあり、その下に「パスワードをリセット」へのリンクがあり、また「マーケティングメールを受信するための同意」のチェックボックス、保存ボタン、キャンセルボタンもあります。また、Sign up ページのサインアップフォームに追加したカスタムフィールド、またはUser accounページでのみ表示したいカスタムフィールドを追加することもできます。カスタムフィールドがサインアップページのサインアップフォームに追加されている場合、ユーザーがサインアップフォームに提供した回答が、サイトのアカウントを作成した際に自動的に入力されます。さらに、サイトでEコマース を有効にしている場合、ユーザーアカウントページにサブスクリプション要素を追加することで、ユーザーがサイトのサブスクリプションを管理できるようにすることができます。

フォームとユーザーアカウントページのすべての要素にスタイルを設定できます。

注意：ユーザーアカウントフォームからユーザーEメールフィールドを削除することはできません。

共通フィールド を追加するには：

  1. User account formを選択します。
  2. Element settings panel > User account form settingsを選択します。
  3. Common fields の右側にある "プラス" アイコンをクリックします。

カスタムフィールド を追加するには：

  1. User account form を選択します。
  2. Element settings panel > User account form settings を選択します。
  3. Custom fieldsの右側にある "プラス" アイコンをクリックします。
  4. Add inputドロップダウンからフィールドを選択します。

フィールドを削除するには：

  1. User account formを選択します。
  2. Element settings panel > User account form settings を選択します。
  3. 削除したいフィールドの右側にある "ゴミ箱" アイコンをクリックします。これはCommon fieldsまたはCustom fieldsのいずれかです。

注：「プライバシーポリシーと利用規約に同意する」チェックボックスは、ユーザーアカウントページのオプションとして表示されません。これは、ユーザーがウェブサイトのプライバシーポリシーや利用規約を承認しないようにするためです。

ユーザーアカウントフォームブロックの状態

エラーメッセージを編集するには：

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）」

エラーメッセージを編集するには

  1. キャンバス上のError messageを選択します。
  2. 要素設定パネル に移動し、エラーメッセージの設定 を選択します。
  3. Element settings panel >  Error message settings の右側にある "鉛筆" アイコンをクリックします。
  4. Edit text フィールドに新しいエラーメッセージを入力します。

サブスクリプション要素

事前に用意された サブスクリプション 要素を ユーザーアカウント ページに追加することで、ユーザーはユーザーアカウントから直接サイトのサブスクリプションを管理できます。

重要:現在、SCA（Strong Card Authentication：強力なカード認証）が必要な場所やカードを使用しているお客様からのご購入をサポートすることができません。これは既知の問題であり、現在解決に向けて積極的に取り組んでいます。
注意: 購読エレメントにアクセスするには、サイトでユーザーアカウントとEコマースの両方を有効にする必要があります。あなたのサイトでEコマースが有効になると、削除できないコレクション、ページ、設定があることに注意してください。

Subscriptions 要素を追加するには：

  1. User accountページにいることを確認します。
  2. Add panel > Elements > Ecommerceを選択します。
  3. Subscriptions要素をキャンバスにドラッグします

サブスクリプション 要素には、プレースホルダーの画像とサブスクリプションの詳細が含まれており、サブスクリプションの名前と価格、購入日、次回請求日（または次回キャンセル日）などが表示されます。また、ユーザーはユーザーアカウント ページから直接サブスクリプションをキャンセルできる "キャンセル" ボタンも含まれています。

重要: ユーザーはメンバーシップ製品を購入する前に、アカウントを作成し、確認する必要があります。

ユーザーページの要素をカスタマイズする方法

ユーザーページにフォームを再追加する

ユーザーページからフォームを削除して再追加したい場合、フォームを元の状態からスタイル設定したい場合、該当のユーザーページにフォームをAdd panelから追加することができます（例：ログインページにログインフォームを追加できます）。これは、ページのフォームを元の状態からスタイル設定したい場合に便利です。

注意: このオプションは、ログイン ページ、サインアップ ページ、パスワードリセット ページ、パスワード更新 ページ、およびユーザーアカウント ページでのみ利用可能です。アクセス拒否 ページでは利用できません。

ログインフォームエレメントは、ログインユーザページの追加パネルから追加することができます。他のユーザページのフォームは、各ユーザページの追加パネルの同じ場所にあります。

チェックボックス

デフォルトでは、チェックボックス はサインアップ ページとユーザーアカウント ページに表示されます。サインアップ ページには2つのチェックボックスが付属しており、それは「プライバシーポリシーと利用規約に同意する」チェックボックスと「通信を許可する」チェックボックスです。ユーザーアカウント ページには、マーケティングメールを受け取るための1つのチェックボックスが付属しています。

これらのチェックボックスのスタイルやカスタマイズを行うことができます。

チェックボックスの設定では、チェックボックスの名前を変更することができます。また、チェックボックスのスタイルをデフォルトとカスタムの間で切り替えることができます。カスタムを選択すると、スタイルパネルを使用してチェックボックスのスタイルを設定できます。

サインアップページまたはユーザーアカウントページでフォームの送信時にチェックボックスを必須にするには：

  1. キャンバス上でチェックボックスを選択します。
  2. 要Element settings panel > Checkbox settingsを選択します。
  3. 「Required」チェックボックスをチェックします。

また、フォームの送信時にチェックボックスを必須にしない場合は、「必須」チェックボックスのチェックを外すこともできます。

サインアップページまたはユーザーアカウントページの読み込み時にチェックボックスをデフォルトでチェックされた状態にするには：

  1. キャンバス上でチェックボックスを選択します。
  2. Element settings panel > Checkbox settingsを選択します。
  3. デフォルトでチェックをするチェックボックスをチェックします。

また、ページの読み込み時にチェックボックスをデフォルトでチェックされない状態にする場合は、Start checkedのチェックボックスを外すこともできます。

テキストフィールド

デフォルトでは、テキストフィールドはアクセス拒否 ページを除くすべてのユーザーページに含まれています。

プレースホルダーテキスト

プレースホルダーテキストをテキストフィールド（通常のテキスト、パスワード、およびカスタムフィールドなど）に追加できます。プレースホルダーテキストは、テキストフィールドの本文に薄いテキストとして表示され、フィールドの目的に関する文脈を追加するために通常使用されます（フィールドラベル自体と一緒に）。プレースホルダーテキストは、サイト訪問者がフィールドに入力し始めると消えます。

プレースホルダーテキストを追加するには：

  1. キャンバス上でText field を選択します。
  2. Element settings panel > Text field settingsを選択します。
  3. placeholderフィールドにテキストを追加します。
注意: 編集しているテキストフィールドによっては、「テキストフィールド」と呼ばれる代わりに異なる名前のフィールドかもしれません（例：「ユーザーのメールフィールド」、「ユーザーのパスワードフィールド」など）。
重要: プレースホルダーテキストは、フィールドラベルの代替として、または関連する入力フィールドの重要な情報やヘルプテキストを提供するために使用してはいけません。なぜなら、プレースホルダーテキストは翻訳ツールを使用するサイト訪問者やスクリーンリーダーのような支援技術には翻訳されないためです。また、プレースホルダーテキストは、サイト訪問者がフィールドにどの情報を入力すべきかを覚えるのが難しくなるため、フィールドラベルの代わりにプレースホルダーテキストを使用することは問題があります。

自動フォーカス（autofocus）

自動フォーカスを非パスワードテキストフィールド（通常のフィールドとカスタムフィールドなど）に追加できます。フィールドにautofocusのチェックが付いている場合、サイト訪問者のカーソルはページが読み込まれるときにテキストフィールド内に置かれます。通常、自動フォーカスはフォーム内の最初のテキストフィールドに設定されます。

フィールドに自動フォーカスを追加するには：

  1. キャンバス上でText fieldを選択します。
  2. Element settings panel > Text field settingsを選択します。
  3. autofocusのチェックボックスをチェックします。

もしフォーム内の2つ以上のフィールドに誤って自動フォーカスを追加した場合、自動フォーカスはページナビゲーション内の最初のフィールドに設定されます。

また、フォーム送信に問題が発生する可能性があるため、隠れたフォームフィールドには自動フォーカスチェックボックスがチェックされていないことを確認するのがベストプラクティスです。フォーム内での自動フォーカスの詳細を学ぶ。

ボタン

送信ボタン

ユーザーページの送信ボタンのデフォルトテキストと待機テキストをカスタマイズできます。デフォルトテキストはページが読み込まれたときに表示されます。待機テキストはフォームが送信中に表示され、通常は「お待ちください...」などと表示されます。

送信ボタンのデフォルトテキストを編集するには：

  1. キャンバス上でSubmit buttonを選択します。
  2. Element settings panel > Submit button settingsを選択します。
  3. Textフィールド内のテキストを編集します。

送信ボタンの待機テキストを編集するには：

  1. キャンバス上でSubmit buttonを選択します。
  2. Element settings panel > Submit button settingsを選択します。
  3. Waiting textフィールド内のテキストを編集します。

キャンセルボタン

ユーザーアカウントページのキャンセルボタンのデフォルトテキストをカスタマイズできます。デフォルトテキストはページが読み込まれたときに表示されます。

キャンセルボタンのデフォルトテキストを編集するには：

  1. キャンバス上でCancel buttonを選択します。
  2. Element settings panel > Cancel button settingsを選択します。
  3. Textフィールド内のテキストを編集します。

リンク

リンク設定とリンクをクリックしたときにユーザーをどこに送信するかを変更できます。デフォルトでは、リセットパスワードページとパスワードの更新ページを除くすべてのユーザーページにリンクが含まれています。

リンク設定にアクセスするには：

  1. キャンバス上でLinkを選択します。
  2. Element settings panel > Link settingsを選択します。

ユーザーアカウント設定

User account settingsタブを使用すると、ユーザーアカウント（基本情報とカスタムフィールド）で利用可能なユーザーデータフィールドを確認できます。また、 User account settings内でフォームプレビューを表示することもでき、ユーザーが情報を入力する際にフォームフィールドがどのように表示されるかを確認できます。

ユーザーアカウント設定にアクセスするには：

  1. Users panelを開きます。
  2. User accountsタブの上にカーソルを置き、右側にある設定の「歯車アイコン」をクリックします。

カスタムフィールド

ユーザーページのフォームには2種類の入力フィールドがあります：共通フィールドとカスタムフィールド。共通フィールドには通常、サインアップフォームに含まれるフィールドが含まれます。例えば、メールアドレスフィールド、名前フィールド、パスワードフィールドなどです。カスタムフィールドを作成して、サイトに関連する追加情報を収集することができます（例：キャリアネットワーキングサイトの「業界」フィールドなど）。

カスタムフィールドは、サインアップページのサインアップフォームとユーザーアカウントページのユーザーアカウントフォームに追加できます。サイトごとに最大20個のカスタムフィールドを追加でき、これによりユーザーから追加情報を収集することができます。このデータは、サイトオーナーがユーザーアカウントから、ユーザーがユーザーアカウントページからアクセスできます。

カスタムフィールドを追加するには：

  1. Users panelを開きます。
  2. User accounts セクションの上にカーソルを置き、セクションの右側に表示される設定の「歯車アイコン」をクリックします。
  3. Custom fieldsセクションでAdd fieldをクリックします。
  4. Field typeを選択します。
  5. カスタムフィールドのnameを入力します。これはフィールドの上にフィールドラベルとして表示されます。
  6. カスタムフィールドのslugを入力します。
  7. 他の必要なフィールドを設定します。

カスタムフィールドは、ユーザーアカウント設定で追加した後にサインアップページとユーザーアカウントページに追加する必要があることに注意してください。これらはデフォルトのフォームに自動的に表示されません。

注意：ユーザーがカスタムフィールドに入力する情報を制御したい場合、最小文字数と最大文字数は便利です。たとえば、ユーザーに2文字の国の略語を提出してもらいたい場合、最小文字数と最大文字数を両方2に設定できます。カスタムフィールドに最小文字数または最大文字数を追加した場合、フォームにそれらの制限に関する注意書きを追加して、ユーザーが何を期待し、有効な情報を提出するかを知らせることが良いでしょう。
‍注意：カスタムフィールドを必須としてマークした場合、それはサインアップページのサインアップフォームに追加する必要があります。また、カスタムフィールドを作成または更新する際にフィールドを「必須」に設定した場合、この設定は自動的にデザイナー内のカスタムフィールドに転送されます。デザイナーでカスタムフィールドが必須または必須でないかを変更することはできません。この設定はユーザーアカウント設定で変更する必要があります。

カスタムフィールドを更新するには：

  1. Users panelを開きます。
  2. User accountsセクションの上にカーソルを置き、セクションの右側に表示される設定の「歯車アイコン」をクリックします。
  3. Custom fieldsセクションに移動します。
  4. 更新したいカスタムフィールドの上にカーソルを合わせ、カスタムフィールドラベルの右側に表示される設定の「歯車アイコン」をクリックします。
  5. 選択したカスタムフィールドを更新します。

カスタムフィールドを削除するには：

  1. Users panelを開きます。
  2. User accountsセクションの上にカーソルを置き、セクションの右側に表示される設定の「歯車アイコン」をクリックします。
  3. Custom fieldsセクションに移動します。
  4. 削除したいカスタムフィールドの上にカーソルを合わせ、カスタムフィールドラベルの右側に表示される設定の「歯車アイコン」をクリックします。
  5. 選択したカスタムフィールド設定の上部にある「ゴミ箱アイコン」をクリックします。

予約済みのURLスラッグ（Reserved URL slugs）

ユーザーページがサイトに追加されると、各ページにはプリセットのスラッグがあります：

ログインページ：/log-in

サインアップページ：/sign-up

パスワードリセットページ：/reset-password

パスワード更新ページ：/update-password

アクセス拒否ページ：/access-denied

ユーザーアカウントページ：/user-account

これらのユーザーページのスラッグは編集できません。さらに、将来的にサイトからユーザーアカウントを削除することを決定した場合、これらの予約済みのスラッグを新しいページに使用することはできません。

サイト検索結果からユーザーページを除外する方法

サイト内検索結果からユーザーページを除外して、ユーザーがサイトを検索する際にこのページを見つけられないようにすることができます。

ページを除外するには：

  1. ページアイコンをクリックしてページパネルを開きます。
  2. 除外したいユーザーページの上にカーソルを合わせ、ページラベルの右側に表示される設定の「歯車アイコン」をクリックします。
  3. Site search settingsに移動します。
  4. 「このページをサイト検索結果から除外する」チェックボックスをオンにします。

検索エンジンインデックスからユーザーページを除外する方法

ユーザーページの検索エンジンインデックスを無効にして、検索エンジンがこれらのサイトページをインデックス化せず、検索結果にリストしないようにすることができます。

ユーザーページの検索エンジンインデックスを無効にするには、サイトにrobots.txtルールを追加します。既にユーザーページが検索エンジンにインデックス化されている場合、noindexメタコードを使用してそのコンテンツを検索エンジンのインデックスから削除することもできます。