Adding HTML forms to your WordPress site is easy. Forms help collect information. You can create contact forms, surveys, and more. Let’s learn how to add forms.

Why Add Forms to Your Site?

Forms collect user data. They help you communicate with your visitors. For example, contact forms let users send messages. Survey forms gather feedback. Forms improve your site.

Steps to Add HTML Forms

Follow these simple steps to add a form to your WordPress site.

Step 1: Create Your Form

First, create your HTML form. Use the HTML code below as a guide.

Name:


Email:


Message:

Step 2: Add Your Form To A Post Or Page

Next, add your form to a post or page. Follow these steps:

1. Go to your WordPress dashboard.
2. Click on “Posts” or “Pages”.
3. Choose an existing post/page or create a new one.
4. Switch to the “Text” editor.
5. Paste your HTML form code.
6. Switch back to the “Visual” editor to see your form.
7. Save or update your post/page.

Step 3: Test Your Form

Now, test your form. Go to the post or page where you added the form. Fill out the form and submit it. Check if the form works correctly.

Using Form Plugins

WordPress has many form plugins. These plugins make adding forms easier. Some popular plugins are:

• Contact Form 7
• WPForms
• Gravity Forms

How To Use A Form Plugin

Follow these steps to use a form plugin:

1. Go to your WordPress dashboard.
2. Click on “Plugins”.
3. Click “Add New”.
4. Search for your chosen form plugin.
5. Click “Install Now”.
6. Click “Activate”.
7. Follow the plugin instructions to create a form.
8. Add the form to a post or page using a shortcode.

Customizing Your Form

You may want to customize your form. Change the appearance or add more fields. Here are some tips:

Change Form Appearance

Use CSS to change the form’s appearance. Add CSS styles to your theme’s stylesheet. For example:

                form {
                    background-color: #f9f9f9;
                    padding: 20px;
                    border-radius: 5px;
                }

                label {
                    display: block;
                    margin-bottom: 5px;
                }

                input, textarea {
                    width: 100%;
                    padding: 10px;
                    margin-bottom: 10px;
                }
            

Add More Fields

To add more fields, modify the HTML code. Here is an example with a phone number field:

Name:


Email:


Phone:


Message:

Credit: www.wpbeginner.com

Handling Form Submissions

When users submit a form, you need to handle the data. Here are two ways:

Using A Form Plugin

Many form plugins handle submissions. They store data in your WordPress dashboard. Some plugins send email notifications. Check your plugin’s settings for options.

Using Custom Php

If you use custom HTML forms, you need to handle submissions with PHP. Here is a simple example:

php
                    if ($_SERVER["REQUEST_METHOD"] == "POST") {
                        $name = $_POST['name'];
                        $email = $_POST['email'];
                        $phone = $_POST['phone'];
                        $message = $_POST['message'];

                        // Save or process data
                        // For example, send an email
                        mail("your-email@example.com", "New Form Submission", $message);
                    }
                ?

Credit: thimpress.com

Troubleshooting Common Issues

Sometimes, forms may not work as expected. Here are some common issues and solutions:

Form Not Displaying

Check if you pasted the HTML code correctly. Make sure you switched to the “Text” editor. Check for any missing or extra tags.

Form Submissions Not Working

Check your form’s action attribute. Make sure it points to the correct URL. Check your PHP code for errors.

Form Styling Issues

Check your CSS styles. Make sure they are correctly applied. Use browser developer tools to inspect elements.