Zoho CRM Integration Instructions

This document provides instructions for integrating the Request Demo form with Zoho CRM.

Integration Options​

Option 1: Zoho CRM Web-to-Lead Form (Recommended for Quick Setup)​

1. Create a Web Form in Zoho CRM:

   • Log in to Zoho CRM
   • Go to Setup > Channels > Webforms
   • Create a new webform with the following fields:
     • Full Name (First Name + Last Name)
     • Email
     • Company
     • Phone
     • Job Title
     • Company Size (Picklist)
     • Country
     • Solutions Interest (Multi-select)
     • Message (Text Area)
     • Preferred Demo Date

2. Get the Form Endpoint:

   • After creating the form, Zoho will provide a form submission URL
   • Example: https://crm.zoho.com/crm/WebToLeadForm

3. Update the Form Submission:

   • In src/pages/request-demo/index.tsx, update the handleSubmit function:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  if (!validateForm()) {
    return;
  }

  setIsSubmitting(true);

  try {
    const formPayload = new FormData();
    formPayload.append('First Name', formData.fullName.split(' ')[0]);
    formPayload.append('Last Name', formData.fullName.split(' ').slice(1).join(' ') || '-');
    formPayload.append('Email', formData.email);
    formPayload.append('Company', formData.company);
    formPayload.append('Phone', formData.phone);
    formPayload.append('Job Title', formData.jobTitle);
    formPayload.append('Company Size', formData.companySize);
    formPayload.append('Country', formData.country);
    formPayload.append('Solutions Interest', formData.solutions.join(', '));
    formPayload.append('Description', formData.message);
    formPayload.append('Preferred Demo Date', formData.preferredDate);

    const response = await fetch('YOUR_ZOHO_WEBFORM_URL', {
      method: 'POST',
      body: formPayload,
      mode: 'no-cors', // Required for Zoho webforms
    });

    // Redirect to thank you page
    history.push('/request-demo/thank-you');
  } catch (error) {
    console.error('Form submission error:', error);
    alert('There was an error submitting your request. Please try again.');
  } finally {
    setIsSubmitting(false);
  }
};

Option 2: Zoho CRM REST API (Recommended for Full Control)​

1. Set up Zoho OAuth:

   • Create a Zoho API Console account
   • Register your application
   • Get Client ID and Client Secret
   • Set up OAuth2 authentication

2. Create a Backend API Endpoint:

   • Create a serverless function (e.g., Netlify Functions, Vercel API Routes)
   • Handle Zoho API authentication
   • Submit lead data to Zoho CRM

3. Example Backend Function:

// api/submit-demo-request.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { fullName, email, company, phone, jobTitle, companySize, country, solutions, message, preferredDate } = req.body;

  // Get Zoho access token (implement OAuth flow)
  const accessToken = await getZohoAccessToken();

  // Prepare lead data
  const leadData = {
    data: [{
      First_Name: fullName.split(' ')[0],
      Last_Name: fullName.split(' ').slice(1).join(' ') || '-',
      Email: email,
      Company: company,
      Phone: phone,
      Designation: jobTitle,
      Company_Size: companySize,
      Country: country,
      Solutions_Interest: solutions.join(', '),
      Description: message,
      Preferred_Demo_Date: preferredDate,
      Lead_Source: 'Website - Request Demo',
      Lead_Status: 'Not Contacted'
    }]
  };

  // Submit to Zoho CRM
  const response = await fetch('https://www.zohoapis.com/crm/v2/Leads', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(leadData)
  });

  if (response.ok) {
    return res.status(200).json({ success: true });
  } else {
    return res.status(500).json({ error: 'Failed to submit lead' });
  }
}

Option 3: Zoho Flow Integration​

1. Create a Zoho Flow:

   • Sign up for Zoho Flow (https://flow.zoho.com)
   • Create a new flow with a webhook trigger
   • Connect it to Zoho CRM to create leads

2. Update Form to Use Webhook:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  if (!validateForm()) {
    return;
  }

  setIsSubmitting(true);

  try {
    const response = await fetch('YOUR_ZOHO_FLOW_WEBHOOK_URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      history.push('/request-demo/thank-you');
    } else {
      throw new Error('Submission failed');
    }
  } catch (error) {
    console.error('Form submission error:', error);
    alert('There was an error submitting your request. Please try again.');
  } finally {
    setIsSubmitting(false);
  }
};

Field Mapping​

Custom Fields Setup in Zoho CRM​

Create the following custom fields in Zoho CRM Leads module:

1. Company Size (Picklist)

   • Values: 1-10 employees, 11-50 employees, 51-200 employees, 201-500 employees, 501-1000 employees, 1000+ employees

2. Solutions Interest (Multi-select Picklist)

   • Values: Freight Forwarding, Ocean Freight, Air Freight, Trucking (LTL/FTL), Parcel Forwarding, Small Parcels & Last-Mile

3. Preferred Demo Date (Date field)

Security Considerations​

• Never expose Zoho API credentials in frontend code
• Use environment variables for sensitive data
• Implement rate limiting on backend endpoints
• Add CAPTCHA to prevent spam submissions
• Validate all input on both client and server side

Testing​

1. Test form submission with valid data
2. Test form validation with invalid data
3. Verify lead creation in Zoho CRM
4. Test email notifications
5. Verify redirect to thank you page

Troubleshooting​

• CORS errors: Use Zoho webforms or create a backend proxy
• Authentication errors: Check OAuth token expiration and refresh
• Field mapping errors: Verify custom field API names in Zoho CRM
• Missing leads: Check Zoho CRM assignment rules and workflow triggers