Feedback modal

by ckissi

JavaScript

(function () {
  const modalHTML = `
    <style>
      #myModal {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        border: 1px solid #ccc;
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        max-width: 300px;
      }

      #myModal input[type="text"],
      #myModal input[type="email"],
      #myModal input[type="button"] {
        display: block;
        width: 100%;
        margin-bottom: 10px;
      }

      #myModal input[type="button"] {
        padding: 10px;
        background-color: #007BFF;
        color: white;
        border: none;
        cursor: pointer;
      }

      #myModal input[type="button"]:hover {
        background-color: #0056b3;
      }

      #myModal label {
        font-weight: bold;
      }

      #myModal span {
        font-size: 20px;
        cursor: pointer;
      }
    </style>
    <div id="myModal">
      <span onclick="toggleModal()">&times;</span>
      <div id="myForm">
        <form id="myForm">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name"><br>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email"><br>
          <input type="button" value="Submit" onclick="submitForm()">
        </form>
      </div>
    </div>
  `;

  const modalContainer = document.createElement('div');
  modalContainer.innerHTML = modalHTML;
  document.body.appendChild(modalContainer);

  function toggleModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'block' : 'none';
  }

  function submitForm() {
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;

    const data = {
      name: name,
      email: email
    };

    fetch('https://your-server-url.com/endpoint',...