Zammad Feedback Form

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script
  id="zammad_form_script"
  src="https://helpdesk.eurobytes.eu/assets/form/form.js"
></script>

<div class="top container">
  <div id="zammad-feedback-form">
    Loading contact form <i class="fa-solid fa-spinner fa-spin"></i>
  </div>
</div>

CSS

html,
body {
  color: #454545;
}

.top.container {
  margin-top: 5%;
}

h2 {
  text-align: center;
}


.btn {
  width: 100%;
}

textarea {
  min-width: 100%;
  width: 100%;
  max-width: 100%;

  min-height: 250px;
  height: auto;
  max-height: 450px;
}

JavaScript

$(function () {
  $('#zammad-feedback-form').ZammadForm({
    messageTitle: 'Request Quotation', // optional
    messageSubmit: 'Submit Quotation', // optional
    messageThankYou:
      "Thank you for your inquiry (#%s)! We'll contact you as soon as possible.", // optional
    messageNoConfig:
      'Unable to load form config from server. Maybe feature is disabled.', // optional
    showTitle: true,
    //lang: 'de', // optional, <html lang="xx"> will be used per default
    modal: false,
    attachmentSupport: false,
    attributes: [
      {
        display: 'Name',
        name: 'name',
        tag: 'input',
        type: 'text',
        required: true,
        placeholder: 'Your Name',
        defaultValue: '',
      },
      {
        display: 'Email',
        name: 'email',
        tag: 'input',
        type: 'email',
        required: true,
        placeholder: 'Your Email',
        // defaultValue: function () {
        //   return User.email
        // },
      },
      {
        display: 'Company',
        name: 'company',
        tag: 'input',
        type: 'text',
        required: true,
        placeholder: 'Company B.V.',
        defaultValue: '',
      },
      {
        display: 'Role',
        name: 'role',
        tag: 'input',
        type: 'text',
        required: true,
        placeholder: 'CEO, Manager, ...',
        defaultValue: '',
      },
      {
        display: 'Business sector',
        name: 'sector',
        tag: 'input',
        type: 'text',
        required: true,
        placeholder: 'IT, Health, ...',
        defaultValue: '',
      },
      {
        display: 'Application type',
        name: 'application',
        tag: 'input',
        type: 'text',
        required: true,
        placeholder: 'PHP, Python, Node.JS',
        defaultValue: '',
      },
      {
        display: 'Message',
        name: 'body',
        tag: 'textarea',
        required:...