結論: 会員登録フォームに追加した項目の並び順は、Howdyの会員登録フォームの編集画面で上ボタン・下ボタンを使って変更し、保存ボタンを押します。住所の項目は表示順とプレースホルダーを個別に調整できます。項目を1つのフォームにまとめず分けたい場合は、会員登録フォームを複数作成し、フォームIDを使って誘導先を分けます。
この記事の要点
- 会員登録フォームに追加した項目の並び順は、編集画面の上ボタン・下ボタンで変更し、保存ボタンを押す
- 住所の項目は、追加時の編集画面で表示順とプレースホルダーを個別に設定でき、国の項目は追加・省略を選べる
- 項目を分けたい場合は、会員登録フォームを複数作成し、テーマのブロックやボタンにフォームIDを指定して誘導先を分ける
- 一般設定で「コード側で指定」を選ぶと、誘導用のボタンごとに、ログイン後・会員登録後・ログイン済みの場合の移動先を指定できる
会員登録フォームに追加した項目の並び順は、どこで変更しますか？
Howdyの会員登録フォームの編集画面で、フォーム項目の上ボタン・下ボタンを押して項目を設置したい位置に移動させ、保存ボタンを押します。同じ編集画面で、項目の追加と各項目の編集もできます。
- Shopify管理画面でアプリ「Howdy New Customer」を開き、「会員登録フォーム」の設定ページに進む
- 会員登録フォームの編集画面を開く
- フォーム項目の上ボタン・下ボタンで、項目を設置したい位置に移動させる
- 保存ボタンを押す
会員登録フォームへの項目の追加手順と必須・任意の設定は、新しいお客様アカウントに会員登録フォームを設置する手順（Howdy）とShopifyの会員登録フォームで項目を必須・任意に分ける方法｜顧客メタフィールドの設定にまとめています。
| 項目の種類 | 例 |
|---|---|
| Shopify項目 | 氏名・電話番号・郵便番号・都道府県・市町村・番地・建物名・部屋番号など |
| カスタム項目（顧客メタフィールド） | 誕生日・利用規約への同意など |
出典: Howdyヘルプ「③【初期設定】会員登録フォーム」／「誕生月を取得して誕生日割引クーポンを発行する方法」／「会員登録フォームの項目に文字数制限をつける方法」
住所の項目の並び順やプレースホルダーは、どこで設定しますか？
住所の項目は、次の流れで追加・調整します。
- Shopify管理画面でアプリ「Howdy New Customer」を開き、会員登録フォームの項目編集画面に進む
- 「Shopify項目を追加」をクリックする
- 一覧から住所に関する項目を選び、「追加」をクリックする
- 海外のお客様にも対応する場合は、「編集」から任意の国を追加する
- 表示順とプレースホルダーを整えて保存する
プレースホルダーは、入力欄に薄いグレーで表示される案内的なサンプル文字で、必要に応じて項目ごとに変更できます。国内のお客様だけを対象にする場合は、国の項目そのものを省略できます。国を追加すると、フォーム上に国を選ぶプルダウンが表示される設定も選べます。
| 設定できる内容 | 操作する画面 |
|---|---|
| 住所項目の表示順 | 住所項目の編集画面 |
| プレースホルダー（入力欄の案内文） | 住所項目の編集画面 |
| 国の追加・省略 | 編集画面の「編集」 |
| 国を選ぶプルダウンの表示 | 編集画面（任意設定） |
住所に関する項目として追加できるのは、郵便番号・都道府県・市町村・番地・建物名・部屋番号です。これらを郵便番号→都道府県→市町村→番地・建物名→部屋番号の順に並べると、お客様が入力するときの流れがそのまま画面の並びと一致します。住所の自動入力と組み合わせる設定はShopifyで住所を自動入力して配送エラーを防ぐ方法｜郵便番号連動とチェックアウト連携にまとめています。
項目をグループ分けしたい場合は、どうすればいいですか？
会員登録フォームを複数作成し、フォームIDで誘導先を分けます。Howdyの「会員登録フォーム」からは複数の会員登録フォームを作成でき、フォームIDを指定すると、そのフォームだけを開くボタンにできます。
フォームは「フォームを作成」を押し、「フォームタイトル」を入力して「保存」したあと、「カスタム項目を追加」などで項目を追加して作ります。作成したフォームへの誘導の設定は、次の節で説明します。
出典: Howdyヘルプ「複数フォーム導入」／「リンクつき利用規約設定方法」
複数のフォームへの誘導は、どうやって設定しますか？
テーマのカスタマイズ画面で「会員登録フォーム」ブロックを追加し、ブロックにフォームIDを追加します。コードで指定する場合は、howdy-register-original-trigger-btn クラスのボタンに data-form 属性でフォームIDを記述します。
- テーマのカスタマイズ画面で「会員登録フォーム」ブロックを追加する
- ブロックにフォームIDを追加する（そのIDのフォームだけを開くボタンになる）
- コードで指定する場合は、ボタンに
data-form属性でフォームIDを記述する
Howdyのヘルプには、次のようなコード例が示されています。
<button
class="howdy-register-original-trigger-btn"
data-form="b3d0bk"
data-login-redirect="/"
data-register-redirect="/pages/thanks"
data-already-loggedin="{{ routes.account_url }}"
>ボタン</button>
同じボタンには、data-formに加えて3つの属性をそれぞれ指定できます。
| 属性 | 指定する内容 |
|---|---|
data-form |
誘導先のフォームID |
data-login-redirect |
ログインした後のリダイレクト先 |
data-register-redirect |
会員登録した後のリダイレクト先 |
data-already-loggedin |
すでにログインしているお客様の遷移先 |
リダイレクト先の3つの属性は、Howdyの一般設定で「コード側で指定」を選んで保存したうえで使います。この設定にすると、ボタンごとに会員登録後やログイン後の遷移先を変えられます。ボタンごとに分けない場合は、一般設定の「ログイン後のリダイレクト先」「会員登録のリダイレクト先」で、コードを書かずに設定できます。コードの編集に慣れていない場合は、Howdyのサポート（support@macro-micro.co.jp）に相談できます。
出典: Howdyヘルプ「複数フォーム導入」／「フォーム入力後のリダイレクト先をコードで指定する方法」
関連記事
よくある質問
Howdyは14日間無料で試せます
会員登録フォームの項目の並び替えと、複数のフォームを使い分ける設定は、Howdyの管理画面から行えます。顧客メタフィールドの作成、会員登録フォームの項目設定、プロフィールページのブロック配置は、Howdyの専任チームが無料で代行します。
