اتصل بنا بشكل منبثق تعمل 100%

<style>

    .custom-contact-popup {

      display: none;

      position: fixed;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      background-color: #fff;

      padding: 40px;

      border-radius: 8px;

      width: 600px;

      box-sizing: border-box;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      z-index: 1000;

    }

    .custom-label {

      display: block;

      margin-bottom: 10px;

      font-weight: bold;

      color: #333;

    }

    .custom-input,

    .custom-textarea {

      width: 100%;

      padding: 12px;

      margin-bottom: 20px;

      box-sizing: border-box;

      border: 1px solid #ccc;

      border-radius: 4px;

      font-size: 14px;

    }

    .custom-button {

      background-color: #6c983f;

      color: #fff;

      padding: 15px;

      border: none;

      border-radius: 4px;

      cursor: pointer;

      font-size: 16px;

      width: 100%;

      box-sizing: border-box;

      transition: background-color 0.3s;

    }

    .custom-button:hover {

      background-color:#547a2c;

    }

    .custom-overlay {

      display: none;

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.5);

      z-index: 999;

    }

    .custom-close-button {

     position: absolute;

    top: 4px;

    left: 42px;

    cursor: pointer;

    font-size: 33px;

    color: #000;

    }

.custom-close-button:hover {

    color: #6c983f;

    }

    @media only screen and (max-width: 768px) {

      .custom-contact-popup {

        width: 90%;

      }

    }

    @media only screen and (max-width: 480px) {

      .custom-contact-popup {

        width: 95%;

      }

    }

  </style>

<button class="custom-button" onclick="openCustomContactForm()">Open Contact Form</button>

<div class="custom-overlay" onclick="closeCustomContactForm()"></div>

<div class="custom-contact-popup">

  <span class="custom-close-button" onclick="closeCustomContactForm()">×</span>

  <form action="https://formsubmit.co/xxxxxxxxxxxxxxxxxx" method="POST">

    <label class="custom-label" for="name">Name:</label>

    <input class="custom-input" type="text" id="name" name="name" required=""/>

    <label class="custom-label" for="email">Email:</label>

    <input class="custom-input" type="email" id="email" name="email" required=""/>

    <label class="custom-label" for="message">Message:</label>

    <textarea class="custom-textarea" id="message" name="message" rows="4" required></textarea>

    <button class="custom-button" type="submit">Submit</button>

  </form>

</div>

<script>

  function openCustomContactForm() {

    document.querySelector(".custom-contact-popup").style.display = "block";

    document.querySelector(".custom-overlay").style.display = "block";

  }

  function closeCustomContactForm() {

    document.querySelector(".custom-contact-popup").style.display = "none";

    document.querySelector(".custom-overlay").style.display = "none";

  }

</script>