Comment on page
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="[email protected]" 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>
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",
...
}
Last modified 2yr ago