<aside> ❤️ New to Webflow? Support the Channel by using my Webflow-Affiliate Link https://webflow.grsm.io/webtotheflow

</aside>

<aside> 🚀 New to Make.com? ****https://bit.ly/wttf-make

</aside>

<script>
// © Code by Marvin Aziz, <https://www.webtotheflow.com/>
// Copyright 2023, Marvin Aziz, All rights reserved.
// You have the license to use this code in your projects but not to redistribute it to others

// This code helps you respond to a feedbackform with a personal message using Make.com & OpenAI
  document.addEventListener('DOMContentLoaded', function() {
    // Find the form
    var form = document.getElementById('email-form');

    // Find the result heading
    var resultHeading = document.getElementById('result-heading');

    // Find the loading element (Lottie) and hide it initially
    var loadingElement = document.getElementById('loading');
    loadingElement.style.display = "none";

    // Add an event listener to the form submit
    form.addEventListener('submit', function(e) {
      // Prevent default form submission
      e.preventDefault();

      // Get form values (adjust as needed)
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var feedback = document.getElementById('Feedback').value;

      // Hide the form and show the loading animation
      form.style.display = "none";
      loadingElement.style.display = "block";

      // Update the result heading text
      resultHeading.textContent = "Thank you " + name + "!";

      // Define your data
      var data = {
        name: name,
        email: email,
        feedback: feedback
      };

      // Send a POST request to the webhook
      fetch('<https://hook.eu1.make.com/YOUR-WEBHOOK-ID>', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        },
      })
      .then(function(response) {
        // Parse the response as text
        return response.text();
      })
      .then(function(body) {
        // Display the response data
        console.log(body)
        var resultElement = document.getElementById('result');
        if (resultElement) {
          resultElement.textContent = body; // directly assign the response body to textContent
          // Hide the loading animation
          loadingElement.style.display = "none";
        } else {
          console.error('No element with id "result" found to display the response data');
        }
      })
      .catch(function(error) {
        console.error('Error:', error);
      });
    });
  });
</script>