컨택트 폼 (RC Form)

파트너 폼 (자유 디자인)
    ↓ POST /api/v2/leads/external/
RealCatch API
    ↓ 저장 + 웹훅
Simple CRM (자동 고객 생성)
    ↓ 웹푸시
담당자 모바일 (즉시 알림)

POST https://api.realcatch.co.kr/api/v2/leads/external/
Authorization: Bearer {partner_api_key}
Content-Type: application/json

{
  "contact_code": "ABC12345",
  "name": "홍길동",
  "phone": "010-1234-5678",
  "visit_date": "2024-01-15",
  "message": "방문상담 희망합니다",
  "source_url": "https://partner-site.com/landing"
}

{
  "success": true,
  "lead_id": 12345,
  "message": "리드가 등록되었습니다.",
  "project_name": "DS부평",
  "contact_name": "김담당"
}

<div id="rc-form-container">
  <form id="rcForm">
    <h2 class="rc-form-title">방문 상담 신청</h2>
    <p class="rc-form-subtitle">담당자가 빠르게 연락드리겠습니다</p>
    
    <div class="rc-form-group">
      <label class="rc-form-label">이름 *</label>
      <input type="text" class="rc-form-input" id="rc-name" placeholder="홍길동" required>
    </div>
    
    <div class="rc-form-group">
      <label class="rc-form-label">연락처 *</label>
      <input type="tel" class="rc-form-input" id="rc-phone" placeholder="010-1234-5678" required>
    </div>
    
    <div class="rc-form-group">
      <label class="rc-form-label">방문 희망일</label>
      <input type="date" class="rc-form-input" id="rc-visit-date">
    </div>
    
    <div class="rc-form-group">
      <label class="rc-form-label">문의사항</label>
      <input type="text" class="rc-form-input" id="rc-message" placeholder="궁금한 점을 적어주세요">
    </div>
    
    <div class="rc-consent-group">
      <input type="checkbox" class="rc-consent-checkbox" id="rc-consent" required>
      <label class="rc-consent-text" for="rc-consent">
        개인정보 수집 및 이용에 동의합니다. <a href="#" target="_blank">자세히 보기</a>
      </label>
    </div>
    
    <button type="submit" class="rc-submit-btn" id="rc-submit-btn">상담 신청하기</button>
  </form>
  
  <div class="rc-success-message" id="rc-success-message" style="display:none;">
    <div class="rc-success-icon">✅</div>
    <h3 class="rc-success-title">신청이 완료되었습니다!</h3>
    <p class="rc-success-text">담당자가 곧 연락드리겠습니다.</p>
  </div>
</div>

#rc-form-container {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rc-form-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 8px;
}
.rc-form-subtitle {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 0 0 24px;
}
.rc-form-group {
  margin-bottom: 16px;
}
.rc-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.rc-form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rc-form-input:focus {
  border-color: #667eea;
}
.rc-consent-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 20px 0;
}
.rc-consent-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #667eea;
}
.rc-consent-text {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
.rc-consent-text a {
  color: #667eea;
}
.rc-submit-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.rc-submit-btn:hover {
  transform: translateY(-1px);
}
.rc-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.rc-success-message {
  text-align: center;
  padding: 24px;
}
.rc-success-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.rc-success-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px;
}
.rc-success-text {
  font-size: 14px;
  color: #666;
  margin: 0;
}

<script>
(function() {
  // ✅ 여기에 발급받은 값을 입력하세요
  const RC_API_KEY = 'YOUR_API_KEY';
  const RC_CONTACT_CODE = 'YOUR_CONTACT_CODE';
  
  const RC_API_URL = 'https://api.realcatch.co.kr/api/v2/leads/external/';
 
  document.getElementById('rcForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const btn = document.getElementById('rc-submit-btn');
    const originalText = btn.textContent;
    btn.disabled = true;
    btn.textContent = '전송 중...';
 
    const payload = {
      contact_code: RC_CONTACT_CODE,
      name: document.getElementById('rc-name').value,
      phone: document.getElementById('rc-phone').value,
      visit_date: document.getElementById('rc-visit-date').value || null,
      message: document.getElementById('rc-message').value,
      source_url: window.location.href,
      consent: document.getElementById('rc-consent').checked
    };
 
    try {
      const res = await fetch(RC_API_URL, {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + RC_API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      
      if (data.success) {
        document.getElementById('rcForm').style.display = 'none';
        document.getElementById('rc-success-message').style.display = 'block';
      } else {
        alert('전송 실패: ' + (data.message || '오류 발생'));
        btn.disabled = false;
        btn.textContent = originalText;
      }
    } catch (err) {
      alert('네트워크 오류가 발생했습니다.');
      btn.disabled = false;
      btn.textContent = originalText;
    }
  });
})();
</script>

.rc-submit-btn {
  /* 퍼플 테마 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* 그린 테마로 변경 */
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}