フォームを使用すると、ユーザーから名前、連絡先、住所などの重要な情報を収集できます。このデータを収集することで、ユーザーの購買習慣、好み、ニーズについての洞察を得ることができ、商品やサービスを最適化するための貴重な参考情報となります。この記事では、SHOPLINEで直接フォームを作成し、カスタムコードを使用してサードパーティのフォームツールZOHO FORMSと統合する方法について紹介します。

直接フォームを作成する

SHOPLINEで「お問い合わせ」フォームを作成するには、以下の手順を実行できます：

オンラインストア＞ページ＞ページを作成に移動します。テーマテンプレートとしてお問い合わせを選択します。
ページタイトルの横にある小さな目のアイコン（プレビュー）をクリックしてフォームスタイルを表示します。
フォームスタイルは現在、固定テンプレートに基づいています。次の図に示すように、カスタムCSSやコードエディタを使用してフォームスタイルとコンテンツをカスタマイズできます。
顧客がフォームページを見つけて個人情報を残しやすくするために、フォームページをナビゲーションメニューにリンクすることをお勧めします。

ZOHO FORMSを使用してフォームを作成する

フォームのカスタムオプションをさらに設定したい場合は、ZOHO FORMSのようなサードパーティフォームツールを使用することを検討してください。

市場には多くのサードパーティフォームツールがあり、企業は自分たちのニーズに最適なツールを選択する自由があります。この記事では、ZOHO FORMSを参照しています。

ZOHO FORMSをお勧めする理由は2つあります。まず、ZOHOは海外のバイヤーにも利用しやすい国際的なツールです。次に、500通のメールの見積もりを無料で会社の指定されたメールアドレスに直接送信するサポートがあります。

以下の図はZOHOフォームのスクリーンショットを示しています。

このようなフォームを作成するには、次の手順に従ってください。

ZOHO FORMSアカウントに登録するには、次の手順を実行してください：

ビジネス用のZOHO FORMSアカウントに登録し、確認してください。登録リンク：https://www.zoho.com/forms/? zredirect=f&lb=fr&zsrc=bheader
お使いのメールアカウントにログインして確認し、お問い合わせがメールに届くようにこの手順を完了してください。

ZOHO FORMSフォームを設定するには、次の手順を実行してください：

アカウントに登録した後、ウェルカムページでLet’s Get Startedをクリックしてフォームを作成してください。
最初に、CREATE FROM SCRATCHタブをクリックしてください。テンプレートを使用する場合は、USE TEMPLATESタブをクリックしてください。 Form TitleテキストボックスにGET A QUOTEを入力してください。無料サンプルを提供する場合は、GET FREE SAMPLESを使用してください。説明欄を空白のままにしてもよいし、プロモーションや割引などの魅力的なメッセージを短く記入して潜在的な顧客を引き付けることもできます。フォームを作成するには、Createをクリックしてください。
フォームを構成してください。画面の左側には、ラベルコンポーネントエリアがあり、そこからコンポーネントを画面の中央にドラッグアンドドロップできます。タイトルまたはコンポーネントをクリックすると、プロパティポップアップでテキスト、指示、配置を変更できます。バイヤーから必要な情報のみを求めてください。情報を過剰に求めたり、必須項目を設定すると、バイヤーがフォームの記入をためらう可能性があります。名前、メールアドレス、電話番号、WhatsApp（または他の連絡手段）、メッセージの情報のみを収集することをお勧めします。 EmailとMessageのフィールドは必須フィールドとして設定されています。

ラベルコンポーネントの必要な設定は次のとおりです：画面の左側のコンポーネントエリアからName, Email, Phone, Single Line, and Multi Lineコンポーネントを画面の中央にドラッグアンドドロップしてください。

メールを必須フィールドとして設定します。 メールをクリックします。プロパティポップアップで、必須を選択して、メールを必須フィールドに設定します。 メールコンポーネントの右上隅に赤いアスタリスク（*）が表示されると、設定が正常に適用されたことを示します。
電話番号コンポーネントのための指示を設定します。購入者が電話番号を入力する際にエリアコードを含めるように促すことで、電話番号がどの国に属しているかを区別し、適切な連絡先を確保できます。 電話番号をクリックします。プロパティポップアップで、指示ボックスにエリアコードから入力してください。と入力します。
WhatsAppまたは他の連絡方法を使用します。 単一行をクリックします。プロパティポップアップで、フィールドラベルをWhatsAppまたは他の連絡方法に設定し、指示ボックスに48時間以内にご連絡いたします。と入力します。これはオプションですが、できるだけ多くの連絡先詳細を入力するよう購入者に促すことが常に良いです。したがって、48時間以内にご連絡いたします。という指示を含めることで、48時間以内に連絡が取れることを示します。企業のポリシーまたは特定の状況に応じて、「24時間」や「12時間」といった連絡が取れる時間枠を示すバリエーションも使用できます。
購入者が意図を書き留めるために、メッセージを必須フィールドとして設定します。 複数行をクリックします。プロパティポップアップで、フィールドラベルをメッセージに、必須を選択して、複数行を必須フィールドに設定します。
ラベルのロケーションを設定します。 見積もりを取得のタイトルをクリックします。プロパティポップアップで、ラベル配置を左に設定して、入力ボックスの左側にラベルを配置して、清潔で美しい外観を実現します。フォームを保存するには、右上隅にある保存をクリックします。
フォームをプレビューします。ナビゲーションメニューの右側にあるフォームにアクセスをクリックして、フォームの外観を確認します。デフォルトのレイアウトデザインに満足していない場合は、ナビゲーションメニューでテーマをクリックして、他のレイアウトを選択できます。

フォームが正常に送信された後、購入者に感謝メッセージを表示するサンクスページを設定します。 Email フィールドが空でない場合にサンクスページにリダイレクトするルールを設定します。ナビゲーションメニューで Rules をクリックしてルール構成ページを開きます。左側のパネルで Form Rules をクリックし、画面の中央にある Configure Now をクリックします。

プロパティポップアップで、Rule Name を Thank you page に設定し、If 部分に Any, Email, and Is Not Empty を含め、Then 部分に Redirect To を含めます。 Redirect To の横にある編集ボックスをクリックして、感謝メッセージを設定します。
f147f0ea-fc36-40be-bb41-91200f56df9d

Thank You Page タブで、プレーンテキストを選択し、テキストボックスに Thank you! We will contact you soon. と入力します。感謝メッセージを保存するには Done をクリックします。
eb0be8e8-4444-4e5d-bc61-38e886b8689f

Add をクリックして Thank you page ルールを保存します。

フォームの送信を直接受け取るためのメールアドレスを指定します。ナビゲーションメニューで Settings をクリックして設定ページを開きます。左側のパネルで Email & Notifications > Email を選択し、画面の中央にある Configure をクリックします。

送信元および受信者のメールアドレスを設定します。無料版では、メールアドレスはすでに確認済みの登録メールアカウントからのみ選択できます。メールの件名コンボボックスの右側のドロップダウンリストから Email を選択して、購入者のメールをメールの件名として使用します。 Include form submission in the body of the email チェックボックスを選択し、右下の Done をクリックします。
fcec8e89-0bcc-43d8-827f-87ff7c593e47

ウェブサイトに配置するためのフォームリンクを取得します。ナビゲーションメニューで Share をクリックして共有ページを開きます。左側のパネルで Public をクリックし、Enabled トグルがオンになっていることを確認します。フォームのパーマリンク（URL）をコピーし、SHOPLINEの管理画面に貼り付けてウェブサイトに統合します。

ZOHO FormsをSHOPLINEウェブサイトに埋め込む

SHOPLINEでオンラインストアのナビゲーションメニューにフォームを関連付ける

次の手順を実行して、SHOPLINEのオンラインストアのナビゲーションメニューにフォームを関連付けることができます：

SHOPLINEの管理画面にログインし、オンラインストア＞ナビゲーション＞ヘッダーに移動します。 ナビゲーションメニューの編集 ページが表示されます。ウェブサイトに複数のナビゲーションコントロールがある場合は、フォームが必要なすべてのコントロールを設定する必要があります。
編集ページで、メニューアイテムを追加をクリックします。 メニューアイテムのタイトルを見積もりを取得または無料サンプルを入手に設定します。
ZOHOフォームのコピーされたURLをリファラURL入力ボックスに貼り付けます。
フォームをウェブサイトに関連付けるために追加をクリックします。

ZOHOフォームをウェブサイトのトップページに埋め込む

次の手順を実行して、ZOHOフォームをウェブサイトのトップページに埋め込むこともできます：

ZOHOウェブサイトのフォームビルダーで、共有＞埋め込み＞ JavaScriptに移動し、提供されたコードスニペットをコピーします。
ウェブサイトを開き、トップページのデザインに移動し、デザイン＞コンポーネントの追加＞カスタムHTMLを選択します。
ステップ1からコピーしたコードを編集ボックスに貼り付け、公開をクリックしてフォームをトップページに追加します。
トップページの効果：

カスタムページにZOHOフォームを埋め込む

次の手順を実行して、ウェブサイトのカスタムページにZOHOフォームを埋め込むこともできます：

ZOHOウェブサイトのフォームビルダーで、共有＞埋め込み＞ JavaScriptに移動し、提供されたコードスニペットをコピーします。
カスタムページを作成します。
ソースコードアイコンをクリックし、コピーしたコードを貼り付け、青枠のセクション内の幅を100％に変更します。その後、保存をクリックして設定を更新し、フォームを埋め込みます。カスタムページをストアのトップページのメニューナビゲーション設定を介して追加できます。

フォーム追加後の問い合わせテスト

ウェブサイトにフォームを追加した後は、フォームが正常に機能しているかをテストすることが重要です。フォームをテストする手順は以下の通りです：

ウェブサイトを開き、ナビゲーションメニューで見積もりを取得をクリックします。フォームが新しいタブで開くことと、フィールドが設定と一致していることを確認します。
フォームに記入し、必須フィールドが機能しているかどうかを確認するために送信してみてください。
フォームを送信した後、お礼のメッセージが表示されるかどうかを確認します。
メールアカウントにログインし、お問い合わせを受信したかどうかを確認します。
お問い合わせは、ZOHO FORMSの管理画面にも保存されます。ログインして表示やエクスポートができます。

お問い合わせページの作成

目次