Template Tutorial

Build a contact form from scratch

This tutorial walks you through creating a contact form endpoint in BForms, configuring the right fields, adding spam protection, and embedding the final HTML on your website. By the end you will have a working form that sends submissions straight to your dashboard and optionally to your email inbox.

What you will build

A form with three fields: name, email, and message.
Honeypot-based spam protection that silently discards bot submissions.
Domain restrictions so only your website can submit to the endpoint.
An optional redirect to a custom thank-you page after submission.

Create a new form in the dashboard

Log in to your BForms dashboard and click New Form. You will land on the form creation page with two tabs: Settings and Fields.

Start on the Settings tab. Enter a descriptive name for your form. Something like Contact Form or Website Contact works well. This name is only visible in your dashboard — visitors never see it.

Set the redirect URL

Still on the Settings tab, find the Redirect URL field. This is where visitors are sent after they submit the form. Enter the full URL of your thank-you page, for example:

example

https://yoursite.com/thank-you

If you leave this empty, BForms will show a default success message. A custom thank-you page gives you full control over the post-submission experience — you can add next steps, links to your social accounts, or a confirmation message.

Add your form fields

Switch to the Fields tab. Use the field builder to add the three fields your contact form needs. For each field you can set the name, label, type, placeholder text, and whether the field is required.

TextNameRequired

A plain text field for the visitor's name.

EmailEmailRequired

Uses the email input type so browsers validate the format automatically.

TextareaMessageRequired

A larger text area so visitors can write longer messages.

You can always add more fields later (such as subject or phone) without breaking existing integrations. BForms will accept any field included in the submission and display it in the dashboard.

Enable spam protection

Back on the Settings tab, enter a name for the Honeypot Field. A honeypot is a hidden field that real visitors never see or fill out, but automated bots typically do. When BForms receives a submission where the honeypot field has a value, it silently discards it.

Use a name that looks like a real field so bots are more likely to fill it in. The default suggestion is _honeypot, but you could also use something like _hp_field or website_url.

How it works in practice

You add a hidden input to your HTML (shown in Step 6 below).
Bots auto-fill every field, including the hidden one.
BForms checks the honeypot field on the server. If it has a value, the submission is discarded.
Real visitors never interact with the hidden field, so their submissions go through normally.

Restrict allowed domains

In the Allowed Domains field, enter the domains that are permitted to submit to your form. Separate multiple domains with commas or newlines. For example:

allowed domains

yoursite.com, www.yoursite.com

When this is set, BForms will reject submissions that originate from any other domain. This prevents someone from copying your form snippet and posting submissions from their own site. Leave the field empty if you want to accept submissions from anywhere (useful during development).

Embed the form on your website

Click Create Form. BForms will generate a unique endpoint URL for your form. You can find the URL and ready-made code snippets on the form detail page in your dashboard.

Copy the HTML snippet below and paste it into your page. Replace your-form-slug with the actual slug from your dashboard.

contact.html

<form action="https://bforms.dev/api/f/your-form-slug" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Your name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" placeholder="How can we help?" required></textarea>

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

  <button type="submit">Send Message</button>
</form>

About the honeypot input

The hidden input near the bottom is the honeypot field. It uses style="display:none" so real visitors never see it, tabindex="-1" so keyboard users cannot tab into it, and autocomplete="off" so browsers do not autofill it. Make sure the name attribute matches the honeypot field name you entered in the dashboard.

Enable email notifications (optional)

If you want to receive an email every time someone submits the form, open the form in your dashboard and configure a notification channel. Enter the email address where you want notifications delivered. You can add multiple addresses if the form is handled by a team.

Even without email notifications, every submission is stored in your BForms dashboard and can be reviewed at any time.

Test your form

Before going live, submit a test entry from your website. Check the following:

The submission appears in your BForms dashboard with the correct field values.
You are redirected to your thank-you page (if you configured one).
You receive an email notification (if you enabled one).
Submitting from a domain not in your allowed list is rejected.

To test spam protection, temporarily make the honeypot field visible, fill it in, and submit. The submission should not appear in your dashboard.

Tips and next steps

Style the form

The HTML snippet has no styles on purpose. Add your own CSS or use a framework like Tailwind to match your brand.

Add more fields later

You can add fields like subject or phone number at any time. Update the HTML to include the new inputs and BForms will capture them automatically.

Use JavaScript for async submissions

Instead of a traditional form post, use the fetch API to submit without a page reload. Your dashboard provides a ready-made JavaScript snippet.

Monitor your inbox

Check your BForms dashboard regularly. You can sort and filter submissions by date, and export them if needed.

All templates Waiting list tutorial