Webflow Contact Form Integration

<form id="formapi-webflow" onsubmit="handleSubmit(event)">
  <label>Email:</label>
  <input type="email" name="email" required />

  <label>Message:</label>
  <textarea name="message" required></textarea>

  <button type="submit">Send</button>
</form>
<p id="success-message" style="color:green; display:none">Form submitted successfully!</p>
<p id="error-message" style="color:red; display:none"></p>

<script>
  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.email.value;
    const message = form.message.value;
    
    const successEl = document.getElementById('success-message');
    const errorEl = document.getElementById('error-message');
    successEl.style.display = 'none';
    errorEl.style.display = 'none';

    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message })
      });
      const data = await res.json();
      if (data.code === 200) successEl.style.display = 'block';
      else {
        errorEl.textContent = data.message || 'Something went wrong';
        errorEl.style.display = 'block';
      }
    } catch (err) {
      errorEl.textContent = err.message;
      errorEl.style.display = 'block';
    }
  }
</script>

<form id="formapi-webflow-file" onsubmit="handleSubmit(event)" enctype="multipart/form-data">
  <label>Email:</label>
  <input type="email" name="email" required />

  <label>File:</label>
  <input type="file" name="file" required />

  <button type="submit">Upload</button>
</form>
<p id="success-message" style="color:green; display:none">Form submitted successfully!</p>
<p id="error-message" style="color:red; display:none"></p>

<script>
  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.email.value;
    const file = form.file.files[0];

    const successEl = document.getElementById('success-message');
    const errorEl = document.getElementById('error-message');
    successEl.style.display = 'none';
    errorEl.style.display = 'none';

    if (!file) {
      errorEl.textContent = 'Please select a file';
      errorEl.style.display = 'block';
      return;
    }

    const formData = new FormData();
    formData.append('email', email);
    formData.append('file', file);

    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: formData
      });
      const data = await res.json();
      if (data.code === 200) successEl.style.display = 'block';
      else {
        errorEl.textContent = data.message || 'Something went wrong';
        errorEl.style.display = 'block';
      }
    } catch (err) {
      errorEl.textContent = err.message;
      errorEl.style.display = 'block';
    }
  }
</script>