How to Add HTML Forms in WordPress (2 Methods)

You have an HTML form ready to use, but adding it to WordPress can be tricky and requires a lot of testing.

The reason is simple: Adding HTML forms to WordPress requires the right approach to ensure they function properly and integrate seamlessly with your site.

WordPress doesn’t handle forms the same way a regular HTML website does. If you just copy and paste the form code, it often won’t work properly without a few extra steps.

On our own sites, we use the WPForms plugin because it takes care of all the setup for us. That said, we know many users prefer using custom HTML forms to keep things lightweight, stay in full control of their code, or avoid adding another plugin.

In this guide, we’ll show you 2 easy ways to add HTML forms in WordPress, so your form shows up correctly, works as expected, and doesn’t break your site. 💡

What Are HTML Forms and Why Create One?

HTML forms work much like other site forms. They let visitors type in and submit information like names, email addresses, feedback, orders, and more.

What sets them apart is that HTML forms are created using code instead of a drag-and-drop visual editor like a form plugin. This means you need to define fields such as text boxes, checkboxes, radio buttons, and dropdown fields yourself.

Here are some advantages of making forms from scratch using HTML:

• Optimized Performance. HTML forms tend to load faster and use less memory because the code is lightweight.
• Control. You’ll have complete control over the form’s design and functionality because you’re not limited by a form builder’s features.
• Customization. HTML forms can be tailored exactly to your needs, offering more flexible form customization.

While creating HTML forms from scratch is a great way to learn and practice coding, it does have its own challenges.

You might have trouble with cross-browser compatibility, where the form works differently on different web browsers.

Also, based on our experience, handling form validation with JavaScript can be tricky. It needs thorough testing to ensure you can collect and process all user inputs correctly.

To summarize, here are the key advantages and challenges of hand-coding HTML forms:

✅ Benefits	🛑 Challenges
Faster page load times with lightweight code	Ensuring compatibility across different browsers
Full control over design and functionality	Building form validation and error handling
Precise customization for specific requirements	Setting up spam protection manually
Better opportunities for performance optimization	Handling server-side configuration and processing

Most WordPress users find that plugins offer the best middle ground. It gives you HTML customization options without the complexity of manual server configuration.

That said, there are ways to add HTML forms without these complexities. So, no matter if you are managing a WordPress blog, business site, or online store, you can easily add HTML forms to your site without having to code from scratch.

In the following sections, we will show you how to add HTML forms to WordPress. Here’s a quick overview of the 2 methods we will cover in this guide:

• Method 1: Adding HTML Forms in WordPress Using the HTML Forms Plugin (Easy)
• Method 2: Adding Custom HTML to WordPress Forms With WPForms
• Bonus Tip: Uploading a Custom HTML Page to WordPress
• FAQs: How to Add HTML Forms in WordPress
• Additional Resources: More WordPress Form Guides

Ready? Let’s get started.

Method 1: Adding HTML Forms in WordPress Using the HTML Forms Plugin (Easy)

🎖️ Best for: Developers and site managers who want full HTML control with a lightweight, performance-focused solution. The plugin emphasizes simplicity and speed over visual builders.

Because WordPress doesn’t process raw HTML form submissions by default, an easy way to add an HTML form to a WordPress website is to use a free form plugin like HTML Forms. This provides the necessary backend code to collect and email the data to you, while still letting you write the HTML yourself.

With over 10,000 active installations and a 4.9 out of 5-star rating on WordPress.org, it’s a trusted tool for creating and configuring HTML forms all in one place, so you don’t have to deal with any server-side configuration.

To get started, let’s make sure you have the plugin installed on your WordPress website.

From your WordPress dashboard, go to Plugins » Add New from the left sidebar and use the search box to find the plugin.

When you see it on the search result, click ‘Install Now’ and then ‘Activate.’ If you need help, then you can follow our step-by-step guide on installing a WordPress plugin.

Upon activation, you can navigate to HTML Forms » Add New from the left sidebar in your WordPress admin dashboard to start creating your contact form.

This will redirect you to the ‘Add New Form’ page.

From here, the first thing you’ll need to do is name your form by typing the name into the ‘Form Title’ field. For example, we named our form ‘Newsletter Sign-Up.’

Next, go ahead and click the ‘Create Form’ button under the field.

Once you do that, the ‘Edit Form’ page will appear, and you can start customizing your HTML contact form.

At the top of the page, you’ll see your form’s details, including the form title, slug, and shortcode. You don’t have to memorize these details, as they will be available on the HTML Forms dashboard when you need them.

Below these details, you’ll find the menu tabs. In the ‘Fields’ tab, you can see various field buttons, like ‘Text,’ ‘Dates,’ ‘Checkboxes,’ and ‘Radio buttons,’ to add to your forms.

Now, scroll down a bit more.

At the bottom of this tab, you’ll find a pre-built HTML form along with the preview.

This contact form is pretty simple. It has 4 fields for users to type out their name, email address, a brief subject, and a message.

Now, let’s say you want to add a new field with an email newsletter subscription sign-up. Then simply click on one of the field buttons above ‘Form Code.’

For example, we will use a dropdown field and create a ‘Yes/No’ option for newsletter signup.

From here, you’ll want to click ‘Dropdown,’ and this will open the dropdown field’s configuration options. You can start completing the details, which include the field’s label and choices.

After entering the details, you can click ‘Add Field to Form.’

Then, you should see the dropdown field tag in the ‘Form Code’ section. Simply scroll down the tab to check it out.

The next step is to reorganize the contact form.

To maintain a good flow, you’ll want the dropdown fields to be just below the ‘Email’ field.

Since this plugin doesn’t have a drag-and-drop builder, you’ll need to move the code manually. Go ahead and cut the dropdown field code from the opening <p> tag to the closing </p> tag.

Then, simply paste that code snippet right after the closing tag of the ‘Email’ field (which usually looks like </p> or </label>).

The default ‘Subject’ field might not be necessary for a newsletter sign-up form. So, we recommend removing the field.

You can do this by deleting the entire paragraph block containing the Subject field label and input, including both the opening <p> and closing </p> tags.

After moving and deleting tags, you’ll want to scroll down the tab to the ‘Form Preview’ section.

In this section, you can check if you’ve successfully moved and deleted the fields without breaking anything. In the Form Preview below, you can verify the Subject field disappeared without breaking the form layout. You can also check if the dropdown works properly.

When you are happy with the results, go ahead and click the blue ‘Save Changes’ button under the ‘Form Code’ section.

Once the saving process is done, you should see a ‘Form updated.’ notification at the top of this page.

Now, you might want to check the form’s configuration. Let’s move to the ‘Messages’ tab to see how HTML Forms configures the form submission confirmation messages.

Simply click on ‘Messages’ to open the tab.

This tab allows you to edit the pre-made copy for when a user’s form submission is successful and other similar situations.

If everything looks good to you, then you can leave it as is. If you make any changes, don’t forget to click the ‘Save Changes’ button so you don’t lose your progress.

Next, let’s go to the ‘Settings’ tab.

By default, HTML Forms will set ‘Yes’ to save each form submission and ‘No’ to hide the form after a successful submission. You can customize this as needed.

Then, in the ‘Redirect to URL After Successful Sign-Ups,’ you can copy and paste the URL of a live web page from your WordPress website. Alternatively, you can leave the field empty or enter 0 to keep users on the current page after a successful form submission.

When everything is set, all that’s left to do is add the HTML form to a WordPress page.

Let’s head over to Posts or Page » All Posts or All Pages from the WordPress dashboard.

For this guide, we will add the HTML form to our ‘Contact’ page.

So, we’ll hover over the ‘Contact’ page in the list and click ‘Edit’ when it appears.

This will launch the ‘Contact’ page’s block editor.

In the editor, you can start choosing an area to add the form. Then, simply hover over an area between blocks and click the ‘+’ button to add the HTML Forms block, or click the block inserter icon in the top-left toolbar.

Now, you can type ‘HTML Forms’ into the search bar at the top of the block inserter panel to quickly find the block. Once you have the search result, click it.

You’ll then see a dropdown in the ‘HTML Forms’ block. Simply expand on it and select the form you want to display. Here, we are picking the ‘Newsletter Sign-Up’ form that we just created.

The form will appear when you publish your content. So once you’ve selected the form from the dropdown menu, you can click the ‘Update’ button.

Your form is now live, and users can sign up for your newsletter. Here’s what it might look like on your site:

To see form submissions, you can first head over to HTML Forms » All Forms. This will take you to the list of all your HTML Forms.

Then, simply hover over a form and click the ‘Submissions’ button when it appears.

From here, you can see all of your form submissions.

The ‘Submissions’ table details all the information users filled out in your form. Then, there’s the ‘Timestamp’ column, which tells you when they submitted the form.

For example, here, the first submission was made by ‘User 1.’

From the table, we can see that the user submitted the form on June 25 at around 1 p.m. Also, ‘User 1’ answered ‘Maybe Later’ for the ‘Do you want to subscribe to our newsletter’ question. So, in this case, you shouldn’t add their email address to your mailing list.

Method 2: Adding Custom HTML to WordPress Forms With WPForms

🎖️ Best for: Non-technical users who want professional forms in minutes without coding. WPForms is praised by users for making it possible to create beautiful forms quickly with its intuitive drag-and-drop interface.

Another approach is to use a visual contact form builder like WPForms, the top-rated WordPress form plugin with over 6 million active installations and a 4.8 out of 5-star rating from 14,000+ reviews.

This is the best option if you want to build the form visually but need to insert specific HTML elements, like a link, a text format, or a tooltip, using code.

For example, you could use custom HTML to show a brief warning message on a checkout form with a link to your ‘Refund and Returns Policy’ page.

Or you can add a progress bar to let users know how far they are from completing the form. Custom HTML can even let you insert emojis or add a tooltip.

In this method, we’ll show you how to add HTML code snippets to customize your WordPress forms using WPForms, the best form builder for WordPress.

More on WPForms

WPForms is the most popular WordPress form builder, with over 6 million active installations.

Beyond its drag-and-drop builder, it includes a large library of addons and integrations that can extend your forms without requiring custom development. For example, you can:

• Track and recover form abandonment (Elite plan)
• Create conversational forms (Pro plan)
• Run surveys and polls (Pro plan)
• Accept payments through Stripe, PayPal, Square, and Authorize.Net (Plus plan)
• Collect digital signatures (Pro plan)
• Register WordPress users automatically (Pro plan)

The free WPForms Lite version includes the core form builder and basic fields. The HTML field used in this tutorial requires a premium license (Basic or higher). Availability varies by plan: the HTML field is available from Basic ($49.50/yr), and most advanced addons require Pro ($199.50/yr) or Elite ($299.50/yr).

At WPBeginner, we use WPForms for contact forms, annual surveys, and site migration request forms because it makes creating and managing forms much easier than coding them by hand.

Get more information about this plugin on our detailed WPForms review.

Before we start, let’s make sure you have a WPForms account with a premium license that includes the HTML field (Basic plan or higher).

On the WPForms website, click the ‘Get WPForms Now’ button, pick a plan that includes the HTML field (Basic or higher license at $49.50/yr or more), and complete checkout.

Upon signup, you’ll have your own WPForms dashboard, where you can download your WPForms zip file and copy your license key.

Now, you’re ready to install and activate WPForms on your WordPress website.

From your WordPress dashboard, go to Plugins » Add New and click the ‘Upload Plugin’ button at the top.

You should now see the file uploader.

Go ahead and click ‘Choose File’ to upload your WPForms zip file from your local computer. After that, just click ‘Install Now’ and then ‘Activate.’

If you need help, please see our guide on how to install a WordPress plugin.

Upon activation, you can navigate to WPForms » Settings to enter your license code. After entering the key, simply click the ‘Verify Key’ button to start the verification.

Once done, you can start creating your form and adding custom HTML.

For this guide, we will show you how to add a simple tooltip to your contact form.

A tooltip is like a small pop-up box that appears when you hover your mouse over a web element. It’s handy as it lets users learn more about a specific web element without clicking or leaving the page they’re on.

But first, let’s create the contact form. Simply head over to WPForms » Add New from your WordPress admin area to get started.

This will open the ‘Setup’ panel, where you’ll first need to name your form. This name is for internal reference only, so you can use anything you want.

The next step is selecting how you want to build your form.

With WPForms, you can create forms using the AI form builder (Basic plan or higher), a pre-made template, or from scratch.

If you want to use the AI-powered builder, then all you have to do is enter a simple prompt. The AI will then create the form for you in a few seconds.

For this tutorial, though, we’ll use a pre-built template.

As there are 2,100+ form templates to choose from, you can use the search bar to filter them quickly. To do this, just type ‘Contact Form’ and wait for the search to complete.

If you want to explore each search result to see what the form is like, then you can take advantage of the preview feature. Simply hover over the form template and click ‘View Demo.’

Once you’ve found the perfect contact form for your needs, hover over it once again and click ‘Use Template.’

This will launch the form builder.

Now, all the customization tools are in the left panel, and the live preview of the form is on the right side of your screen.

On this page, you can use the drag-and-drop feature to add elements from the left panel to the live preview. You can also use the feature to move around fields in the live preview.

Let’s try adding the HTML field to the form. All you have to do is scroll down the left-hand panel and then drag and drop ‘HTML’ onto the form.

After inserting the HTML field, you can click on it to open its customization options. Here, the first thing to do is fill out the field’s ‘Label.’ You can also leave it empty.

Then, you’ll insert the custom HTML code into the ‘Code’ field.

To create a tooltip, you can use the <span> tag or simply copy the following code and paste it into the ‘Code’ field:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

This is just sample code, so feel free to edit the text to match your needs. The title="" part of the code is exactly what tells the web browser to create the hover pop-up effect!

Note that WPForms doesn’t display the HTML code in the form builder preview. To preview the field and make sure everything is right, you can save the changes first and click ‘Preview.’

This will take you to a new tab.

Now, let’s test whether the HTML code snippet for your tooltip works properly. Simply hover over the text and wait for the tooltip to appear for a few seconds.

When you are satisfied with the result, you can go back to the form builder to finalize your form.

Your form notification and confirmation settings are already set up in WPForms. However, if you want to customize them, go to ‘Settings’ and then ‘Notifications’ or ‘Confirmations.’

In the ‘Notifications’ section, you can add multiple recipients for your contact form submission.

To add multiple recipients, separate email addresses with commas: email1@example.com, email2@example.com, email3@example.com. You can also hover over the question mark button next to the ‘Send to Email Address’ field for additional instructions

You can also edit the pre-made copy for your email subject line.

For example, we changed ours from ‘New Entry: Contact Form’ to ‘You’ve got mail: New contact.’

Once you’ve customized your notifications, you’ll want to move to the ‘Confirmation’ panel.

By default, WPForms sets your confirmation type to ‘Message’ and has the pre-made copy ready for you. You can definitely change these settings if you want to.

Other than showing a confirmation message, you can redirect users to a new page or a specific URL.

Once everything is set, it’s time to publish and embed the WordPress form.

Go ahead and click the orange ‘Embed’ button in the top-right corner of the form builder to start publishing.

WPForms will then ask if you want to add the form to an existing or a new page. In this guide, we will choose ‘Select Existing Page.’

In the next pop-up window, you’ll choose a page from the list of available pages. After that, you can click ‘Let’s go!’ to go to the page’s block editor.

Now, you can hover over an area between blocks and click the ‘+’ button, or click the block inserter icon in the top-left toolbar. Go ahead and select the WPForms block

Then, you can choose a form from the WPForms block’s dropdown.

Once you’ve selected a form, WPForms will load it in the selected content area. If you want to show the form’s title, then you can head over to the ‘Block’ tab in the right-hand panel and switch on the ‘Show Title’ slider.

When you are happy with everything, go ahead and hit the ‘Update’ button.

And done! You’ve added custom HTML to your WPForms contact form and made it live on your WordPress website.

Now, users can start filling out the form and possibly sign up for your email newsletter.

To see all your WPForms form submissions, navigate to WPForms » All Forms.

Then, you can hover over ‘Contact Form’ or any form from the list and click ‘Entries’ when the button appears.

On the next screen, you should be able to see all of your form submissions.

The table details all the information users submitted with the form, as well as the submission time.

For example, on July 2 at around 8 a.m., ‘User 3’ said they wanted to subscribe to the email newsletter and left a question on how to reach our customer support team.

We can also see the ‘Actions’ column. In this column, there are several buttons: ‘View,’ ‘Edit, ‘Spam,’ and ‘Trash.’

If you click ‘View,’ WPForms will take you to an entry’s dedicated overview page. On this page, the plugin encourages you to activate two add-ons.

The first one is the Geolocation add-on for tracking where the user submits the form from. The second one is the User Journey add-on, which can help you analyze the user’s path through your site until they click the ‘Submit’ button.

We recommend installing and activating these add-ons for more optimized form performance. Do note that both addons are available in the Pro license ($199.50/yr) or higher.

The ‘Spam’ and ‘Trash’ buttons are handy for marking fake submissions and removing them from your entries. To learn more about reducing fake form submissions, you can read our guide on how to block contact form spam.

Bonus Tip: Uploading a Custom HTML Page to WordPress

You might also be looking for a way to upload a custom HTML page to your WordPress site. This can be handy if you have a static template that you want to use or an HTML page from an old website.

Generally speaking, you can upload a single HTML page with no separate CSS or image files using a File Manager plugin or an FTP client.

But, if the page you want to upload includes separate CSS files and images, then you’ll need to upload them in a folder, keeping the same directory structure used in your HTML file.

AIOSEO, the best SEO plugin for WordPress, can help search engines find your custom HTML page by adding it to your XML sitemaps.

To learn more, see our beginner’s guide on how to upload an HTML page to WordPress without 404 errors.

FAQs: How to Add HTML Forms in WordPress

We’ve answered some common questions to help you add HTML forms to WordPress with ease.

Why isn’t my HTML form working on WordPress?

This is a common issue. In WordPress, simply pasting an HTML form usually isn’t enough to make it work.

While the form may display correctly, WordPress doesn’t automatically process form submissions. Unlike a basic HTML site, there’s no built-in script to handle the data when someone clicks Submit.

To make the form functional, you’ll need to add custom PHP code to process submissions or use a plugin that handles this for you.

How can I make sure my form submissions go through?

The easiest option is to use a contact form plugin like WPForms or Formidable Forms. These plugins handle everything behind the scenes, including saving entries, sending email notifications, and blocking spam, so you don’t have to set it all up yourself.

Can I still customize my forms if I use HTML?

Yes, absolutely. Using HTML gives you full control over how your form looks and works. Just keep in mind that you’ll also be responsible for everything else, such as:

• Styling the form with your own CSS
• Adding validation, error messages, or conditional logic with custom code
• Making sure the form works properly on different devices and browsers

So yes, you have full flexibility, but also full responsibility.

Additional Resources: More WordPress Form Guides

We hope this article has helped you learn how to add HTML forms in WordPress. Next, you might want to check out our guides on:

• How to Create a Booking Form in WordPress (Easy Methods)
• How to Create Multilingual Forms in WordPress
• How to Create Conversational Forms in WordPress
• How to Export WordPress Form Entries to CSV and Excel
• Ultimate Guide to Using WordPress Forms

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.