Desk360 Docs
  • Introduction to Desk360
  • 🚀Quick Start Guide
  • Start
    • Sign Up
    • Verify Your Email
    • Add Product/Brand
    • Channel Integration
    • Add User
    • Invite Your Team
  • User Communication Channels
    • In-App Message Box Channel
    • Web Contact Us Channel
    • Email Channel
    • Apple App Store Channel
    • Google Play Store Channel
    • Huawei AppGallery Channel
    • WhatsApp Channel
    • Live Chat Channel
    • Instagram Channel
    • Facebook Channel
    • Twitter Channel
  • Desk360 Platform Navigation
    • Dashboard
    • Tickets
      • Creating Internal Tickets
      • Listing and Filtering
      • Multiple Operations
      • Actions
      • Ticket Details
      • Ticket Status
      • Ticket Types
      • Ticket Reasons
      • Ready Answers
      • Ticket History Log
      • Callback Function
      • Automatic Replies
        • Automatic Replies During Working Hours
      • Automatic Assignments
      • Assignment by Request Type
      • Prioritization Rules
        • Setting Priorities
        • Creating Folders
      • SLA Management
      • Business Hours
      • Tag Management
    • Chat
      • Chat Settings
      • Automatic Assignments
      • Manual Assignments
      • Human Agent Functionality
      • Custom Chatbots
      • Chat History Forwarding
      • Bulk Actions
    • Reports
      • Ticket Reports
        • Ticket Analysis Reports
        • User Performance
      • Chat Reports
        • Chat Reports
        • User Reports
        • Chat Cockpit
      • SLA Reports
    • Product and Communication Channel Integrations
      • In-App Message Box Channel Integration
        • In-App Message Box Integration Settings
        • Customizable In-App Message Box
        • In-App Message Box Notifications
      • Web Contact Us Channel Integration
        • Web Contact Us Form
        • FAQ and Contact Us Page Settings
          • General Settings
          • FAQ Settings
          • Contact Us Page Settings
      • Email Channel Integration
        • Gmail SMTP Integration
        • Yandex SMTP Integration
        • Outlook SMTP Integration
        • E-mail features
      • Apple App Store Channel Integration
      • Google Play Store Channel Integration
      • Huawei AppGallery Channel Integration
      • WhatsApp Channel Integration
        • WABA Prerequisites
        • New WhatsApp Business API Pricing
        • WhatsApp Integration Steps
        • WhatsApp Auto-Reply Function
        • WhatsApp Custom Bots
        • WhatsApp Message Templates
        • How to use WhatsApp Message Templates
        • WhatsApp Message Template Statistics
        • WhatsApp Web Widget
      • Live Chat Channel Integration
      • Facebook Channel Integration
      • Instagram Channel Integration
      • Twitter Channel Integration
    • Chatbot Integration
    • Settings
      • Import Data
      • Language Settings
      • Professional Support In 40 Languages
    • Users
      • User Groups
      • User Roles
      • User Settings
  • INTEGRATIONS
    • JIRA
    • Slack
    • Trello
    • Alotech
  • Desk360 Mobile SDK
    • iOS SDK
    • Android SDK
    • Flutter SDK
    • React Native SDK
  • DESK360 MOBILE CHAT SDK
    • Mobile Chat iOS SDK
    • Mobile Chat Android SDK
  • DESK360 API (1.0.0)
    • API Documentation
Powered by GitBook
On this page

Was this helpful?

  1. Desk360 Platform Navigation
  2. Product and Communication Channel Integrations
  3. Web Contact Us Channel Integration

Web Contact Us Form

With the Web Contact Us integration, you can respond and manage the contact forms filled out by your customers on your website by converting them into tickets on the Desk360 platform. You can copy the HTML formatted code we share on the Desk360 platform with the click of a button and use it for the Contact Us page of your website.

<div id="supportFormInfo"></div>
<form action="javascript:;" onsubmit="formSubmit(this)" id="supportForm">
<input type="hidden" id="web_key" name="web_key" value="abc123">
<div class="form-group">
<label for="name">Name Surname</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name Surname" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<label for="type_id">Support Type</label>
<select class="form-control" id="type_id" name="type_id" required>
    <option value="">Select</option>
    <option value="1">Subscription</option>
    <option value="2">Features</option>
    <option value="3">Report a problem</option>
    <option value="4">Comment/Suggestion</option>
    <option value="5">Other</option>
</select>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" rows="3" required></textarea>
</div>
<div class="form-group">
<button type="submit" id="supportFormSubmit" class="btn btn-primary">SEND</button>
</div>
</form>
<script type="text/javascript">
function formSubmit(e) {
var form            = document.getElementById("supportForm"),
    formSubmit      = document.getElementById("supportFormSubmit"),
    formInfo        = document.getElementById("supportFormInfo"),
    formName        = document.getElementById("name"),
    formEmail       = document.getElementById("email"),
    formSubject     = document.getElementById("subject"),
    formSupportType = document.getElementById("type_id"),
    formMessage     = document.getElementById("message"),
    formWebKey      = document.getElementById("web_key"),
    formSuccesMsg   = "<strong>Success!</strong> Thank you, your message was sent successfully.",
    formErrorMsg    = "<strong>Error!</strong> Your message has not been sent. Please try again.",
    xhr             = new XMLHttpRequest();
formSubmit.setAttribute("disabled","disabled");
xhr.open("POST", "https://subdomain.desk360.com/api/v1/forms");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function() {
    var response = JSON.parse(this.response);
    if (this.status === 200 && response.meta.success === true) {
    formInfo.innerHTML = "<div class=\"alert alert-success\">" + formSuccesMsg + "</div>";
    form.reset();
    } else if (this.status !== 200 && response.meta.success === false)  {
    formInfo.innerHTML = "<div class=\"alert alert-danger\">" + response.meta.error.message + "</div>";
    } else {
    formInfo.innerHTML = "<div class=\"alert alert-danger\">" + formErrorMsg + "</div>";
    }
    formSubmit.removeAttribute("disabled","disabled");
};
xhr.send(
    "name=" + formName.value +
    "&email=" + formEmail.value +
    "&subject=" + formSubject.value +
    "&type_id=" + formSupportType.value +
    "&message=" + formMessage.value +
    "&web_key=" + formWebKey.value
);
}
</script>

Optional Field

By adding any settings field in the copied code, you can save different entries to your own code system. When saving the form, you must submit the fields you want to add in JSON format as shown in the example below.

{
    "field1": "content1",
    "field2": "content2",
    ...
}
PreviousWeb Contact Us Channel IntegrationNextFAQ and Contact Us Page Settings

Last updated 4 years ago

Was this helpful?