Mastering WordPress: 2 Simple Methods to Add HTML Forms Effortlessly

Have you ever tried to add an HTML form to your WordPress site, only to discover that it looks good but doesn’t function? You’re not alone in this experience.

Many website owners face this frustrating problem, questioning why their forms fail to send submissions or connect correctly.

The explanation is straightforward: WordPress handles forms differently than a typical HTML website. Therefore, simply copying and pasting a raw HTML form often won’t work without additional steps.

On our websites, we utilize the WPForms plugin because it manages all the necessary backend configurations for us. However, we understand that many users prefer to work with custom HTML forms to keep their sites lightweight, maintain complete control over the code, and minimize reliance on plugins.

In this guide, we will demonstrate two effective methods to add HTML forms to WordPress and ensure they function properly. Whether you’re a beginner or comfortable with coding, you’ll be able to create a functional form without unnecessary trial and error. 💡

What Are HTML Forms and Why Should You Create One?

HTML forms operate similarly to other website forms. They allow visitors to input and submit information such as names, email addresses, feedback, orders, and much more.

The main difference is that HTML forms are built using HTML code rather than a drag-and-drop visual editor like a form plugin. This means you will need to manually define elements such as text fields, checkboxes, radio buttons, and dropdown menus. You have the freedom to customize their appearance and establish specific rules for their functionality.

Here are some benefits of creating forms from scratch using HTML:

• Enhanced Performance.HTML forms generally load faster and consume less memory due to their lightweight code.
• Complete Control.You will have total control over the design and functionality of the form, as you are not constrained by the limitations of a form builder.
• Tailored Customization.HTML forms can be customized precisely to meet your requirements, allowing for greater flexibility in design.

While building HTML forms from the ground up is an excellent way to learn and hone your coding skills, it does come with its own set of challenges.

You may encounter issues with cross-browser compatibility, where the form behaves differently across various web browsers.

Additionally, based on our experience, managing form validation with JavaScript can be complex. It requires extensive testing to ensure that you can accurately collect and process all user inputs.

Fortunately, there are straightforward methods to add HTML forms without the hassle. Whether you’re running a WordPress blog, a business website, or an online store, you can seamlessly integrate HTML forms into your site without needing to write code from scratch.

In the upcoming sections, we will guide you through the process of adding HTML forms to your WordPress site. Here’s a brief overview of the two methods we will discuss in this guide:

Are you ready? Let’s dive in.

Method 1: Adding HTML Forms to WordPress Using the HTML Forms Plugin (Simple)

A simple way to incorporate an HTML form into a WordPress site is by using a free form plugin like HTML Forms. This tool allows you to create and manage HTML forms all in one place, eliminating the need for any server-side setup.

In this guide, we will utilize the free version of the plugin, which provides all the essential features needed to create an HTML form.

To begin, ensure that the plugin is installed on your WordPress site. If you need assistance, you can follow our comprehensive guide on how to install a WordPress plugin.

After activation, navigate to HTML Forms » Add New in your WordPress admin dashboard to start building your contact form.

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

Here, the first step is to name your form by entering a title in the ‘Form Title’ field. For instance, we named our form ‘Newsletter Sign-Up.’

Next, click the ‘Create Form’ button located below the field.

Once you do this, the ‘Edit Form’ page will open, allowing you to customize your HTML contact form.

At the top of the tab, you’ll find your form’s details, including the title, slug, and shortcode. You don’t need to memorize these, as they will be accessible on the HTML Forms dashboard whenever you need them.

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

Let’s scroll down a bit further.

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

This contact form is straightforward, featuring four fields for users to enter their name, email address, a brief subject, and their message.

If you wish to add a new field for email newsletter subscriptions, simply click one of the field buttons located above ‘Form Code.’

For instance, we will create a dropdown field with ‘Yes/No’ options.

Next, click on ‘Dropdown’ to access the configuration options for the dropdown field. You can begin filling in the details, including the field label and the choices.

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

You should then see the dropdown field tag appear in the ‘Form Code’ section. Scroll down to view it.

The next step is to rearrange the contact form.

To ensure a smooth flow, place the dropdown field directly below the ‘Email’ field.

To reposition it, cut the dropdown field tag from its current location and paste it just below the ‘Email’ tag.

The default ‘Subject’ field may not be needed for a newsletter sign-up form, so we suggest removing it.

You can achieve this by deleting its tag from the first

to the last </p>.

After you have moved and deleted the tags, scroll down to the ‘Form Preview’ section.

In this section, you can verify if you have successfully moved and deleted the fields without any issues. You can also test if the dropdown menu functions correctly.

When you are satisfied with the changes, click the blue ‘Save Changes’ button located under the ‘Form Code’ section.

Once the saving process is complete, you will see a ‘Form updated.’ notification at the top of the page.

Now, let’s check the form’s configuration by navigating to the ‘Messages’ tab to review how HTML Forms manages submission confirmation messages.

Simply click on ‘Messages’ to access the tab.

This tab enables you to modify the pre-written text for successful form submissions and other related scenarios.

If everything appears satisfactory, you can leave it unchanged. If you made any edits, remember to click the ‘Save Changes’ button to preserve your work.

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

By default, HTML Forms will save each submission with a ‘Yes’ option and hide the form after a successful submission with a ‘No’ option. You can customize these settings as needed.

In the ‘Redirect to URL After Successful Sign-Ups’ section, you can paste the URL of a live page from your WordPress site. Alternatively, enter ‘0’ in the field to keep users on the same page after they submit the form.

Once everything is configured, the final step is to add the HTML contact form to a page on your WordPress site.

Next, let’s navigate to Posts or Pages » All Posts or All Pages in the WordPress dashboard.

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

To do this, hover over the ‘Contact’ page in the list and click ‘Edit’ when it appears.

This action will open the block editor for the ‘Contact’ page.

In the editor, choose an area where you want to place the form. Hover over that area and click the ‘+’ button to add the HTML Forms block.

Type ‘HTML Forms’ into the search bar to quickly locate the block. Once it appears in the search results, click on it.

You’ll see a dropdown menu in the ‘HTML Forms’ block. Expand it and select the form you wish to display. Here, we are choosing the ‘Newsletter Sign-Up’ form that we just created.

The form will be displayed once you publish your content. After selecting the form from the dropdown menu, simply click the ‘Update’ button to proceed.

Congratulations! Your form is now live, allowing users to subscribe to your newsletter.

Here’s a preview of how it may appear on your website:

To view form submissions, start by navigating to HTML Forms » All Forms. This section will show you a comprehensive list of all your HTML Forms.

Next, hover over a form and click the ‘Submissions’ button that appears.

Here, you can review all of your form submissions.

The ‘Submissions’ table provides detailed information about what users filled out in your form, along with a ‘Timestamp’ column indicating when each submission was made.

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

From the table, we can see that ‘User 1’ submitted the form on June 25 at approximately 1 p.m. Additionally, ‘User 1’ responded with ‘Maybe Later’ to the question about subscribing to our newsletter, which means you should not add their email address to your mailing list.

Method 2: Incorporating Custom HTML into WordPress Forms Using WPForms

An alternative method for creating HTML forms is to use a form builder. Although this approach doesn’t allow you to code forms from the ground up, it enables you to personalize them by incorporating HTML code snippets.

For instance, you can utilize custom HTML to display a short warning message on a checkout form that includes a link to your ‘Refund and Returns Policy’ page. Additionally, you can add a progress bar to inform users of their progress in completing the form. Custom HTML also allows you to include emojis or tooltips for enhanced user experience.

In this guide, we will demonstrate how to add HTML code snippets to personalize your WordPress forms using WPForms, the top-rated form builder for WordPress.

At CanadaCreate, we utilize WPForms for various purposes, including contact forms, annual surveys, and site migration requests. Learn more about this plugin by reading our in-depth WPForms review.

WPForms features a wide range of one-click add-ons and third-party integrations. For example, you can add the Form Abandonment add-on to monitor and minimize form abandonment issues, among other functionalities!

Thus, WPForms simplifies the process of enhancing your form’s capabilities compared to manually coding your WordPress form from scratch.

Before we begin, ensure that WPForms is installed and activated on your WordPress site. If you need assistance, please refer to our guide on how to install a WordPress plugin.

After activation, you can go to WPForms » Settings to input your license code. Once you’ve entered the key, click the ‘Verify Key’ button to complete the verification process.

After verification, you can start building your form and adding custom HTML. In this guide, we will demonstrate how to incorporate a simple tooltip into your contact form.

A tooltip is a small pop-up box that appears when you hover your mouse over a web element. It is useful for providing users with additional information about a specific element without requiring them to click or navigate away from the current page.

First, let’s create the contact form. Navigate to WPForms » Add New in your WordPress admin dashboard to get started.

This will open the ‘Setup’ panel, where you can start by naming your form. This name is for your reference only, so feel free to choose any title you like.

The next step involves selecting your preferred method for building the form.

With WPForms, you have the option to create forms using the AI form builder, a ready-made template, or by starting from scratch.

If you choose to use the AI-powered builder, simply enter a straightforward prompt, and the AI will generate the form for you within seconds.

For this tutorial, we will demonstrate the process using a pre-built template.

With over 2,000 form templates available, you can quickly filter them using the search bar. Just type ‘Contact Form’ and wait for the results to appear.

To explore each search result and see what the form looks like, you can utilize the preview feature. Just hover over the form template and click ‘View Demo.’

Once you find the ideal contact form for your needs, hover over it again and click ‘Use Template.’

This action will open the form builder.

All customization tools are located in the left panel, while the live preview of your form appears on the right side of your screen.

On this page, you can easily use the drag-and-drop feature to add elements from the customization panel to the live preview. You can also rearrange fields directly in the live preview.

Let’s add the HTML field to your form. Simply scroll down the left-hand panel and drag and drop the ‘HTML’ option onto the form.

After adding the HTML field, click on it to access its customization options. The first step is to fill in the field’s ‘Label,’ or you can choose to leave it blank.

Next, insert your custom HTML code into the ‘Code’ field.

To create a tooltip, you can use the ‘‘ function or copy and paste the following code into the ‘Code’ field:

Hello! We offer an email newsletter you might want to subscribe to. Please let us know in the Comment or Message field, and we’ll sign you up.</span>

This is a sample code, so feel free to modify it to better suit your needs.

Please note that WPForms does not show the HTML code in the form builder preview. To see how the field looks and ensure everything is correct, save your changes and click ‘Preview.’

This will open a new tab.

Now, let’s verify if the HTML code snippet for your tooltip functions correctly. Just hover over the text and wait for the tooltip to display for a few seconds.

Once you are happy with the outcome, return to the form builder to complete your form.

Your notification and confirmation settings are already configured in WPForms. However, if you wish to customize them, navigate to ‘Settings’andthen‘Notifications’or ‘Confirmations.’

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

Hover over the question mark icon next to the ‘Send to Email Address’ field for brief instructions. Follow these instructions to ensure your notifications are sent to the correct email addresses.

You can modify the default text for your email subject line.

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

After customizing your notifications, proceed to the ‘Confirmation’ section.

By default, WPForms sets the confirmation type to ‘Message’ with ready-made text. You can change these settings if desired.

In addition to displaying a confirmation message, you can redirect users to a new page or a specific URL.

Once everything is configured, it’s time to publish and embed your WordPress form.

Click the ‘Embed’ button to begin publishing. WPForms will prompt you to add the form to an existing page or create a new one. In this guide, we will select ‘Select Existing Page.’

In the next pop-up, choose a page from the list of available options. Then, click ‘Let’s go!’ to access the page’s block editor.

Now, hover over the area where you want to insert the form and click the ‘+’ button. Select the WPForms block from the options.

Next, choose a form from the dropdown menu in the WPForms block.

After selecting a form, WPForms will display it in the chosen content area. If you wish to display the form’s title, navigate to the ‘Block’ tab in the right panel and toggle the ‘Show Title’ option.

Once you are satisfied with your changes, click the ‘Update’ button to save your work.

Congratulations! You have successfully added custom HTML to your WPForms contact form, and it is now live on your WordPress site.

Users can now begin filling out the form and have the opportunity to subscribe to your email newsletter.

To view all submissions from your WPForms forms, go to WPForms » All Forms.

Next, hover over ‘Contact Form’ or any form from the list and click ‘Entries’ when the option appears.

On the following screen, you will see all of your form submissions.

The table provides details about the information users submitted through the form, including the time of submission.

For instance, on July 2 at approximately 8 a.m., ‘User 3’ indicated their desire to subscribe to the email newsletter and asked a question regarding how to contact our customer support team.

Additionally, the ‘Actions’ column features several buttons: ‘View,’ ‘Edit,’ ‘Spam,’ and ‘Trash.’

By clicking ‘View,’ WPForms will direct you to a dedicated overview page for the entry. Here, the plugin prompts you to activate two essential add-ons.

The first add-on is the Geolocation add-on, which tracks where users submit the form. The second is the User Journey add-on, designed to help you analyze the user’s navigation path on your site until they click the ‘Submit’ button.

We highly recommend installing and activating these add-ons to enhance the performance of your forms.

The ‘Spam’ and ‘Trash’ buttons are useful for identifying and removing fake submissions from your entries. For more information on minimizing fake form submissions, check out our guide on preventing contact form spam.

Bonus Tip: How to Upload a Custom HTML Page to WordPress

You may also want to upload a custom HTML page to your WordPress site. This is useful if you have a static template or an HTML page from a previous website that you wish to use.

As a general guideline, you should upload a single HTML page without separate CSS or image files. However, if your page includes additional CSS files and images, you need to organize them in a proper directory structure.

AIOSEO, the top SEO plugin for WordPress, can assist you with this process.

For more information, check out our beginner’s guide on uploading an HTML page to WordPress without encountering 404 errors.

Frequently Asked Questions: How to Add HTML Forms in WordPress

We have addressed some common queries to assist you in seamlessly adding HTML forms to your WordPress site.

Why is my HTML form not functioning on WordPress?

This is a frequent problem. Unlike standard HTML sites that can process form submissions with server-side scripts, WordPress does not automatically handle form submissions. Therefore, if you simply insert a basic HTML form, it may appear correct, but it won’t perform any actions when the ‘submit’ button is clicked.

This is due to the fact that WordPress lacks built-in support for managing form data. In a typical HTML site, developers usually link forms to scripts like form-handler.php to process the submitted data. In WordPress, you will need to implement your own custom PHP code or utilize a plugin to enable the form’s functionality.

In summary, while displaying the form is straightforward, making it operational requires some additional configuration.

How can I ensure my form submissions are successful?

The simplest solution is to use a contact form plugin such as WPForms or Formidable Forms. These plugins manage all the necessary backend processes, including handling submissions, sending notifications, and preventing spam, so you don’t have to configure everything manually.

Can I customize my forms when using HTML?

Absolutely! If you’re comfortable with coding, using raw HTML provides you with complete control over your form’s structure. Just remember:

• You’ll need to create your own CSS to style aspects like layout, colors, and spacing.
• Form validation, error messages, and conditional logic will require custom JavaScript or server-side programming.
• You are also responsible for ensuring that the form functions properly across various browsers and devices.

So yes, you have total freedom, but with that comes full responsibility.

Additional Resources: More Guides on WordPress Forms

We hope this article has helped you learn how to add HTML forms in WordPress. Next, consider exploring our guides on:

• Creating an RSVP Form in WordPress
• Creating an Online Booking Form in WordPress
• Creating a WordPress Form with a Date Picker
• Creating Multilingual Forms in WordPress
• Creating Conversational Forms in WordPress
• Styling and Customizing Your WordPress Forms
• Exporting WordPress Form Entries to CSV and Excel
• The Ultimate Guide to Using WordPress Forms

If you found this article helpful, consider subscribing to our YouTube Channel for more WordPress video tutorials. You can also connect with us on Twitter and Facebook.