How to Add a Contact Form to WordPress

The standard way to add a contact form to WordPress is to install a plugin like Contact Form 7, WPForms, or Gravity Forms. These work, but they come with trade-offs: plugin bloat, JavaScript overhead, database tables you don't control, and the ongoing maintenance of keeping yet another plugin updated.

There's a simpler approach. Instead of installing a plugin, drop a plain HTML form into your WordPress page and point it at a form backend service. FormWit receives the submission, stores it in a dashboard, and sends you an email notification. No plugin required, no PHP to write, no server-side code to manage.

This guide walks through every method, from the Gutenberg block editor to direct theme file integration for developers.

What you need

• A WordPress site (self-hosted or WordPress.com Business plan with custom HTML support)
• A free FormWit account
• 10 minutes

Step 1: Get your FormWit endpoint

1. Create a free FormWit account
2. Click Create Form in your dashboard
3. Copy your form endpoint URL (looks like https://app.formwit.com/api/s/YOUR_FORM_ID)

Keep this URL handy. You'll paste it into the action attribute of your HTML form in the next step.

Step 2: Add the form using the Gutenberg block editor

WordPress's block editor (Gutenberg) has a Custom HTML block that lets you embed raw HTML directly into any page or post. This is the easiest way to add a contact form without a plugin.

1. Open the page where you want the form (or create a new page called "Contact")
2. Click the + button to add a new block
3. Search for Custom HTML and select it
4. Paste the following HTML into the block:

<form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
  <!-- Honeypot spam protection -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

  <p>
    <label for="name">Name</label><br />
    <input type="text" id="name" name="name" required
      style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:16px;" />
  </p>

  <p>
    <label for="email">Email</label><br />
    <input type="email" id="email" name="email" required
      style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:16px;" />
  </p>

  <p>
    <label for="message">Message</label><br />
    <textarea id="message" name="message" rows="5" required
      style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:16px; resize:vertical;"></textarea>
  </p>

  <p>
    <button type="submit"
      style="padding:12px 24px; background:#4f46e5; color:white; border:none; border-radius:4px; font-size:16px; cursor:pointer;">
      Send Message
    </button>
  </p>
</form>

Replace YOUR_FORM_ID with the endpoint ID from your FormWit dashboard.

Click Preview in the Custom HTML block to see how the form looks. WordPress wraps the block in the page's existing styles, so labels, padding, and fonts will mostly inherit from your theme. Adjust the inline styles as needed to match your site's look.

Why wrap inputs in paragraph tags?

WordPress themes typically style <p> tags with consistent margins and spacing. Wrapping each form field in a <p> tag uses the theme's built-in spacing instead of fighting against it. This is a common pattern in WordPress HTML forms and results in a cleaner layout with less custom CSS.

Step 3: Add spam protection

The form above already includes a honeypot field, the hidden _gotcha input. Here's how it works:

• The field is invisible to human visitors (hidden with display:none)
• Automated spam bots scan for input fields and fill them all in
• FormWit checks this field on every submission. If it has a value, the submission is silently rejected

This is effective against the vast majority of spam bots, and it requires zero user interaction: no CAPTCHAs, no checkboxes, no friction. FormWit also applies server-side rate limiting and content filtering on every plan.

For a deeper look at spam prevention techniques, see the spam protection guide.

Step 4: Add to theme template files (for developers)

If you're building a custom WordPress theme or want the contact form to appear in a template file rather than the block editor, you can add the HTML form directly to a PHP template.

Option A: Create a page template

Create a file called template-contact.php in your theme directory:

<?php
/**
 * Template Name: Contact Page
 */
get_header(); ?>

<main class="site-content">
  <div class="contact-form-wrapper" style="max-width:600px; margin:0 auto; padding:40px 20px;">
    <h1>Contact Us</h1>

    <form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
      <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

      <p>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required />
      </p>

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

      <p>
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </p>

      <p>
        <button type="submit">Send Message</button>
      </p>
    </form>
  </div>
</main>

<?php get_footer(); ?>

After creating the file, go to the WordPress admin, edit your Contact page, and select "Contact Page" from the Template dropdown in the Page Attributes panel (or the right sidebar in the block editor). The form will now render from the template instead of the block editor content.

Option B: Style with an enqueued stylesheet

When embedding forms in theme templates, avoid inline styles. Instead, add a CSS file and enqueue it properly via functions.php:

// In functions.php
function formwit_contact_styles() {
    if ( is_page_template('template-contact.php') ) {
        wp_enqueue_style(
            'formwit-contact',
            get_template_directory_uri() . '/css/contact-form.css',
            array(),
            '1.0.0'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'formwit_contact_styles' );

Then create css/contact-form.css in your theme:

.contact-form-wrapper label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
}

.contact-form-wrapper button {
  background: #4f46e5;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form-wrapper button:hover {
  background: #4338ca;
}

Using wp_enqueue_style is the correct WordPress way to load CSS. It avoids duplication, respects theme dependencies, and works properly with caching plugins.

AJAX submission in WordPress

If you want the form to submit without a full page reload, you can add a small script. The key consideration in WordPress is loading scripts the right way, via wp_enqueue_script, not by dumping a script tag into a template.

Create js/contact-form.js in your theme:

document.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('.contact-form-wrapper form');
  if (!form) return;

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    var btn = form.querySelector('button[type="submit"]');
    btn.textContent = 'Sending...';
    btn.disabled = true;

    fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
    })
    .then(function(res) {
      if (res.ok) {
        form.reset();
        btn.textContent = 'Sent!';
        setTimeout(function() {
          btn.textContent = 'Send Message';
          btn.disabled = false;
        }, 3000);
      } else {
        btn.textContent = 'Send Message';
        btn.disabled = false;
        alert('Something went wrong. Please try again.');
      }
    })
    .catch(function() {
      btn.textContent = 'Send Message';
      btn.disabled = false;
      alert('Something went wrong. Please try again.');
    });
  });
});

Then enqueue it in functions.php:

function formwit_contact_scripts() {
    if ( is_page_template('template-contact.php') ) {
        wp_enqueue_script(
            'formwit-contact-js',
            get_template_directory_uri() . '/js/contact-form.js',
            array(),
            '1.0.0',
            true  // Load in footer
        );
    }
}
add_action( 'wp_enqueue_scripts', 'formwit_contact_scripts' );

The true parameter in wp_enqueue_script loads the script in the footer, which is best practice for non-critical JavaScript. The conditional is_page_template check ensures the script only loads on the contact page, not across your entire site.

Custom redirect after submission

By default, FormWit shows a simple confirmation page after a form is submitted. To redirect users to your own thank-you page, add a hidden input:

<input type="hidden" name="redirect_to" value="https://yoursite.com/thank-you/" />

You can create a "Thank You" page in WordPress and use its URL here. The redirect_to value is stripped from the stored submission data and overrides any redirect URL configured in the FormWit dashboard.

Why skip the plugin?

WordPress contact form plugins are popular for good reason. They provide a drag-and-drop interface, built-in validation, and integrations. But they also come with costs:

• Performance: Most form plugins load their own CSS and JavaScript on every page, not just the contact page. This adds to page weight and affects Core Web Vitals scores.
• Maintenance: Plugins need regular updates. An outdated contact form plugin is a common source of WordPress security vulnerabilities.
• Database overhead: Some plugins create their own database tables and store entries locally, adding backup complexity.
• Plugin conflicts: The more plugins you run, the higher the chance of conflicts, especially with caching plugins and page builders.

Using a plain HTML form with an external backend eliminates all of these concerns. The form is just HTML. No JavaScript loaded, no database tables created, no plugin to keep updated. FormWit handles storage, notifications, and spam protection outside of your WordPress installation.

WordPress.com vs. self-hosted WordPress

If you're on WordPress.com (not self-hosted), your ability to add custom HTML depends on your plan:

• Free and Personal plans: Custom HTML blocks are available, but forms may be restricted. Test with a simple form first.
• Premium and Business plans: Full Custom HTML support. The Gutenberg method in Step 2 works without issues.
• Business and eCommerce plans: You can also install custom themes and edit template files directly, as described in Step 4.

Self-hosted WordPress (wordpress.org) has no restrictions. All methods in this guide work out of the box.

Summary

Adding a contact form to WordPress does not require a plugin. A plain HTML form in a Custom HTML block, combined with a form backend like FormWit, gives you a lightweight solution with email notifications, a submission dashboard, and spam protection.

1. Create a FormWit endpoint from the dashboard
2. Add a Custom HTML block in Gutenberg and paste the form code
3. Include a honeypot field for spam protection
4. Optionally, integrate into theme templates with proper wp_enqueue_style and wp_enqueue_script calls

FormWit's free plan includes unlimited forms and 100 submissions per month. Get started free.

Related guides: HTML contact form · Form to email · Embed a contact form · Spam protection · Form templates

Frequently asked questions

Should I use FormWit with WordPress?

It depends on your setup. If you want a lightweight solution without plugin bloat, FormWit is a good fit. You add a Custom HTML block with the form code and skip installing a plugin entirely. No extra JavaScript, no database tables, no plugin updates to manage.

When does FormWit make sense for WordPress?

FormWit makes the most sense when you want to avoid plugin dependencies, need a submission dashboard outside WordPress, or want to keep your contact form working even if you migrate away from WordPress later. The form is portable -- it works on any platform that renders HTML.

How does it compare to Contact Form 7?

Contact Form 7 runs as a WordPress plugin with its own CSS/JS, stores submissions via additional plugins (like Flamingo), and requires WordPress-specific configuration. FormWit is a standalone service: submissions are stored in a separate dashboard, email delivery is handled by FormWit's infrastructure (AWS SES), and the form is plain HTML that works without WordPress.