Forms are among the most useful elements to add to a WordPress site. They allow you to capture user information and data for email newsletters, contact forms, surveys, and more.
Typically, WordPress forms require installing a plugin that helps generate the form HTML and handles the backend processing and email notifications. This begs the question of creating a form in WordPress without a plugin. Is it even possible?
The answer is yes. You can build a simple form without plugins with some basic HTML, PHP, and WordPress knowledge. Stick around to find out how.
What You Will Need Before Getting Started
Before diving into the form creation process, you must ensure you have a few technical requirements in place.
Here’s an overview of what you’ll need:
- Access to your WordPress site’s admin dashboard and backend, where you can create new pages. This requires admin-level access.
- Basic knowledge of HTML form fields like text inputs, radio buttons, drop downs, etc. We’ll cover the key ones you’ll need.
- Understanding PHP variables, arrays, and validation to handle submitted data securely.
- A text editor like Notepad++ for writing HTML and PHP code before adding it to WordPress.
- Decide the specific form fields you want, such as name, email, phone number, message, etc. These will become inputs.
- A submit button so users can submit the completed form.
- A PHP script on your server will deliver the submitted data to you via email.
- Some kind of spam/bot protection like a Captcha.
Step 1: Create the Form HTML
Let’s start by opening up a plain text editor to begin coding the frontend form HTML. This will create the fields that the user sees and interacts with within the browser.
- We’ll begin with opening and closing <form> tags to house the entirety of the form. Within that, we can add form elements line by line.
- Start with a few <input> fields for the data we want to be submitted. The main ones are name, email, and message. Set the type attribute to “text” for most. Set it to “email”, which auto-validates the format.
- Give each input a unique name and id attribute that we’ll reference later from PHP.
- Below the inputs, add a <textarea> tag for the message content.
- At the very bottom, insert a submit <button> that users can click to send the form. This will have a type of “submit”.
- When finished, the HTML will create text boxes, an email field, a message box, and a submit button that make up the basic user interface of the form.
Step 2: Connecting the Form to PHP
Now that the frontend form is built in HTML, we need to make it functional by connecting it to a PHP script to handle the submitted data.
- Create a new PHP file in your text editor and save it as form-process.php or something similar. This file will process the form.
- The input field names and values are sent as POST arrays to PHP when the form is submitted. So we can access them via $_POST[‘name’], $_POST[’email’], etc.
- Use those arrays to retrieve the submitted data. Then, validate and sanitize the inputs to prevent security vulnerabilities like SQL injections.
- Next, construct variables for the admin email $to address and $subject line content.
- Craft the body of the email using the sanitized POST values. You can format it with HTML.
- Use PHP’s mail() function to send the email. Pass it the key parameters of to, subject, message, headers, etc.
- Finally, provide a confirmation message back to the user thanking them and indicating the form was sent.
This PHP does all the heavy backend lifting of securely delivering the submitted form data via email.
Step 3: Displaying the Form in WordPress
With the standalone HTML and PHP built, we can now display the form on a WordPress page.
- Start by creating a new page in the WordPress admin dashboard. Give it an appropriate title like “Contact Us”.
- Next, switch the editor mode from Visual to Text so you can add raw code.
- In Text mode, paste in the HTML you created earlier for the form fields.
- Beneath the closing </form> tag, add a PHP snippet to include your separate PHP processing file:
- <?php include ‘form-process.php’; ?> This loads the PHP externally.
- Double-check that the form’s “action” attribute points to your PHP file name. This tells WordPress where to send the data when submitted.
- Once the HTML and PHP include are set up on the page, publish it.
View the live page on your site, and you should now see your custom form. Submit it to test that it works end-to-end.
Step 4: Testing and Troubleshooting the Form
Testing and troubleshooting are critical when creating forms from scratch to smooth out any issues.
Here are some tips:
- Test thoroughly by submitting the form multiple times with different inputs. Verify it sends email successfully each time.
- Watch for any PHP errors or typos that could break functionality.
- Confirm all form fields are coming through in the email by matching names to POST values.
- Make sure the success message displays after the form is sent.
- Try incomplete submissions by not filling out all fields. See how validation responds.
- Do stress tests by quickly submitting many times in a row, filling forms incorrectly, etc.
- Tweak validation and security measures as needed. Add a captcha if needed to prevent spam.
- Check form behavior on different devices like mobile, tablets, and browsers.
Take time to rigorously test your form so that when you launch it live for users, it is running smoothly.
Pros and Cons of Creating Forms Without a Plugin
Here are some pros and cons of creating a WordPress form without a plugin:
- More Flexibility and Customization: You can build the form to suit your needs rather than relying on a one-size-fits-all plugin.
- Less Bloat on Your Site: Form plugins can slow down your site’s performance. Without one, your site is lighter and faster.
- Better Security: Coding it yourself avoids vulnerabilities found in some plugins. You control data validation and sanitization.
- Full Control: You manage every aspect, from fields to emails to error handling, rather than relying on a plugin’s functionality.
- Learn New Skill: You’ll gain HTML, PHP, and WordPress coding experience by doing it yourself.
- More Complex: It requires more effort and stronger coding skills vs. quick plugin installs.
- No Support: If stuck, you can’t turn to plugin customer support, forums, or documentation.
- Time Investment: Building from scratch takes more development time than a ready-made plugin solution.
- Updates: You must manage updates and maintenance of the custom form code yourself.
- Limited Features: This won’t include advanced features some plugins provide, like multi-page forms, analytics, etc.
- Risk of Breaking: Unlike a robust plugin, one small mistake in code could break the form.
So, in summary, creating your own form requires more work but provides a customizable solution. Using a plugin is quicker and easier but reduces flexibility. Choose the option that best fits your site needs, skills, and time.
In this article, I’ve shown you how to build a functional contact form in WordPress without relying on plugins.
With some HTML, PHP, and WordPress code, you can create forms tailored to your needs from the ground up. This gives you more flexibility and control than plugins.
Use this as a starting point to make more advanced forms!
Also Read: 8 Core Benefits of Using WordPress