Template Tutorial

Build a newsletter signup form

A newsletter signup is one of the simplest and most effective forms you can add to your site. This tutorial shows you how to create a minimal, high-conversion form that collects email addresses and optionally the subscriber's name so you can personalize your emails.

What you will build

A form with one or two fields: email (required) and an optional first name.
Honeypot spam protection to keep fake signups out of your subscriber list.
A redirect to a confirmation page that sets expectations (check your inbox, etc.).
An inline-friendly layout that works in a blog sidebar, footer, or hero section.

Create the form in your dashboard

Log in to your BForms dashboard and click New Form. On the Settings tab, name the form something like Newsletter or Blog Subscribers. This name is only visible in your dashboard.

Set a redirect URL

In the Redirect URL field, enter the URL of a confirmation page. This is where subscribers land after they sign up:

example

https://yoursite.com/subscribed

A good confirmation page might say "Thanks for subscribing! Check your inbox for a welcome email." If you leave this empty, BForms will show a default success message.

Add your fields

Switch to the Fields tab. For a newsletter, fewer fields means higher conversion. Start with just email, and optionally add a first name for personalization.

EmailEmailRequired

The only essential field. Uses the email input type for built-in browser validation.

name: emailplaceholder: you@example.com

TextFirst name

Optional. Lets you personalize subject lines and greetings. Skip this if you want the absolute simplest form.

name: first_nameplaceholder: Jane

One field or two?

A single email field converts best. Adding a first name field reduces conversion slightly but lets you personalize emails with "Hi Jane" instead of "Hi there". Choose based on your priorities — you can always add the name field later without breaking anything.

Enable spam protection

Back on the Settings tab, enter a name for the Honeypot Field. Newsletter forms are prime targets for bots because they are usually on high-traffic public pages. A honeypot field is essential to keep your subscriber list clean.

The default _honeypot works fine. The honeypot is a hidden field that bots fill out but real visitors never see. Submissions with a value in this field are silently discarded.

Restrict allowed domains

In the Allowed Domains field, add the domains where you will embed this form. This prevents someone from copying your form snippet and collecting subscribers on a different site.

allowed domains

yoursite.com, blog.yoursite.com

Embed the form on your site

Click Create Form to save your endpoint. Copy the HTML below and paste it wherever you want the signup form — a blog sidebar, footer, hero section, or dedicated landing page. Replace your-form-slug with the actual slug from your dashboard.

newsletter.html

<form action="https://bforms.dev/api/f/your-form-slug" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required />

  <label for="first_name">First name (optional)</label>
  <input type="text" id="first_name" name="first_name" placeholder="Jane" />

  <!-- Honeypot field - do not remove -->
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Subscribe</button>
</form>

Inline layout tip

For a compact inline layout (email input + button on one line), wrap the email input and button in a flex container with display: flex; gap: 8px;. This works well in sidebars and footers where vertical space is limited.

Set up email notifications (optional)

If you want to know when someone subscribes, configure a notification channel on the form detail page. This sends you an email for every new signup. Useful in the early days when you want to personally welcome new subscribers.

Test your form

Before going live, run through these checks:

Submit a test email and confirm it appears in your BForms dashboard.
Verify you are redirected to your confirmation page.
Test the honeypot by making it visible, filling it in, and confirming the submission is discarded.
Check that the form renders well on mobile.

Tips and next steps

Use a double opt-in flow

After someone subscribes, send a confirmation email with a link they must click. This ensures valid email addresses and keeps your list healthy.

Add a source field

Add a hidden input like <input type="hidden" name="source" value="blog-footer" /> to track where subscribers come from.

Keep it above the fold

Place the form where visitors can see it without scrolling. Blog sidebars, site headers, and hero sections all work well.

Async submission with fetch

Use the JavaScript snippet from your dashboard to submit without a page reload. Show a success message inline instead of redirecting.

Waiting list tutorial Feedback form tutorial