Style your FormBlade form with your own CSS

FormBlade doesn't inject any CSS into your page. When you use a plain HTML form with a FormBlade action URL, the form is your HTML — style it however you want. Here's how.

The basic form

This is a standard HTML form pointing at your FormBlade endpoint. No special classes, no SDK, no JavaScript required:

<form action="https://formblade.com/f/contact" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Every element here is plain HTML. Your existing CSS applies to it automatically.

Add your own styles

Give the form a class and style it to match your site's design:

<style>
  .contact-form {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #f9fafb;
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  }
  .contact-form textarea {
    min-height: 120px;
    resize: vertical;
  }
  .contact-form button {
    padding: 12px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<form class="contact-form" action="https://formblade.com/f/contact" method="POST">
  <!-- your fields here -->
</form>

Change the colors, spacing, border radius, font — anything. It's your CSS.

Match a dark theme

If your site has a dark mode, adjust the colors:

.contact-form input,
.contact-form textarea {
  background: #1e1e2e;
  border-color: #313244;
  color: #cdd6f4;
}
.contact-form button {
  background: #cba6f7;
  color: #1e1e2e;
}

Use with CSS frameworks

FormBlade works with any CSS framework — Tailwind, Bootstrap, Bulma, whatever your site uses. Just apply the framework's classes to the form elements:

Tailwind CSS:

<form action="https://formblade.com/f/contact" method="POST"
      class="max-w-md mx-auto space-y-4">
  <input name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300
    focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
  <button class="w-full py-3 bg-indigo-600 text-white rounded-lg
    font-semibold hover:bg-indigo-700">Send</button>
</form>

Bootstrap:

<form action="https://formblade.com/f/contact" method="POST">
  <div class="mb-3">
    <input name="email" class="form-control" placeholder="Email">
  </div>
  <button class="btn btn-primary w-100">Send</button>
</form>

Labels, placeholders, and accessibility

For better accessibility, use proper <label> elements:

<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

FormBlade captures whatever field names you use. The name attribute is what matters for the data — the rest is for your layout and styling.

What about the hosted form?

If you use FormBlade's hosted form (the page at /f/your-id), it comes with built-in themes you can pick in the Form Designer. But for forms embedded on your own site, you have full control over the HTML and CSS.