How to add an email signup form to Next.js

In a Next.js app you load the EarlyTrap script with next/script and give it a container to render into. It is the same code EarlyTrap runs in the footer of its own site.

Step 1: Get your embed code

1. Sign in to EarlyTrap and click Create Project. Enter a name and your site's address in the Website URL (Origin) field: the domain only, with no page path, starting with https://www. (for example https://www.yoursite.com). The form only saves emails when the page that shows it is served from that address.
2. Open the project, choose Widget in the sidebar and click Add New Form.
3. Click Config on the new form. Change the placeholder, button text or colors if you like.
4. Click the copy button next to Copy script to embed.

You get a snippet like this. The three IDs are unique to your form; the ones below are placeholders.

<div id="next-subscribe-form-normal"></div>
<script
  src="https://www.earlytrap.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-uid="YOUR_UID"
  async
></script>

Step 2: Add it to Next.js

1. Copy your project ID, widget ID and user ID from the snippet you got in step 1.
2. Create a component with the code below and replace the three placeholders. It can be a Server Component: no "use client" is needed.
3. Render that component on the page where the form should appear.
4. Deploy the page and open it on your site, at an address served from your project's Website URL (Origin). The form appears inside the container once the script has loaded.

import Script from "next/script";

export default function SubscribeForm() {
  return (
    <>
      <div id="next-subscribe-form-normal"></div>
      <Script
        src="https://www.earlytrap.com/widget.js"
        data-project-id="YOUR_PROJECT_ID"
        data-widget-id="YOUR_WIDGET_ID"
        data-uid="YOUR_UID"
        async
      />
    </>
  );
}

The script looks up one container by its id, so render this component once per page.

Official docs: Next.js docs: Script component.

If the form does not appear

• Paste both parts of the snippet: the <div> is where the form appears and the <script> loads it.
• Replace the placeholders with the real IDs from Config. If one is missing, the browser console shows "EarlyTrap: missing required data attributes".
• Keep to one EarlyTrap form per page.

If the form appears but signups are not saved

The form shows on any site, but it only saves emails when the page is served from the Website URL (Origin) of your project: same protocol and same domain, including the www. prefix. Check that the project's URL is your site's address without a page path. To confirm that signups are saved, submit a test email and look for it under Emails & Broadcasts in your project.

After you publish

Every signup appears under Emails & Broadcasts in your EarlyTrap project, where you can also send a broadcast to your list. Changes you make in Config apply to a form that is already embedded, so you do not need to paste the snippet again.

FAQ

More guides

• Waitlist widget for your website
• How to create a waitlist for your product launch
• Add a waitlist form to Webflow
• Add a waitlist form to WordPress
• Add a waitlist form to Squarespace