EuroCMS Form

by Imri Paloja

HTML

<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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script id="eurocms_form_script" src="https://eurobytes.eu/post"></script>

<div class="wrapper">
  <div class="content">
    <section class="container" id="Contacts">
      <h1>Contacts</h1>

      <p>For questions, please fill out the contact form</p>

      <div class="text-align-left">
        <div id="eurocms-feedback-form">
          Loading contact form <i class="fa-solid fa-spinner fa-spin"></i>
        </div>

        <p>Characters remaining: <span id="charCount">1024</span></p>
      </div>
    </section>
  </div>
</div>

<script type="text/javascript">
  $(function () {
    $("#eurocms-feedback-form").EuroCMSForm({
      agreementMessage:
        'Accept Data <a target="_blank" href="/privacy.html">Privacy Policy</a> & Acceptable Use Policy',
      messageTitle: "Contact Form",
      messageSubmit: "Submit",
      messageThankYou:
        "Thank you for your inquiry (#%s)! We'll contact you as soon as possible.",
      debug: false,
      showTitle: true,
      modal: false,
      noCSS: false,
      attachmentSupport: false,
    })
  })

  function initializeTextarea() {
    const textarea = document.getElementById("eurocms-form-body-inline")
    const charCount = document.getElementById("charCount")
    const maxChars = 1024

    textarea.addEventListener("input", function () {
      const remainingChars = maxChars - textarea.value.length
      charCount.textContent = remainingChars

      if (remainingChars < 0) {
        textarea.value = textarea.value.slice(0, maxChars)
        charCount.textContent = 0
      }
    })
  }

  function checkAndInitialize() {
    if (document.getElementById("eurocms-form-body-inline")) {
      initializeTextarea()
    } else...

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 1%;
}
input:not(#eurocms-form-agreement-inline),
textarea,
button {
  width: 100%;
}

#eurocms-form-agreement-inline {
  margin: 2px 3px;
}

JavaScript

;(function ($) {
  var pluginName = "EuroCMSForm",
    defaults = {
      lang: undefined,
      debug: false,
      noCSS: false,
      prefixCSS: "eurocms-form-",
      showTitle: false,
      messageTitle: "EuroCMS Form",
      messageSubmit: "Submit",
      messageThankYou:
        "Thank you for your inquiry! We'll contact you as soon as possible.",
      messageNoConfig:
        "Unable to load form config from server. Maybe feature is disabled.",
      attachmentSupport: false,
      attributes: [
        {
          display: "Name",
          name: "name",
          tag: "input",
          type: "text",
          id: "eurocms-form-name",
          required: true,
          placeholder: "Your Name",
          defaultValue: "",
        },
        {
          display: "Email",
          name: "email",
          tag: "input",
          type: "email",
          id: "eurocms-form-email",
          required: true,
          placeholder: "Your Email",
          defaultValue: "",
        },
        {
          display: "Message",
          name: "body",
          tag: "textarea",
          id: "eurocms-form-body",
          required: true,
          placeholder: "Your Message",
          defaultValue: "",
          rows: 7,
        },
      ],
      translations: {
        // ZAMMAD_TRANSLATIONS_START
        cs: {
          Attachments: "Přílohy",
          Email: "Email",
          Message: "Zpráva",
          Name: "Jméno",
          "Your Email": "Váš e-mail",
          "Your Message": "Vaše zpráva…",
          "Your Name": "Vaše jméno",
        },
        de: {
          Attachments: "Anhänge",
          Email: "E-Mail",
          Message: "Nachricht",
          Name: "Name",
          "Your Email": "Ihre E-Mail",
          "Your Message": "Ihre Nachricht…",
          "Your Name": "Ihr Name",
        },
        es: {
          Attachments: "Adjuntos",
          Email: "Correo electrónico",
          Message: "Mensaje",
          Name:...