Skip to content

Instantly share code, notes, and snippets.

@dariye

dariye/netlify-nextjs.html

Last active August 26, 2021 22:27
Show Gist options
  • Save dariye/d40e367d1250b00fe3f73bcdac96639a to your computer and use it in GitHub Desktop.
Save dariye/d40e367d1250b00fe3f73bcdac96639a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dariye revised this gist Aug 26, 2021. 1 changed file with 30 additions and 40 deletions.
    70 changes: 30 additions & 40 deletions netlify-nextjs.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,48 +19,38 @@
    >
    <input type="hidden" name="form-name" value="waitlist" />
    <div className="">
    {flagged && (
    <p className="text-lg text-center">
    Thank you for signing up! You&apos;ll get an email from us as soon as we
    launch.
    </p>
    )}
    {!flagged && (
    <>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-1 items-end">
    <div className="grid grid-cols-1 gap-6">
    <div className="block">
    <label className="hidden" htmlFor="email">
    <span className="text-gray-700">Email address</span>
    </label>
    <input
    required
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    id="email"
    className="mt-0 bg-white block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
    placeholder="Enter your email"
    name="email"
    />
    </div>
    </div>
    <div className="grid grid-cols-1 gap-0">
    <div className="block">
    <div className="mt-2 w-full">
    <div>
    <button
    type="submit"
    className="text-xl text-black bg-white w-full border-black uppercase"
    >
    Join waiting list
    </button>
    </div>
    </div>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-1 items-end">
    <div className="grid grid-cols-1 gap-6">
    <div className="block">
    <label className="hidden" htmlFor="email">
    <span className="text-gray-700">Email address</span>
    </label>
    <input
    required
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    id="email"
    className="mt-0 bg-white block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
    placeholder="Enter your email"
    name="email"
    />
    </div>
    </div>
    <div className="grid grid-cols-1 gap-0">
    <div className="block">
    <div className="mt-2 w-full">
    <div>
    <button
    type="submit"
    className="text-xl text-black bg-white w-full border-black uppercase"
    >
    Join waiting list
    </button>
    </div>
    </div>
    </div>
    </>
    )}
    </div>
    </div>
    </div>
    </form>
  2. dariye created this gist Aug 26, 2021.
    66 changes: 66 additions & 0 deletions netlify-nextjs.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    <form
    name="waitlist"
    data-netlify="true"
    netlify-honeypot="bot-field"
    className="bg-primary p-10 mt-4 rounded shadow-md"
    onSubmit={(e) => {
    fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: encode({ "form-name": "waitlist", email }),
    })
    .then(() => {
    setShowConfetti(true);
    setFlag();
    })
    .catch(() => null);
    e.preventDefault();
    }}
    >
    <input type="hidden" name="form-name" value="waitlist" />
    <div className="">
    {flagged && (
    <p className="text-lg text-center">
    Thank you for signing up! You&apos;ll get an email from us as soon as we
    launch.
    </p>
    )}
    {!flagged && (
    <>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-1 items-end">
    <div className="grid grid-cols-1 gap-6">
    <div className="block">
    <label className="hidden" htmlFor="email">
    <span className="text-gray-700">Email address</span>
    </label>
    <input
    required
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    id="email"
    className="mt-0 bg-white block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
    placeholder="Enter your email"
    name="email"
    />
    </div>
    </div>
    <div className="grid grid-cols-1 gap-0">
    <div className="block">
    <div className="mt-2 w-full">
    <div>
    <button
    type="submit"
    className="text-xl text-black bg-white w-full border-black uppercase"
    >
    Join waiting list
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </>
    )}
    </div>
    </form>