How to Add HTML Forms in WordPress
Last updated: July 2026
TL;DR: You can add an HTML form in WordPress two ways: paste raw HTML into a Custom HTML block for full design control, or use a form plugin’s HTML embed feature if you want built-in spam protection and submission storage. Both methods take under 15 minutes, and this guide walks through each step by step. Canada Create walks clients through this exact workflow when a site needs a quick, no-frills form.
Quick Answer
Open the block editor, add a Custom HTML block, and paste your form markup directly. If you need submissions saved somewhere or spam filtering, build the form in a plugin like a popular WordPress form builder instead, then grab its embed code and drop that into the same block type. Either approach works without touching a single theme file.
Prerequisites
- Admin access to your WordPress dashboard, with permission to edit pages or posts
- Your form’s HTML markup ready to paste, or a form plugin installed if you are using Method 2
- A plan for where submitted data should go, whether that is an email notification, a database entry, or a spreadsheet export
- A staging copy of the page if the form lives on a high-traffic part of your site
Method 1: Add an HTML Form With the Custom HTML Block
Step 1: Open the Page or Post in the Block Editor
Go to Pages or Posts in your WordPress dashboard and open the page where the form should live. If you are building a new landing page, this is also a good moment to review your website design costs in Toronto if the form is part of a larger site refresh. Canada Create sees this step skipped often, which usually means the form ends up on the wrong page template.
Step 2: Insert a Custom HTML Block
Click the plus icon to add a new block, search for “Custom HTML,” and drop it where you want the form to appear. This block renders raw code exactly as written, which is why it is the go-to spot for a custom html form wordpress editor workflow.
Step 3: Paste Your Form Markup
Paste your HTML contact form wordpress code into the block. A minimal example looks like this:
<form action="/your-handler-url" method="post">
<label>Name</label>
<input type="text" name="name" required>
<label>Email</label>
<input type="email" name="email" required>
<button type="submit">Send</button>
</form>
[IMAGE: alt text showing the WordPress block editor with a Custom HTML block containing form code, related to how to add html form in wordpress]
Step 4: Preview Before Publishing
Click Preview to confirm the form renders correctly. The block editor does not execute JavaScript in the editing view, so always check the live preview or a staging copy of the page.
Step 5: Handle the Submission
Raw HTML forms need somewhere to send data. Point the action attribute at a script on your server, a form-processing service, or a WordPress admin-ajax endpoint if you are comfortable with a bit of PHP. Without this step, the form displays but does nothing when submitted.
Method 2: Embed HTML From a Form Plugin
Step 1: Build the Form in Your Plugin
If you would rather skip writing raw markup, build the form visually inside a popular WordPress form builder. This handles spam protection, notification emails, and stores every submission automatically. Most plugins in this category support the same core fields you would otherwise hand-code: text, email, dropdown, checkbox, and file upload. Canada Create defaults to this route for most client sites, since it saves time later when a form needs a new field.
Step 2: Copy the Embed or Shortcode
Most form plugins generate either a shortcode or a small HTML snippet you can paste anywhere. This is often the fastest wordpress form without plugin coding required on your part, since the plugin generates the code for you.
Step 3: Paste Into a Custom HTML or Shortcode Block
Add the snippet into a Custom HTML block, or use the plugin’s dedicated block if it offers one. Save and preview the page.
Step 4: Test the Full Submission Flow
Submit a test entry yourself and confirm it arrives wherever it should, whether that is an inbox, a spreadsheet, or a CRM. Skipping this step is the most common reason a form looks fine but quietly loses real submissions after launch.
Styling Your HTML Form to Match Your Theme
A raw HTML form rarely matches your theme’s buttons, spacing, or colors out of the box. The most reliable fix is to wrap your form in a container with its own class name, then add a small <style> block directly above the form markup inside the same Custom HTML block. This keeps the styling scoped to that one form instead of leaking into the rest of the page.
If you manage several forms across a site, it is worth standardizing on one set of class names early. Canada Create readers often ask why their second or third form looks different from the first, and the answer is almost always inconsistent class naming between blocks.
Troubleshooting
- Form displays but does not submit: Check that the
actionattribute points to a working endpoint, and that your hosting allows outbound form submissions. - Styling looks broken: Custom HTML blocks do not inherit all theme styles automatically. Add a
<style>block above the form or link a custom stylesheet. - Form disappears after saving: WordPress sometimes strips certain tags in the Classic Editor. Switch to the block editor’s Custom HTML block, which preserves markup as-is.
- Spam submissions flooding your inbox: Raw HTML forms have no built-in spam filtering. Add a honeypot field or switch to Method 2 with a plugin that includes spam protection.
Frequently Asked Questions
Can I add an HTML form in WordPress without a plugin?
Yes. Use the Custom HTML block in the block editor and paste your form markup directly. You will need to handle form submission yourself, either with a small server script or a third-party form-processing service.
Why doesn’t my embedded HTML form submit properly?
This usually happens because the form’s action attribute is not pointed at a working script. WordPress renders the form’s appearance fine, but it will not process data unless you set up a handler.
What is the easiest way to embed an HTML contact form in WordPress?
For most non-developers, building the form in a plugin and pasting its generated embed code into a Custom HTML block is faster and safer than writing raw markup from scratch.
As we cover at Canada Create when helping clients migrate old sites, teams juggling multiple forms across a WooCommerce store often benefit from consolidating on one plugin rather than mixing raw HTML forms with plugin-based ones, since it keeps submission data in a single place. If your forms feed into a broader online store, it is worth reviewing our comparison of Shopify vs WooCommerce costs for a Canadian store before committing to one platform.
Canada Create readers also frequently ask whether raw HTML forms are safe from a security standpoint. They are, as long as you validate and sanitize submitted data on the server side rather than trusting the browser alone. The W3C Web Accessibility Initiative’s forms tutorial is a useful reference if you are hand-coding markup, since it covers label associations and accessible error messages that raw HTML forms often miss. For a deeper look at hardening your site more broadly, see our guide on how to secure your WordPress website.
If you eventually outgrow a single embedded form and need something more robust, the official WordPress block editor documentation covers exactly how the Custom HTML block handles raw markup under the hood, which is worth a skim if a form ever renders unexpectedly.
Related Resources
- How Much Should a Small Business Budget for WordPress Hosting?
- What Slows Down a WordPress Site on Shared Hosting?
- Web Design in Yorkville, Toronto
