How to Create a Form In WordPress Without Plugin?
Creating a form in WordPress without using a plugin can be accomplished through custom coding. This approach gives you complete control over the form's functionality and appearance, but it requires a basic understanding of HTML, CSS, and PHP. In this article, we will walk you through the steps to create a simple contact form in WordPress without relying on plugins. We will cover setting up the form, handling form submissions, and adding some basic styling.
Why Create a Form Without a Plugin?
Using plugins is often the easiest way to add functionality to your WordPress site. However, there are several reasons you might want to create a form without a plugin:
- Performance: Plugins can add bloat to your site, slowing it down.
- Customization: Custom coding allows for more precise control over form functionality and styling.
- Learning: Building a form from scratch can be a valuable learning experience.
Step-by-Step Guide to Creating a Form in WordPress
1. Setting Up the Form
First, you'll need to create an HTML form. You can add this form to any page or post using the WordPress editor. For this example, we'll add a contact form to a page.
- Open the WordPress Editor: Navigate to the page where you want to add the form.
- Switch to HTML View: Click on the three dots in the top right corner of the editor and select "Code Editor."
Now, add the following HTML code to create a basic contact form:
<form method="post" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>">
<p>
<label for="cf-name">Name</label>
<input type="text" id="cf-name" name="cf-name" pattern="[a-zA-Z0-9 ]+" required>
</p>
<p>
<label for="cf-email">Email</label>
<input type="email" id="cf-email" name="cf-email" required>
</p>
<p>
<label for="cf-message">Message</label>
<textarea id="cf-message" name="cf-message" required></textarea>
</p>
<p><input type="submit" name="cf-submitted" value="Send"></p>
</form>
2. Handling Form Submissions
Next, you'll need to handle the form submission with PHP. This code will process the form data and send it via email. Add the following code to your theme's functions.php file:
function deliver_mail() {
// Check if the form is submitted
if ( isset( $_POST['cf-submitted'] ) ) {3. Styling the Form
To enhance the appearance of your form, you can add custom CSS. Place the following CSS code in your theme's style.css file:
form {
max-width: 600px;
margin: 0 auto;
padding: 1em;
background: #f9f9f9;
border-radius: 5px;
}Conclusion
Creating a form in WordPress without a plugin involves writing custom HTML, PHP, and CSS. This method can improve your site's performance and provide greater control over form customization. By following the steps outlined in this guide, you can create a simple yet effective contact form.
Remember to test your form thoroughly to ensure it works correctly. This includes verifying that emails are sent and received as expected and that all form fields are validated properly.
News & Blog