Form Integration

Contact Form for HTML Websites

Build and launch HTML contact forms with ease—no backend or JavaScript needed. Simply use FormBold’s API endpoint to collect submissions instantly.

HTML Contact Form

HTML Contact Form with Backend API

Create functional contact forms for your static HTML sites without writing a single line of backend code. Setting up an HTML contact form with FormBold takes just a few steps. You only need to paste your unique endpoint URL into the action attribute of your form, and you're ready to go.

html.html
<form
  action="https://formbold.com/s/FORM_ID"
  method="POST"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Full Name -->
  <div class="flex flex-col gap-2">
    <label for="name" class="text-sm font-medium text-gray-700">
      Full Name<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Enter your full name"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>
</form>
How it works

See How It Works

Setting up your HTML form with FormBold is fast and hassle-free. No complex configuration or backend setup required.

1

Create an Account

Generate a unique endpoint URL by creating your form on FormBold.

2

Paste the Action URL

Use the example form code and replace the action URL with your endpoint.

3

Start Receiving Submissions

Submissions will be sent directly to your dashboard, inbox, Slack, Notion, or any connected app.

Features

Key Features of FormBold

FormBold offers robust backend capabilities and smart features, while keeping things incredibly simple.

No Backend Required

Works seamlessly with static sites—while keeping things incredibly simple.

Instant Email Notifications

Get form submissions delivered straight to your inbox or messaging apps.

Spam Protection Built-In

Server-side validation and optional Google reCAPTCHA keeps bots out.

File Upload Support

Let users attach files with auto-generated CDN links included.

Connect to 5+ Apps

Integrate with Slack, Notion, Sheets, Telegram, and more—no code required.

FAQ's

Frequently Asked Questions

Here are answers to common questions about using FormBold on HTML websites.

Use FormBold’s API endpoint as your form action and set the method to POST. No JavaScript or backend required.