HTML Forms to Sheets

Preview

HTML Code

<form action="SUBMISSION_URL" method="post" style="background-color: #ffffff; padding: 1.5rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
  <input type="text" name="name" placeholder="Enter your name" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
  <input type="email" name="email" placeholder="Enter your email" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
  <button type="submit" style="background-color: #7c3aed; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem;">Submit</button>
</form>

Contact Form Preview

Contact Form HTML Code

<form action="SUBMISSION_URL" method="post" style="background-color: #ffffff; padding: 1.5rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
  <input type="text" name="name" placeholder="Your Name" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
  <input type="email" name="email" placeholder="Your Email" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
  <textarea name="message" placeholder="Your Message" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;" rows="4"></textarea>
  <button type="submit" style="background-color: #7c3aed; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem;">Send</button>
</form>

Popup Modal Form Preview

Popup Modal Form HTML Code

<!-- Button to trigger the popup modal -->
<button id="openModalBtn" style="background-color: #7c3aed; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem;">
  Open Popup Form
</button>
<!-- Popup modal form template -->
<div id="popupModal" style="position: fixed; inset: 0; background-color: rgba(31, 41, 55, 0.5); display: flex; align-items: center; justify-content: center; display: none;">
  <div style="background-color: #ffffff; padding: 1.5rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: 33%;">
    <form action="SUBMISSION_URL" method="post">
      <input type="text" name="name" placeholder="Your Name" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
      <input type="email" name="email" placeholder="Your Email" style="border: 1px solid #d1d5db; padding: 0.5rem; margin-bottom: 1rem; width: 100%;">
      <div style="display: flex; justify-content: flex-end; gap: 1rem;">
        <button type="submit" style="background-color: #7c3aed; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem;">Submit</button>
        <button id="closeModalBtn" type="button" style="background-color: #4b5563; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem;">Close</button>
      </div>
    </form>
  </div>
</div>
<!-- Script to handle popup modal visibility -->
<script>
  document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('popupModal').style.display = 'flex';
  });
  document.getElementById('closeModalBtn').addEventListener('click', function() {
    document.getElementById('popupModal').style.display = 'none';
  });
  // Uncomment the following code to trigger the popup after a certain time
  // setTimeout(function() {
  //   document.getElementById('popupModal').style.display = 'flex';
  // }, 5000); // 5000 milliseconds = 5 seconds
</script>