WordPress Contact Form Without Plugins

The plugin problem

WordPress form plugins are the default recommendation for adding a contact form. But they come with real costs that most guides don't mention:

• Performance — Plugins like Contact Form 7 load their CSS and JavaScript on every single page, even pages without forms. WPForms loads 200+ KB of assets.
• Security surface — Every plugin is an attack vector. Contact Form 7 has had multiple CVEs. The more plugins you run, the more you need to patch.
• Conflicts — Form plugins often conflict with caching plugins, page builders, and other form plugins. Debugging CSS conflicts between Elementor and WPForms is not how you want to spend a Tuesday.
• Database bloat — Some plugins store every submission in your WordPress database, adding custom tables and slowing down backups.
• Update fatigue — Another plugin means another thing to update, another compatibility check with each WordPress core update.

For a simple contact form, all of this overhead is unnecessary. There's a lighter way.

How a form backend works

Instead of a plugin processing your form in PHP, you point a plain HTML form at an external API. The service receives the submission, sends you an email, and stores the data in a dashboard. Your WordPress site does zero server-side processing — it just renders the HTML.

Optaristo is a form backend built for this. It's free during beta with unlimited forms and submissions. No WordPress plugin to install — just paste HTML into a block.

Step 1 — Get your access key

1. Create a free Optaristo account.
2. Click "Create Form" and name it "WordPress Contact".
3. Copy the access key.

Step 2 — Add a Custom HTML block

In the WordPress Block Editor (Gutenberg), open the page or post where you want the form. Click the + button to add a new block, search for "Custom HTML", and add it. This block lets you paste raw HTML that WordPress renders exactly as-is.

Step 3 — Paste the form code

Paste this into the Custom HTML block. Replace YOUR_ACCESS_KEY with your key:

<style>
.optaristo-form {
  max-width: 520px;
  font-family: inherit;
}
.optaristo-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 14px;
}
.optaristo-form input,
.optaristo-form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}
.optaristo-form button {
  background: #6366f1;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.optaristo-form button:hover {
  background: #4f46e5;
}
</style>

<form class="optaristo-form"
      action="https://app.optaristo.com/api/submit"
      method="POST">
  <input type="hidden" name="access_key"
         value="YOUR_ACCESS_KEY">
  <input type="hidden" name="_gotcha"
         style="display:none">

  <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" rows="5"
            placeholder="How can we help?" required></textarea>

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

Click "Preview" in the Custom HTML block to see how the form looks. Then publish or update the page. That's it — the form is live.

When a visitor submits the form, the data goes to Optaristo. You'll get an email notification with the submission details, and every submission is stored in your Optaristo dashboard. Zero PHP code executes on your WordPress server.

Styling the form to match your theme

The code above includes scoped CSS that gives the form a clean, modern look. Since the styles use a specific class (.optaristo-form), they won't conflict with your theme's styles.

To match your theme exactly, change the button's background color to your brand color, and adjust fonts, padding, and border-radius to taste. The form uses font-family: inherit by default, so it picks up whatever font your theme uses.

Unlike plugin forms, there are no external CSS files to override. You have complete control.

Using the Classic Editor

If you're using the Classic Editor instead of Gutenberg, switch to the "Text" tab (not "Visual") and paste the same HTML code. The Visual editor will strip out the form tags, so you must use the Text/HTML view.

Alternatively, if your theme supports widget areas, you can add a Custom HTML widget to your sidebar or footer and paste the form code there.

Frequently asked questions