Studio × HubSpot × Stripe連携検証 - マルチステップフォームと決済フロー

実施内容

Studio で制作されたWebサイトに、複数ページにまたがるマルチステップフォーム、HubSpot への自動データ送信、Stripe 決済へのシームレスな遷移を組み込めるかを検証するプロジェクトです。

実装の背景と課題

クライアントの要件は、以下のようなユーザーフロー実現の可能性を探ることでした：

1. 複数ページの選択フォーム: ユーザーが複数ページにまたがって商品画像やオプションを選択
2. データの持ち回し: ページをまたいでも選択情報を保持
3. HubSpot連携: 最終ページで選択内容をHubSpotのフォームへ自動送信
4. Stripe決済: HubSpotのデータをもとに、あらかじめ作成した決済ページへユーザーを案内

Studio の標準機能では複数ページのフォーム状態管理やAPIとの柔軟な連携に制限があるため、カスタムコードを組み合わせて実装検証を進めました。

技術的なアプローチ

SessionStorageを活用した状態管理

複数ページ間でフォーム入力値を保持するため、ブラウザの SessionStorage を採用しています。

メリット:

• ブラウザネイティブなAPI で外部ライブラリ不要
• ページリロードでも値が保持される
• セッション終了時に自動削除される（プライバシー安全）

実装ポイント:

• 各ページで id 属性を持つフォーム要素の入力値をリアルタイムで保存
• ページ読み込み時に SessionStorage から値を復元
• ページ遷移時も状態が継続する

HubSpot API とのデータ連携

HubSpot の公式フォーム機能をカスタマイズすることで、複数ページからの複合データを一度に送信する仕組みを実装しています。

工夫点:

• HubSpot公式コードの動作を分析し、送信条件やデータマッピングをカスタマイズ
• SessionStorage に保存されたフォーム値を、HubSpotの期待する形式に整形
• 最終ページのクエリーパラメーター化により、Stripe決済ページへのユーザー案内も自動化

Stripe 決済への案内

確認・送信ページでユーザーがフォーム送信すると、そのタイミングで：

• SessionStorage 内のすべてのフォーム値をクエリーパラメーターに変換
• あらかじめ作成した Stripe 決済ページのURLにパラメーターを付与して遷移
• Stripe側では、受け取ったパラメーターから商品情報や顧客情報を復元

検証から得た学習ポイント

1. プロトタイプアプローチの有効性

完全な本実装ではなく、最小限の機能をコンパクトに落とし込んだプロトタイプを先に作成することで、技術的な課題と可能性を短期間で確認できました。これにより、クライアント側の判断材料を早期に提供できます。

2. SessionStorageの制約と工夫

• JSON形式の複雑なデータは可能な限りシンプルに
• セッション終了時にデータが消えるため、ユーザーの中断・再訪問には対応不可（その場合はDBやLocalStorageの検討が必要）
• ブラウザのプライベートモードではSessionStorageが利用できない環境も考慮が必要

3. ノーコードツールとカスタムコードの境界線

Studio は視覚的に直感的なページ設計が強みですが、複数ページにまたがる状態管理やAPI連携の複雑なロジックは、標準機能の範囲を超えることが多くあります。カスタムコードとの組み合わせにより、その制限を補うことが可能です。

弊社がご協力できる範囲

Studio で制作したい場合、以下のようなシーンで弊社のサポートが活躍します：

• 複数ページにまたがるフォーム状態管理: SessionStorageやURLパラメーターを活用した段階的データ保持
• 外部サービス連携: HubSpot、Stripe、Google Sheets など、複数のAPI を組み合わせたフロー設計
• カスタムコードの実装と検証: Studio標準機能で実現できないロジックの実装と、その動作確認

このように、Studio の制作効率を活かしながら、必要な高度な機能は適切なカスタムコードで補うというハイブリッドなアプローチで、より柔軟なWeb体験を実現できます。

ご質問やご相談があれば、画面右下のチャットよりお気軽にお問い合わせください。

関連サービス

• 技術顧問・ディレクション →
• ノーコードツール活用支援 →