How to Submit a Contact Form on Your Website to Create a Zendesk Ticket

 Below is a step-by-step guide on how to create a 1:1 contact form on your website and integrate it to automatically generate tickets in Zendesk.

The following is an example for reference, and you should check the Zendesk API information for implementation.

✅ Goal

Data entered in the HTML form on the website → Sent to Zendesk as a ticket
👉 Result: A support ticket is automatically created in Zendesk

✅ Summary of Implementation Method

🧩 Method 1: When the End User Requests Directly (Zendesk Request API)

Zendesk provides the requests.json API so that non-member/customer users can also create tickets.

🔗 API Endpoint

POST https://{your_subdomain}.zendesk.com/api/v2/requests.json

📝 1. Example HTML Contact Form

<form id="inquiry-form">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Inquiry Content" required></textarea>
  <button type="submit">Submit Inquiry</button>
</form>

⚙️ 2. Code for Creating Zendesk Ticket Using JavaScript (Client-Side)

<script>
document.getElementById('inquiry-form').addEventListener('submit', async function (e) {
  e.preventDefault();

  const name = e.target.name.value;
  const email = e.target.email.value;
  const message = e.target.message.value;

  const response = await fetch('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('user@example.com/token:YOUR_API_TOKEN')  // Admin account authentication
    },
    body: JSON.stringify({
      request: {
        requester: { name, email },
        subject: `Website Inquiry: ${name}`,
        comment: { body: message }
      }
    })
  });

  if (response.ok) {
    alert('Your inquiry has been successfully submitted!');
  } else {
    alert('An error occurred. Please try again.');
  }
});
</script>

🔐 When using the format user@example.com/token, you must obtain and use the API token from the Zendesk Admin.
Zendesk → Admin Center > Apps and Integrations > API > Token Activation

🔄 Method 2: Server-Side Request (e.g., Node.js, PHP)

If you want to avoid exposing the API token in the browser for security reasons, it is also common to send the request from the server.

Node.js Example (Express)

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

app.post('/send-to-zendesk', async (req, res) => {
  const { name, email, message } = req.body;

  try {
    const response = await axios.post('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
      request: {
        requester: { name, email },
        subject: `Website Inquiry: ${name}`,
        comment: { body: message }
      }
    }, {
      auth: {
        username: 'user@example.com/token',
        password: 'YOUR_API_TOKEN'
      }
    });

    res.status(200).send({ success: true });
  } catch (error) {
    res.status(500).send({ error: error.message });
  }
});

👉 On the client side, you only need to send a POST request to /send-to-zendesk, so the API token is not exposed.

✅ Recommendations (Recommended)

✉️ Example Ticket Data (JSON)

{
  "request": {
    "requester": {
      "name": "John Doe",
      "email": "john@example.com"
    },
    "subject": "Website Inquiry",
    "comment": {
      "body": "This is a 1:1 inquiry."
    }
  }
}

🔐 How to Obtain Zendesk API Token

1. Access Zendesk Admin Center
2. Apps and Integrations > Zendesk API
3. Activate Token Access
4. Generate API Token → Remember it

📌 Conclusion

• Easily integrate with HTML form + JS or server code
• For security, it is recommended not to expose the token directly to the client
• If needed, automatic classification by group/field, file attachments, SLA designation, etc., can also be extended