Create secret netlify form

Author: DilsonsPickles

src/components/form/NewsletterForm.astro

@@ -0,0 +1,61 @@
+---
+
+---
+
+<div class="feedback-form">
+  <form
+    data-netlify="true"
+    netlify-honeypot
+    name="feedback"
+    method="POST"
+    action="/form-success"
+  >
+    <p class="hidden">
+      <label>
+        Don’t fill this out if you’re human: <input name="bot-field" />
+      </label>
+    </p>
+    <input type="hidden" name="form-name" value="feedback" />
+    <label for="name">Name</label>
+    <input id="name" type="text" name="name" />
+    <label for="email">Email</label>
+    <input id="email" type="email" name="email" required />
+    <button type="submit">Submit</button>
+  </form>
+</div>
+
+<style>
+  .feedback-form {
+    min-width: 250px;
+    width: 45%;
+  }
+  label {
+    font-size: 16px;
+  }
+  input,
+  textarea,
+  button {
+    border-radius: 5px;
+    border: 1px solid #cbd5e1;
+    font-size: inherit;
+    margin: 15px 0;
+    padding: 12px 20px;
+    width: 100%;
+  }
+  button {
+    background-color: #2bdcd2;
+    border: 1px solid #2bdcd2;
+    color: #1e293b;
+    font-size: 16px;
+    width: 50%;
+  }
+  .hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>

src/pages/form-success.astro

@@ -0,0 +1,22 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import "../styles/icons.css";
+---
+
+<BaseLayout
+  title="Audacity Cloud Saving Platform"
+  description="Never lose your work in Audacity with seamless sync to Cloud Storage"
+>
+  <section class="mx-8 max-w-screen-md xl:max-w-screen-lg md:mx-auto">
+    <div class="py-8 sm:py-12 flex flex-col items-center">
+      <div class="text-center">
+        <h1>
+          Submission successful, thanks!
+        </h1>
+        <div class="mt-12">
+          <a href="/" class="w-fit px-4 py-4 bg-gray-200 my-4 rounded-md hover:bg-gray-300 cursor-pointer">Continue</a>
+        </div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>

src/pages/secret-form.astro

@@ -0,0 +1,17 @@
+---
+import NewsletterForm from "../components/form/NewsletterForm.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import "../styles/icons.css";
+---
+
+<BaseLayout
+  title="Audacity Cloud Saving Platform"
+  description="Never lose your work in Audacity with seamless sync to Cloud Storage"
+>
+  <section class="mx-8 max-w-screen-md xl:max-w-screen-lg md:mx-auto">
+    <div class="mt-8 flex flex-col items-center gap-8">
+      <h1>Sign up to our newsletter</h1>
+      <NewsletterForm />
+    </div>
+  </section>
+</BaseLayout>