How to Add a Waitlist Form to React

This guide shows you how to add a SmashSend waitlist form to React, so visitors can sign up and then refer other people to move up the queue. It takes a couple of minutes and does not require a developer.

Before you start

You need a SmashSend account and a form. If you do not have one yet, create a free account first.

1. Create your waitlist form in SmashSend

1. Log in to SmashSend.
2. In the sidebar, open Forms and click New form.
3. Add the fields you want to collect. Email is always included.
4. Open the Rewards tab and turn on referrals if you want signups to earn a better position by inviting other people.
5. Click Publish.

2. Copy your form link

Open the form and go to the Integrate tab. Your form is hosted at a public URL that looks like this:

https://smashsend.com/f/YOUR_FORM_KEY

Replace YOUR_FORM_KEY in every snippet below with the key from your own form.

3. Copy the embed code

This is the only code you need. It embeds the hosted form directly, so there is no script to load and nothing to keep up to date.

export function WaitlistForm() {
  return (
    <iframe
      src="https://smashsend.com/f/YOUR_FORM_KEY"
      title="Join the waitlist"
      width="100%"
      height={640}
      style={{ border: 0, maxWidth: 560, width: "100%" }}
    />
  );
}

4. Add it to React

1. Create a component file, for example WaitlistForm.jsx.
2. Paste the component below into it.
3. Import and render <WaitlistForm /> anywhere in your app.

Good to know

The same component works in Next.js, Remix, Gatsby, Astro and Vite. There is no SmashSend npm package to install: the hosted form is a plain iframe, which keeps your bundle size unchanged and avoids a third-party script on your site.

Turn signups into referrals

A waitlist form is more useful when each signup brings more signups. With referrals enabled, every person who joins gets a unique share link, and their position improves as people sign up through it. You can reward the top referrers automatically. See how to create a viral waitlist for the full setup, or read more about referral marketing with SmashSend.

Troubleshooting

• The form does not appear: confirm the page is published, and that you pasted the code into an HTML or code block rather than a rich-text block.
• The form is cut off: increase the height of the embed element to at least 640px.
• Signups are not showing up: check that you are looking at the same form in SmashSend that the key in your embed points to.

Have questions?

If you get stuck, email support@smashsend.com or contact us and we will help you get it working.