はじめに
- 評価の高い、Powerfull Contact Form Builderアプリを試す
実現したいこと
- 登録未済の訪問客にも最初に問診して、予約する際にユーザー登録と同時に登録したい
- 登録済みユーザーの再訪時には、毎回聴く項目だけを聞いて、更新したい
インストール
Powerful Contact Form Builderのインストール
- ShopifyのAppsを選択
- 検索ボックスで「Powerful Contact Form Builder」を検索
- 以下の画面が開くので、Installボタンを押す
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.11.08.png)
- 以下の画面のInstallボタンを押す
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.11.51.png)
プランの選択
- Premiumを試す
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.12.50.png)
- Approveを押す
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.14.05.png)
Formの追加
- Create formを押す
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.19.53.png)
テンプレートの選択
- Survey form 7を選択する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.34.03.png)
- 以下がサンプルとして作成される
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.34.44.png)
Publishする
- Publishボタンを押す
- ページタイプで、ホームを選択する
- ショートコードを取得する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.44.38.png)
ショートコードの利用
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-22.50.54.png)
ホームへのFormの埋込
- Themeのカスタマイズから、AppsのFormにタグが埋め込まれている
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-01-23.21.30.png)
カスタマイズ
Form専用のページの作成
- 新ページを作成する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-12.19.36.png)
- ページの中身は空のままにする
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-12.20.23.png)
- Shopify > online shop > themeのカスタマイズ > ページの選択
- Apps > Formを開く
- ショートコードを貼り付ける
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-12.13.42.png)
FormとShopifyカスタマーデータの接続
Connect form elements to Shopify customer data- Shopify > Apps > Powerful Form Builder > Forms で作成したフォームを選択する
- Integrationメニューを選択し、以下のShopifyを有効にする
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-0.26.20.png)
Formへ質問を追加
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-12.12.27.png)
カスタマーの自動登録
- ShopifyのEmailとFormのEmailを紐づけるのが必須
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-17.27.22.png)
- If customer already existを、Continue and update customer informationを選択する
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-20.59.28.png)
- Emailをキーに、カスタマーが新規登録、または、更新される
![](https://www.s3lab.co.jp/wp-content/uploads/2024/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-06-02-20.57.56.png)