<!-- CRM Web-to-Lead Integration Form -->
<form action="https://api.zooby.app/api/public/crm/leads?token=wtl_3d1b0ca7-d93d3dae5ed-8ce" method="POST" id="crm-web-to-lead-form" style="max-width: 420px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<div style="margin-bottom: 14px;">
<label style="display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px;">Full Name *</label>
<input type="text" name="name" required style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; outline: none;" placeholder="John Doe" />
</div>
<div style="margin-bottom: 14px;">
<label style="display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px;">Email Address</label>
<input type="email" name="email" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; outline: none;" placeholder="john@example.com" />
</div>
<div style="margin-bottom: 14px;">
<label style="display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px;">Phone Number</label>
<input type="tel" name="phone" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; outline: none;" placeholder="+919876543210" />
</div>
<div style="margin-bottom: 14px;">
<label style="display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px;">Requirements / Message</label>
<textarea name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; outline: none; resize: vertical;" placeholder="Tell us about your requirements..."></textarea>
</div>
<!-- You can add any custom input fields here (e.g. <input name="budget" />) and they will be automatically captured in the CRM opportunity notes -->
<button type="submit" style="width: 100%; background-color: #6366f1; color: white; border: none; padding: 12px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background 0.2s;">Submit Inquiry</button>
</form>
<script>
document.getElementById('crm-web-to-lead-form').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
try {
const response = await fetch(this.action, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
if (response.ok) {
alert('Inquiry sent successfully!');
this.reset();
} else {
alert('Error: ' + (result.error || 'Failed to submit inquiry'));
}
} catch (err) {
console.error(err);
alert('An error occurred during submission.');
}
});
</script>