sekaistay.com LPに、内部ポータル(japanvillas.kss-cloud.com)と連携する2つのフォームを設置するための手順書です。
所要時間: 約20分(2ブロック設置) 問い合わせ: 吉田 / #claude-japan-villas
| # | 設置するもの | 方式 | LPに入れるコード |
|---|---|---|---|
| 1 | HubSpotリード獲得フォーム(問い合わせ/資料請求) | LP側でHTMLフォーム実装 + JS送信 | <form> + <script> |
| 2 | 物件診断レポート申請フォーム(3ステップ・自動レポート生成) | iframe埋込 | <iframe> + <script> |
[LP フォーム]
↓
japanvillas.kss-cloud.com の APIエンドポイント
↓
(1) HubSpot Contact 作成(または既存更新)
(2) HubSpot Deal 作成(Stage=「01 入力済み」)
(3) HubSpot Ticket 作成(新規・営業キュー化用・※スコープ追加後に有効化)
(4) Contact ⇄ Deal ⇄ Ticket 自動紐付け
(5) 内部ポータル `/ops/reports` に記録(レポート申請の場合)
(6) バックグラウンドでレポート自動生成(レポート申請の場合)
LPに貼り付けるHTMLサンプルです。このままコピペで動きます。
<!-- SEKAI STAY リード獲得フォーム -->
<form id="sekai-lead-form" novalidate>
<!-- honeypot(スパム対策・絶対に display:none で隠す) -->
<label style="position:absolute;left:-9999px;" aria-hidden="true">
Website(空欄のまま)
<input type="text" name="website" tabindex="-1" autocomplete="off">
</label>
<!-- 必須: メール -->
<label>
メールアドレス <span style="color:red">*</span>
<input type="email" name="email" required placeholder="[email protected]">
</label>
<!-- 推奨: 氏名 -->
<label>姓 <input type="text" name="lastname" placeholder="山田"></label>
<label>名 <input type="text" name="firstname" placeholder="太郎"></label>
<!-- 推奨: 電話 -->
<label>電話番号 <input type="tel" name="phone" placeholder="090-1234-5678"></label>
<!-- 推奨: 物件情報 -->
<label>物件タイプ
<select name="property_type">
<option value="">選択</option>
<option value="戸建">戸建</option>
<option value="VILLA">VILLA</option>
<option value="旅館">旅館</option>
<option value="マンション">マンション</option>
<option value="その他">その他</option>
</select>
</label>
<label>エリア <input type="text" name="area" placeholder="ニセコ"></label>
<label>部屋数 <input type="number" name="room_count" min="1" max="100"></label>
<label>推定月収(円) <input type="number" name="estimated_revenue" min="0"></label>
<label>オーナー種別
<select name="owner_type">
<option value="">選択</option>
<option value="個人">個人</option>
<option value="法人">法人</option>
</select>
</label>
<!-- 自動送信される隠しフィールド(LP側で動的セットするとHubSpotに流入元が記録される) -->
<input type="hidden" name="lp_url" value="">
<input type="hidden" name="utm_source" value="">
<input type="hidden" name="utm_medium" value="">
<input type="hidden" name="utm_campaign" value="">
<button type="submit">無料相談を申し込む</button>
<div id="sekai-lead-status"></div>
</form>
<script>
(function(){
var form = document.getElementById('sekai-lead-form');
var status = document.getElementById('sekai-lead-status');
// URL から UTM / lp_url を自動セット
var params = new URLSearchParams(window.location.search);
form.lp_url.value = window.location.href;
form.utm_source.value = params.get('utm_source') || '';
form.utm_medium.value = params.get('utm_medium') || '';
form.utm_campaign.value = params.get('utm_campaign') || '';
form.addEventListener('submit', function(e){
e.preventDefault();
status.textContent = '送信中...';
var data = {};
new FormData(form).forEach(function(v,k){ data[k] = v; });
fetch('https://japanvillas.kss-cloud.com/api/lp/owner-lead', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
})
.then(function(r){ return r.json(); })
.then(function(d){
if (d.ok) {
status.textContent = 'ありがとうございます。担当者よりご連絡いたします。';
form.reset();
} else {
status.textContent = '送信に失敗しました: ' + (d.error || 'unknown');
}
})
.catch(function(e){
status.textContent = 'ネットワークエラーが発生しました。時間をおいて再度お試しください。';
});
});
})();
</script>| 項目 | 内容 |
|---|---|
| 送信先API | POST https://japanvillas.kss-cloud.com/api/lp/owner-lead |
| CORS許可 | sekaistay.com / www.sekaistay.com / lp-ten-gamma.vercel.app は許可済 |
| スパム対策 | honeypot(website フィールドが非空でブロック) +
レート制限(同一IP 5req/分) + オプションで reCAPTCHA
v3(g-recaptcha-response をPOSTに付与すれば検証) |
| 作成されるHubSpotオブジェクト | Contact + Deal(Stage=「01 入力済み(フォーム送信完了)」)+ Ticket(新規・※tickets スコープ追加後) |
| 自動付与プロパティ | hs_lead_status=NEW / lifecyclestage=lead /
hs_analytics_source(UTM mediumから自動判定)/
jv_utm_* / jv_lp_url /
jv_form_submitted_at |
lead_source: リードの流入元カスタム値(空ならUTM
sourceを使用)g-recaptcha-response: reCAPTCHA v3
トークン(スコア0.5未満でブロック)curl -X POST -H "Origin: https://sekaistay.com" -H "Content-Type: application/json" \
"https://japanvillas.kss-cloud.com/api/lp/owner-lead" \
-d '{"email":"[email protected]","firstname":"テスト","lastname":"洸次郎","property_type":"VILLA","area":"ニセコ","room_count":"5","lp_url":"https://sekaistay.com/"}'成功時のレスポンス例:
{"ok":true,"contact_id":"473453796075","deal_id":"321352385266","ticket_id":"<id>","ticket_error":null}LPに貼り付けるコードです。このままコピペで動きます。
<!-- SEKAI STAY 物件診断レポート申請フォーム(ライトテーマ版) -->
<iframe
id="sekai-report-form"
src="https://japanvillas.kss-cloud.com/report-request?embed=1"
title="SEKAI STAY 物件診断レポート申請"
style="width:100%;max-width:640px;height:1900px;border:none;display:block;margin:0 auto;background:transparent;"
referrerpolicy="no-referrer-when-downgrade"
loading="lazy"
></iframe>
<script>
(function(){
window.addEventListener('message', function(e){
if (e.origin !== 'https://japanvillas.kss-cloud.com') return;
if (!e.data || e.data.type !== 'japan-villas-height') return;
var iframe = document.getElementById('sekai-report-form');
if (iframe && typeof e.data.height === 'number') {
iframe.style.height = (e.data.height + 24) + 'px';
}
});
})();
</script>LPの背景が黒/濃紺など濃い色の場合は、URLに
&theme=dark
を付けてください。カード背景・入力欄・文字色がダーク配色に切り替わります。
<iframe
id="sekai-report-form"
src="https://japanvillas.kss-cloud.com/report-request?embed=1&theme=dark"
title="SEKAI STAY 物件診断レポート申請"
style="width:100%;max-width:640px;height:1900px;border:none;display:block;margin:0 auto;background:transparent;"
referrerpolicy="no-referrer-when-downgrade"
loading="lazy"
></iframe>(<script>
部分はライトテーマ版と同一。使い回せます)
| 項目 | 内容 |
|---|---|
| 埋込方式 | iframe(?embed=1
クエリでLP埋込モード=ロゴ/フッター非表示・背景透過) |
| テーマ切替 | &theme=dark
を追加するとダーク配色へ切替(カード/入力欄/テキスト色)。省略時はライト |
| 高さ自動調整 | iframe内から親ページへ
postMessage({ type: 'japan-villas-height', height: N })
を送信。親側JSで高さ更新 |
| フロー | 3ステップ(①物件情報 ②売上・手数料 ③連絡先+課題)+ 完了画面「診断結果と詳細レポートを送ります」(24時間後の送信予定時刻・カウントダウン・年間損失コスト概算・ミーティング予約導線) |
| 送信先 | /api/report-requests/submit → 内部ポータル
/ops/reports に記録 → バックグラウンドでレポート自動生成 →
24時間後にメール自動送信(ポータル画面で内容確認・即時送信も可能) |
CSP frame-ancestors |
sekaistay.com / www.sekaistay.com / admin.kss-cloud.com / localhost は許可済 |
max-width:720px
等をお好みでheight:1900px は postMessage
で自動上書きされる。読込中の見た目だけ?embed=1
のみでライト、?embed=1&theme=dark でダーク| 症状 | 原因 | 対処 |
|---|---|---|
| iframeが空白 | CSP frame-ancestors に親origin未登録 |
吉田に連絡 |
| 高さが自動調整されない | <script> が貼られていない / e.origin
で弾かれている |
<script> をiframe直後に設置 / console
[jv] ... ログ確認 |
| スマホでフォーム小 | viewport meta欠如 | LP <head> に
<meta name="viewport" content="width=device-width, initial-scale=1">
を追加 |
/ops/reports
にも即時記録され、営業担当が事前に内容確認可能これらはコピペだけで動きます。追加のサーバー実装やデータベース連携は不要です。
[email protected]
等)を入力→送信→「ありがとうございます」が出ればOK&theme=dark 付きURLで配色が馴染むか目視確認)/ops/reports
を確認してもらうQ1. 既に lp-ten-gamma.vercel.app
がLPとして動いているが、これは置き換わる? →
いいえ。/api/lp/owner-lead
は両方のLPから同時に受け付けできます。lp-ten-gamma
を残したまま、sekaistay.com 配下に新LPを追加できます。
Q2. HubSpot Ticket が作成されない → 現在 HubSpot
Private App に tickets
スコープが未付与のため、ticket_error: "403: ..."
が返ります。レスポンスは ok: true で Contact/Deal
は作成されます。Ticketはスコープ追加後に自動で有効化します(コード変更不要)。
Q3. reCAPTCHA は必須? → 任意です。spam被害が出たら
<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
+ grecaptcha.execute(...) を追加してPOSTに
g-recaptcha-response
を付与してください。RECAPTCHA_SECRET
は吉蔵側で設定します。
Q4. フォームのデザインが LPトンマナと合わない → ①リード獲得フォーム: LP側のCSSでそのままスタイリング可能(標準HTML要素)。②レポート申請iframe: iframe内のデザインは固定(SEKAI STAYの内部デザインシステム準拠)。トンマナ調整が必要な場合は吉田に連絡。
Q5. 送信データをSlack通知したい → HubSpot Workflow で設定可能(Contact作成 → Slack通知)。HubSpot側で明神 洸次郎さんが設定すれば良い(吉蔵側の追加実装不要)。
Q6.
申請ごとに「チケット(Ticket)」も自動で作ってほしい →
既にコード実装済。現在はHubSpot Private Appの tickets
スコープが未付与のため ticket_error: "403: MISSING_SCOPES"
で失敗しますが、Contact/Dealは正常に作成されます。吉田が Private App
設定で tickets
スコープを追加してトークンを再発行すれば、コード変更なしで自動有効化します(追加作業不要)。
/api/lp/owner-lead(リード獲得API)本番稼働中 —
実テスト成功(Contact 473453796075 / Deal 321352385266)/report-request?embed=1(レポート申請iframe)本番稼働中 —
3ステップフォーム・スライダー・ボタン選択UI実装済frame-ancestors: sekaistay.com / www.sekaistay.com /
admin.kss-cloud.com 登録済最終更新: 2026-04-19 提供元: SEKAI STAY(株式会社セカイチ)/ 吉田