STUDIOで簡単に見積・予約フォームを作る方法：JotformとHubSpot連携で案件管理も自動化

STUDIOでフォームを作成する際、シンプルな予約フォームや見積フォームを簡単に実装できる一方、条件による表示・非表示や台数制限といった複雑なロジックを組み込む必要がある場合もあります。そんな高度な設定に挑戦したい方は、STUDIOで条件付き表示を活用した予約フォームを作る方法：Jotformで観光農園の複雑な予約を管理という記事も参考にしてみてください。今回の記事では、基本的なフォーム作成方法を中心に解説します。

最近、STUDIOを利用してWebサイトを制作する際に、「予約」や「概算見積」のような特定のフォームを実装したいという要望が増えています。しかし、STUDIOが提供する標準のフォーム機能は一般的な問い合わせフォームに限られており、それでは要望を満たせない場合があります。そこで、主に以下の2つの選択肢が考えられます。

1. CRMツールのフォームを埋め込む

   BtoB向けのコーポレートサイトやITサービスの製品サイトをSTUDIOで構築している場合、CRMやMAツールで顧客管理や案件管理を行っていることが多いです。この場合、これらのツールが提供するフォームをSTUDIOの問い合わせページに埋め込むことで、問い合わせと同時にCRMに案件登録ができます。

2. 外部サービスにリンクで飛ばす

   これは、例えばTablecheckのようなレストラン予約サービスやHotpepperのような美容室予約サービスのリンクを使用する方法です。この場合、お客様は外部のサイトに移動して予約を行います。

選択肢1が利用できる場合には問題ありません。また、レストランや美容室の予約のように、お客様が普段から外部のサービスを使って予約し、ポイントを貯めている場合には、自社サイトでの予約フォームの利用は期待できないため、この方法も受け入れられます。

しかし、これらの選択肢に当てはまらない場合があります。例えば、日付や時間、予約時のメニューを選んでもらう必要があり、選択内容に応じて事前に料金を知らせたい、更に外部サイトには飛ばしたくない、というような場合などです。このような場合、STUDIOの標準フォームでは対応できず、以下のような選択肢を検討することになります：

• STUDIOのフォームで連絡先だけを記入してもらい、その後のやり取りはメールや電話で行う。

• STUDIOの利用を諦めて、WordPressのプラグインやカスタマイズを行う。

• Shopifyのようなネットショップ構築サービスを代替方法として使用する。

これらの背景を踏まえ、Jotformのようなフォームサービスを利用することで、多くの要望を満たすことができると考えます。今回は、弊社のようなWebサイト制作会社がサイト上で概算費用を計算・表示できるようにする方法を例に、具体的な設定手順をキャプチャと共にご紹介します。

Jotformや類似のサービスは、テンプレートが豊富で、レストランやホテル、病院の予約はもちろん、決済サービスと連携することで実際の注文まで受けることも可能です。

この記事用に弊社STUDIO内に設置したデモ用のお問い合わせページ

はじめに

この記事では、日本発のノーコードCMS「STUDIO」とフォーム作成ツールJotformを活用し、簡単に概算見積ができるフォームを作成し、それをHubspotに連携して問い合わせ管理から案件登録までをノーコードで自動化する方法についてご紹介します。お客様はこちらかの返信を待たずにその場で概算見積が確認できるようになります。

Jotformはテンプレートが豊富です。一般的な予約フォームのようなものであればテンプレートを利用しテキストを変更するだけですぐに公開できます。

リード獲得のために問い合わせ完了後に概算見積が表示されるように設定することもできますので、その辺りはそれぞれのメリット・デメリットを考慮いただき自社にあった運用を行ってください。

フォーム作成ツールとしてはTypeformなどでももちろん実装できますし、Hubspot以外のCRMツールとの連携も可能です。
フォームはiframeやJSを組み込ればどのようなフォームサービスでも設定できますが、CRMの連携についてはフォームサービスが連携しているツールが前提となります。Hubspot以外にも、SalesforeやZoho CRMなどに対応しています。仮に連携していなかったとしてもiPaaSのような仕組みをもう一つ噛ますことで実装は可能です。
※現時点でJotformが連携しているCRMツールについてはJotformのホームページにてご確認いただけます

1. ノーコードツールの背景と重要性

1.1 ノーコードツールの進化と普及

近年、ノーコードツールは急速に進化し、普及しています。その背景には、技術者不足や開発コストの高騰、社内でスピード感をもって運用を行いたい、といった課題が存在します。ノーコードツールは、プログラミングの知識がない人でも、簡単にWebサイトやアプリケーションを構築できるため、企業にとって魅力的な選択肢となっています。

1.2 ノーコードツールのメリット

ノーコードツールの主なメリットには以下の点があります：

• 迅速な開発：コーディングの知識が不要なため、開発プロセスが大幅に短縮されます。

• コスト削減：専門の開発者を雇う必要がなく、開発コストを削減できます。

• 柔軟性：変更や修正が簡単に行えるため、ビジネスの変化に迅速に対応できます。

• コラボレーション：技術者以外のメンバーも開発に参加できるため、チーム全体でのコラボレーションが促進されます。

2. STUDIOとは

2.1 STUDIOの概要

STUDIOは、日本発のノーコードCMSとして注目を集めています。直感的なインターフェースと高いデザイン性を兼ね備え、多くの企業が導入を進めています。コーディングの知識がなくても、高品質なWebサイトを短期間で作成することが可能です。

2.2 STUDIOの特徴

• 直感的な操作性：ドラッグ・アンド・ドロップの操作で簡単にWebページを作成できます。

• 高いデザイン性：デザイナー向けの機能が充実しており、美しいデザインを簡単に実現できます。

• 豊富なテンプレート：多様なテンプレートが用意されており、短時間でプロフェッショナルなWebサイトを作成できます。

• レスポンシブデザイン：PC、タブレット、スマートフォンに対応したレスポンシブデザインが自動的に適用されます。

• プレビュー機能：作成中のWebページをリアルタイムでプレビューでき、完成イメージを確認しながら編集が進められます。

• モリサワフォントが利用可能：高品質なモリサワフォントが利用可能で、美しいタイポグラフィを実現できます。

3. Jotformでの概算見積フォームの作成

3.1 Jotformの概要

Jotformは、ドラッグ・アンド・ドロップで簡単にフォームを作成できるツールです。ユーザーはコーディングの知識がなくても、短時間で高度な機能を持つフォームを作成することができます。

3.2 Jotformの特徴

• 使いやすさ：直感的なインターフェースで、誰でも簡単にフォームを作成できます。

• 豊富なテンプレート：多種多様なテンプレートが用意されており、さまざまな用途に対応できます。

• 強力なカスタマイズ機能：ユーザーのニーズに合わせてフォームを自由にカスタマイズできます。

• データ分析機能：収集したデータを簡単に分析し、ビジネスの改善に役立てることができます。

3.3 概算見積フォームの作成手順

Jotformを使って概算見積フォームを作成する具体的な手順を紹介します。
今回は概算見積を表示するための設定と計算方法について記載させていただき、Jotformの基本的な設定については省略させていただきます。

1. Jotformのアカウント作成：まず、Jotformの公式サイトでアカウントを作成します。

2. 新しいフォームの作成：ダッシュボードから「Create Form」を選び、新しいフォームを作成します。

3. フォームのカスタマイズ：ドラッグ・アンド・ドロップで項目を追加し、見積に必要な情報（サービス内容、数量、単価など）を入力できるようにします。

4. フォーム要素：今回はDropdown Propertiesを利用し、お客様にドロップダウンリストの中から作りたいサイトの種類やページ数を選んでいただくようにします。各要素のOPTIONSにて選択肢と各選択肢に設定したい値（金額）を設定します。※下にキャプチャあり

5. 概算見積フィールド：4で作ったフィールドに入力された数値を計算し、合計金額（概算見積）を表示するための要素としてWIDGETSから「Form Calculation」を追加する。※下にキャプチャあり

6. 計算機能の追加：「Form Calculation」の計算機能を使って、入力されたデータから自動で概算見積を算出します。※下にキャプチャあり

7. 問い合わせ：もしお客様が概算費用を知りたいだけであれば表示された金額を確認いただき終了です。今回作ったデモ用のフォームはそのまま問い合わせに進んでいただくことができるようになっていますので、「このまま問い合わせへ」をクリックすると会社名やメールアドレス、費用感などを入力いただき問い合わせまで完了します。

8. 問い合わせ完了（Thanks）ページの設定：フォームが完成したら設定に進むと「THANK YOU PAGE」を設定する箇所があるので、STUDIO側に問い合わせ完了ページを用意し、お客様が問い合わせを行ったあとにそのページへリダイレクトをさせることもできます。

9. その他設定：問い合わせ完了時に通知メール内容や各種ツールとの連携、組み込み方法などAdvanced設定まで合わせるととても細かい設定ができます。

10. STUDIOへの組み込み：最終的にJotformをSTUDIO側に埋め込みます。そちらについては次の章で解説します。

4のDropdown要素とその設定

5の「Form Calculation」ウィジェットを追加する画面

6の計算機能の設定方法

②ADD FIELD をクリックすると各要素が選べるので、計算に利用する数値が入っている要素を選択し、＋や-、×など四則演算等を利用して合計値として表示させたい内容になるように設定する（Functionなど高度な計算も可能）

4. STUDIOにフォームを埋め込む

4.1 フォームの埋め込み手順

次に、作成したJotformのフォームをSTUDIOのWebサイトに埋め込む方法を解説します。

1. Jotformから埋め込みコードを取得：フォームの公開設定から埋め込みコードをコピーします。※下にキャプチャあり

2. STUDIOの問い合わせページへの埋め込み：STUDIOのデザインエディタから設置したいページを作成し、編集画面で、埋め込みたい場所にHTMLブロックを追加し、取得したコードを貼り付けます。※下にキャプチャあり

1のJotformの設定画面にてJSコードのコピー

2のSTUDIOへの埋め込み方法（STUDIOの詳細な説明は割愛させていただきます。）

4.2 見積フォーム埋め込みのメリット

• ユーザーエクスペリエンスの向上：ユーザーがWebサイト上で直接見積を確認できるため、問い合わせの手間が省けます。

• リード獲得の増加：簡単に見積を確認できることで、リード獲得のチャンスが増えます。（フォームの作り方にもよります。）

• ブランドイメージの向上：高度な機能を持つWebサイトは、企業のプロフェッショナルなイメージを強化します。

5. Hubspotとの連携

5.1 Hubspotの概要

Hubspotは、マーケティング、セールス、カスタマーサービスのための包括的なプラットフォームを提供するツールです。2006年に設立されたHubspotは、インバウンドマーケティングの概念を提唱し、企業が顧客との関係を築き、維持し、成長させるのを支援するための一連のツールを提供しています。Hubspotのプラットフォームは、CRM（顧客関係管理）、マーケティングオートメーション、セールス自動化、カスタマーサービスの機能を統合しており、企業が顧客ライフサイクル全体を管理できるようにします。

5.2 Hubspotの特徴

Hubspotは、その包括的な機能と使いやすさで多くの企業に支持されています。以下に、Hubspotの主な特徴を紹介します。

• 一元管理：すべての顧客データとやり取りを一元管理し、チーム全体で共有することができます。これにより、顧客の状況を把握し、よりパーソナライズされたサービスを提供することが可能です。

• 自動化機能：マーケティング、セールス、カスタマーサービスの各プロセスを自動化することで、業務効率を大幅に向上させることができます。リードの追跡、メールキャンペーンの実行、フォローアップの自動化などが含まれます。

• データ分析：詳細なデータ分析機能を提供し、マーケティングキャンペーンや営業活動の効果をリアルタイムで測定・分析することができます。これにより、戦略の改善と意思決定をサポートします。

• 使いやすさ：直感的なインターフェースと豊富なリソースが揃っており、誰でも簡単に使い始めることができます。また、Hubspotアカデミーでは、多くの無料トレーニングリソースを提供しています。

5.3 JotformとHubspotの連携手順

フォームから送信された問い合わせ内容をHubspotに連携し、効率的に管理します。

1. JotformとHubspotの連携設定：すでにHubspotのアカウントをお持ちの前提で進めます。Jotformの設定メニューから「Integrations」を選び、Hubspotとの連携を設定します。

2. Hubspotへのログイン情報入力：Jotformの連携設定画面で、Hubspotのログイン情報を入力します。連携設定内で、どのフォームデータがHubspotのどのフィールドに対応するかをマッピングします。これにより、Jotformのフォームで収集されたデータが自動的にHubspotに送信されます。

3. 連絡先と取引情報の設定：フォーム送信後に連絡先や取引情報が適切にHubspotに登録されるようになります。

2のJotformでの連携設定とフィールド同士のマッピング例

3の実際にHubspot上に案件登録が行われ連絡先情報まで登録されていることが確認できます。

この連携により、問い合わせ内容が自動的にHubspotに反映され、効率的な問い合わせ管理が可能になります。

5.4 連携のメリット

• 効率的な問い合わせ管理：フォームから送信されたデータが自動でHubspotに登録されるため、手作業での入力が不要になります。

• データの一元管理：顧客データを一元管理することで、営業活動やマーケティング活動の効率が向上します。

• 迅速なフォローアップ：問い合わせ内容が即座にHubspotに登録されるため、迅速なフォローアップが可能になります。

6. 業務効率化と費用対効果

6.1 メール以外で通知を受け取る

お客様が問い合わせを完了すると、お客様及び自社にもメールにて通知が送信されます。ただ、最近は社内外のコミュニケーションはメールよりも各種チャットサービスで行う機会が増えていると思います。Jotformもメールによる通知だけでなく、SlackやDiscordへ通知を送ることも可能です。
※Jotformが連携しているコミュニケーションツールについてはJotformのホームページにてご確認いただけます

Slackと連携して通知を受け取った画面

6.2 業務効率化の視点

ノーコードツールを活用することで、業務効率が大幅に向上します。特に、以下の点で効率化が期待できます：

• 開発時間の短縮：ノーコードツールを使うことで、従来の開発手法に比べて大幅に時間を短縮できます。

• 人的リソースの最適化：技術者以外のメンバーも開発に参加できるため、人的リソースを有効活用できます。

• プロセスの自動化：フォームデータの連携や顧客管理の自動化により、手作業の負担を軽減できます。

6.23費用対効果の視点

ノーコードツールは、コストパフォーマンスにも優れています。具体的には、以下の点が挙げられます：

• 開発コストの削減：専門の開発者を雇う必要がなく、開発コストを大幅に削減できます。

• ツールの低コスト化：多くのノーコードツールは低コストで利用可能であり、中小企業でも導入しやすい価格設定となっています。

• 迅速なROI：短期間でプロジェクトを立ち上げることができるため、迅速に投資対効果（ROI）を実現できます。

7. WordPressのカスタマイズやiPaaSの手間を省く

7.1 WordPressのカスタマイズ不要

従来、WordPressのようなカスタマイズできるCMSを使って同様の機能を実現するには、専門的な知識とスキルが必要でした。プラグインの選定やカスタマイズ、保守管理といった作業が発生し、時間とコストがかかることが多かったです。しかし、STUDIOとJotformを活用することで、これらの手間を大幅に削減できます。ノーコードで簡単に高機能なフォームを作成し、埋め込むことができるため、特別な技術や知識は不要です。

7.2 iPaaSの手間を省く

現代において、iPaaS（Integration Platform as a Service）を利用することで、ほぼすべてのITサービス同士の連携が可能になっています。しかし、ノーコードといえども、非エンジニアにとってはとっつきづらく、ハードルが高いことが少なくありません。今回のような連携はiPaaSを利用することでも実装できますが、STUDIO、Jotform、Hubspotの各サービス同士の直接的な連携のみで実現できることがポイントです。

STUDIOとJotform、Hubspotの組み合わせを利用することで、iPaaSを使わずにシームレスな連携を実現できます。これにより、システムの設定やメンテナンスにかかる手間を省き、本来のビジネスに集中できるようになります。非エンジニアでも簡単に設定できるため、時間とコストを節約しながら、効率的に業務を進めることができます。

8. まとめ

STUDIOとJotformを活用することで、ノーコードで効率的にWebサイト上で概算見積フォームを実装し、Hubspotに連携して問い合わせ管理を一気通貫で行うことが可能です。これにより、Webサイトの訪問者に対して迅速かつ正確な情報提供ができ、ビジネスの効率化と顧客満足度の向上が期待できます。

さらに、ノーコードツールの利用は、業務効率の向上や費用対効果の観点からも大きなメリットをもたらします。従来のWordPressのカスタマイズやiPaaSの設定といった手間を省きながら、高機能なフォームと連携を実現できる点は大きな魅力です。

STUDIOとJotform、Hubspotの強力な連携を活用し、あなたのビジネスを次のステージへと引き上げましょう。

さらに、条件によって表示・非表示を切り替えたり、台数制限を管理したりするような複雑な予約フォームの作成に挑戦したい場合は、STUDIOで条件付き表示を活用した予約フォームを作る方法：Jotformで観光農園の複雑な予約を管理という記事で詳細な解説をしています。特に観光農園やイベント向けの予約システムを考えている方は、ぜひこちらもチェックしてみてください。