Building a Contact Form Plugin with WordPress
Posted on 18th June 2023
WordPress is a great content management system and one of its main advantages is the ease with which you can extend its functionality with plugins. In this article, we will show you how to build a simple contact form plugin for WordPress.
What is a Plugin?
A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress.
Why Use a Plugin?
There are two main reasons why you would want to use a plugin. Firstly, it is a great way to learn how to code in PHP and secondly, it can save you a lot of time and effort if you need to add a specific functionality to your website.
How to Create a Plugin?
Creating a WordPress plugin is a two-step process. Firstly, you need to create a PHP file with the plugin code and secondly, you need to upload the file to your WordPress website.
Step 1: Create the Plugin File
All WordPress plugins must be stored in a folder called “wp-content/plugins”. Create a new folder called “contact-form” and inside that folder, create a new file called “contact-form.php”.
Open the “contact-form.php” file in a text editor and add the following code:
Save the file and upload it to your WordPress website.
Step 2: Activate the Plugin
Now that the plugin file has been uploaded, you need to activate it. Go to the WordPress admin area and click on “Plugins”. You should see the “Contact Form” plugin listed here. Click on the “Activate” button to activate the plugin.
Step 3: Create the Plugin Code
Now that the plugin is activated, we can start adding the code that will power our contact form.
Add the following code to the “contact-form.php” file:
<input type='text' name='contact_form_settings[contact_form_text_field]' value='’>
<input type='checkbox' name='contact_form_settings[contact_form_checkbox_field]' value=’1′>
<input type='radio' name='contact_form_settings[contact_form_radio_field]' value=’1′>
<option value='1' >Option 1
<option value='2' <?php if ( isset( $options['contact_form_select_field'] ) ) { selected
Building a Contact Form Plugin with WordPress
Adding a contact form to your WordPress site is a great way to give your visitors an easy way to get in touch with you. In this tutorial, we will show you how to build a simple contact form plugin for WordPress.
Creating the Plugin
The first thing you need to do is create a new folder for your plugin. For this tutorial, we will be creating a folder called “contact-form-plugin”.
Next, you need to create a file called “contact-form-plugin.php” in your plugin folder. This will be the main plugin file.
In your plugin file, you need to start by adding the following code:
In the code above, we are just setting up the plugin header information and defining a few basic actions and filters.
Next, you need to write the code for your contact form. For this tutorial, we will be creating a simple contact form with the following fields:
Name
Message
You can add as many or as few fields as you want to your contact form.
The code for our contact form will go in the “contact-form-plugin.php” file.
Adding the Contact Form
In your plugin file, you need to add the following code:
// The contact form shortcode
function contact_form_shortcode()
{
ob_start();
?>
<form id="contact-form" action="” method=”POST”>
<input type="text" name="name" id="name" class="form-control" value="”>
<input type="email" name="email" id="email" class="form-control" value="”>
<?php
return ob_get_clean();
}
add_shortcode( 'contact_form', 'contact_form_shortcode' );
In the code above, we are creating a shortcode for our contact form. We are also using the WordPress "ob_start" function to store the output of our contact form in a buffer. This is so we can return the output of the contact form instead of echoing it.
Next, we are going to create a function to process our contact form data. This function will validate the data, send the email, and display any error messages.
// Process the contact form data
function process_contact_form()
{
// Check the nonce
if ( !isset( $_POST['contact_form_nonce'] ) || !wp_verify_nonce( $_POST['contact_form_nonce'], 'contact_form' ) )
return;
// Check the honeypot
if ( isset( $_POST['email_2'] ) )
return;
// Sanitize the data
$name = sanitize_text_field( $_POST['name'] );
$email = sanitize_email( $_POST['email'] );
$message = sanitize_text_field( $_POST['message'] );
// Validate the data
if ( empty( $name ) || empty( $email ) || empty( $message ) ) {
$error = 'All fields are required.';
} elseif ( !is_email( $email ) ) {
$error = 'Invalid email address.';
} else {
// Send the email
$to = get_option( 'admin_email' );
$subject = "[Contact Form] $name";
$body = "Name: $namenEmail: $emailnn$message";
$headers = "From: $name rn”;
if ( wp_mail( $to, $subject, $body, $headers ) ) {
$sent = true;
} else {
$error = ‘Error sending email.’;
}
}
// Handle the results
if ( isset( $sent ) && $sent == true ) {
$class = ‘success’;
$msg = ‘Your message has been sent.’;
} elseif ( isset( $error ) ) {
$class = ‘danger’;
$msg = $error;
} else {
$class = ‘info’;
$msg = ‘Please fill out the form below.’;
}
// Return the results
$output = ‘
‘;
return $output;
}
add_filter( ‘the_content’, ‘process_contact_form’ );
?>
In the code above, we are first checking to see if the form has been submitted. We are also checking the nonce and the honeypot.
If the form has been submitted, we are sanitizing and validating the data. If the data is valid, we are sending the email. If there are any errors, we are displaying them to the user.
Finally, we are returning the results of the form submission.
Adding the JavaScript
The last thing we need to do is add the JavaScript for our contact form. This JavaScript will handle the form submission using Ajax.
Create a new file called “contact-form-plugin.js” in your plugin folder and add the following code:
jQuery(document).ready(function($) {
$(‘#contact-form’).submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
type: ‘POST’,
url: form.attr(‘action’),
data: form.serialize(),
success: function(data) {
form.replaceWith(data);
}
});
});
});
In the code above, we are using the jQuery “submit” event to handle the form submission. We are also using the jQuery “ajax” function to submit the form data to the server.
When the form is submitted successfully, we are replacing the form with the results of the form submission.
Testing the Plugin
Now that we have created our contact form plugin, it’s time to test it out.
First, you need to activate the plugin. You can
