Free Custom Forms Builder

<form action="YOUR_APPS_SCRIPT_WEB_APP_URL" method="POST" class="custom-form" data-cf-success="Thanks! Your submission has been received.">
  <h2 class="form-title">Contact Us</h2>
  <p class="form-description">We&#039;d love to hear from you. Fill in the form below.</p>

  <div class="form-group">
    <label for="field_boz5t6ui" class="form-label">Full Name <span class="form-required">*</span></label>
    <input type="text" id="field_boz5t6ui" name="full_name" placeholder="Jane Doe" required />
  </div>

  <div class="form-group">
    <label for="field_qqy6rr6n" class="form-label">Email <span class="form-required">*</span></label>
    <input type="email" id="field_qqy6rr6n" name="email" placeholder="jane@example.com" required />
  </div>

  <div class="form-group">
    <label for="field_cxt86ii5" class="form-label">Message <span class="form-required">*</span></label>
    <textarea id="field_cxt86ii5" name="message" rows="4" placeholder="Write your message..." required></textarea>
  </div>

  <button type="submit" class="form-submit">Submit</button>
  <div class="form-message" aria-live="polite"></div>
</form>
<script>
(function() {
  document.querySelectorAll('.custom-form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var btn = form.querySelector('.form-submit');
      var msg = form.querySelector('.form-message');
      var originalText = btn ? btn.textContent : '';
      if (btn) { btn.disabled = true; btn.textContent = 'Sending…'; }
      if (msg) { msg.className = 'form-message'; msg.textContent = ''; }

      var formData = new FormData(form);
      fetch(form.action, { method: 'POST', body: formData, mode: 'no-cors' })
        .then(function() {
          if (msg) {
            msg.className = 'form-message success';
            msg.textContent = form.dataset.cfSuccess || 'Thanks! Your submission has been received.';
          }
          form.reset();
          document.querySelectorAll('.form-rating .form-star').forEach(function(s) { s.classList.remove('active'); });
          document.querySelectorAll('.form-signature canvas').forEach(function(c) {
            var x = c.getContext('2d'); x && x.clearRect(0, 0, c.width, c.height);
          });
        })
        .catch(function() {
          if (msg) {
            msg.className = 'form-message error';
            msg.textContent = 'Something went wrong. Please try again.';
          }
        })
        .finally(function() {
          if (btn) { btn.disabled = false; btn.textContent = originalText; }
        });
    });
  });
})();
</script>