既存サイトのデザインを維持してHubSpotフォームへの切り替え【東証プライム系列】株式会社メルカート様

株式会社ソフトクリエイト（東証プライム：3371）系列の株式会社メルカート様（東京都港区）より、サービス紹介サイトに設置されていた既存フォームを HubSpot フォームへ切り替える対応を行いました。フォームはユーザーとの最初の接点でもあるため、デザインや動作、既存運用との整合性を保ちながらスムーズな移行を意識して進めました。
資料請求・お問合せ | クラウドECサイト構築プラットフォーム【メルカート】

既存フォームからのスムーズな移行

• キービジュアル埋め込みフォーム
• テーブルレイアウトのフォーム
• 通常のフォーム

HubSpotフォームは外部サイトへの埋め込みが柔軟で、今回のサイトにも大きな修正を伴わず導入できました。デザイン面ではCSSのクラス割り当てのみでほぼ対応が完結し、バリデーションに関しても同様にCSSを当てるだけで再現可能でした。

移行時に工夫したポイント

• 既存デザインの再現をCSSのみで完結させ、コードの影響範囲を最小化
• HubSpot側のバリデーション仕様に合わせ、エラー表示も自然な見え方に調整
• JavaScriptの設定オプションが豊富で、旧フォームの挙動を引き継ぎやすかった

ラベルを参照 .hs-form-field > label
INPUTタグを参照 .hs-form-field > .hs-input

実装面でも大きなトラブルはなく、既存フォームからの置き換えとしては非常に良いツールだと感じました。

多様なフォーム・CMS経験が活きた部分

これまで Pardot、SATORI、Contact Form 7 など多様なフォーム管理ツールを扱ってきた経験から、HubSpot の仕様理解やデータの受け渡しもスムーズに進められました。

対応がスムーズだった理由

• MAツール特有のフィールド管理やデータマッピングの知識が共通している
• フォーム埋め込み時の CSS・スクリプト競合を事前に予測しやすい
• HubSpotの概念が他ツールと近く、初見でも違和感なく扱えた

結び

今回の HubSpot フォーム切り替えでは、デザイン維持・動作の安定・運用面でのメリットの全てを両立させる形で移行が完了しました。実際に触れてみても、HubSpot は扱いやすさと柔軟性のバランスが良く、フォームや簡易的なマーケティングオートメーションの導入として非常に良い選択肢だと感じました。今後の運用においても、データ活用の基盤として役立つものになるはずです。