This Is How to Create a Form in the WordPress Admin Dashboard and Save Data in a Custom Database
As a WordPress developer, one of the most common tasks you'll encounter is the need to create custom forms and store the submitted data in a database. Whether you're building a plugin, a theme, or a custom WordPress website, the ability to integrate form functionality and data storage is essential.
In this comprehensive guide, we'll walk you through the process of creating a form in the WordPress admin dashboard and saving the submitted data to a custom database. We'll cover everything from setting up a WordPress plugin to building the form and implementing the data storage logic.
Step 2: Add an Admin Options Page
Next, we'll create an admin options page where our custom form will reside. This will integrate the form seamlessly with the WordPress admin area.
- Create a new function within your plugin file called
custom_form_plugin_menu()
:
function custom_form_plugin_menu() {
add_menu_page(
'Custom Form Plugin',
'Custom Form',
'manage_options',
'custom-form-plugin',
'custom_form_plugin_page',
'dashicons-admin-generic',
6
);
}
add_action('admin_menu', 'custom_form_plugin_menu');
This function will add a new menu item called "Custom Form" in the WordPress admin dashboard, under the "Custom Form Plugin" menu title.
- Create a new function called
custom_form_plugin_page()
that will be responsible for rendering the form:
function custom_form_plugin_page() {
// Check if the form has been submitted
if (isset($_POST['custom_form_submit'])) {
// Handle form submission and data saving
// (We'll implement this in Step 3)
}
// Display the form HTML
?>
<div class="wrap">
<h1>Custom Form Plugin</h1>
<form method="post" action="">
<!-- Form fields go here -->
<input type="submit" name="custom_form_submit" class="button button-primary" value="Submit" />
</form>
</div>
<?php
}
This function will handle the form submission and data saving, as well as display the form HTML within the WordPress admin dashboard.
Step 3: Create the Form and Save the Data
Now, let's implement the form creation and data saving logic.
- First, we need to create a custom database table to store the form data. Add the following function to your plugin file, which will be executed when the plugin is activated:
function custom_form_plugin_activate() {
global $wpdb;
$table_name = $wpdb->prefix . 'custom_form_data';
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
register_activation_hook(__FILE__, 'custom_form_plugin_activate');
This function will create a new database table called wp_custom_form_data
(where wp_
is the prefix of your WordPress database) with the following fields: id
, name
, email
, message
, and created_at
.
- Next, update the
custom_form_plugin_page()
function to handle the form submission and data saving:
function custom_form_plugin_page() {
global $wpdb;
$table_name = $wpdb->prefix . 'custom_form_data';
// Check if the form has been submitted
if (isset($_POST['custom_form_submit'])) {
// Sanitize the input data
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
$message = sanitize_textarea_field($_POST['message']);
// Insert the data into the custom database table
$wpdb->insert(
$table_name,
array(
'name' => $name,
'email' => $email,
'message' => $message
),
array(
'%s',
'%s',
'%s'
)
);
// Display a success message
echo '<div class="notice notice-success is-dismissible"><p>Form data saved successfully!</p></div>';
}
// Display the form HTML
?>
<div class="wrap">
<h1>Custom Form Plugin</h1>
<form method="post" action="">
<table class="form-table">
<tr>
<th><label for="name">Name</label></th>
<td><input type="text" id="name" name="name" class="regular-text" required></td>
</tr>
<tr>
<th><label for="email">Email</label></th>
<td><input type="email" id="email" name="email" class="regular-text" required></td>
</tr>
<tr>
<th><label for="message">Message</label></th>
<td><textarea id="message" name="message" rows="5" class="regular-text" required></textarea></td>
</tr>
</table>
<input type="submit" name="custom_form_submit" class="button button-primary" value="Submit" />
</form>
</div>
<?php
}
This updated function first checks if the form has been submitted. If so, it sanitizes the input data and inserts it into the custom database table using the $wpdb
class. Finally, it displays a success message to the user.
- To make sure the plugin is loaded correctly, add the following line at the bottom of your plugin file:
add_action('plugins_loaded', 'custom_form_plugin_menu');
Your complete plugin file should now look like this:
<?php
/*
Plugin Name: Custom Form Plugin
Plugin URI: https://flowpoint.ai
Description: Create a custom form in the WordPress admin dashboard and save the data to a custom database.
Version: 1.0
Author: Flowpoint.ai
Author URI: https://flowpoint.ai
*/
function custom_form_plugin_menu() {
add_menu_page(
'Custom Form Plugin',
'Custom Form',
'manage_options',
'custom-form-plugin',
'custom_form_plugin_page',
'dashicons-admin-generic',
6
);
}
add_action('admin_menu', 'custom_form_plugin_menu');
function custom_form_plugin_page() {
global $wpdb;
$table_name = $wpdb->prefix . 'custom_form_data';
// Check if the form has been submitted
if (isset($_POST['custom_form_submit'])) {
// Sanitize the input data
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
$message = sanitize_textarea_field($_POST['message']);
// Insert the data into the custom database table
$wpdb->insert(
$table_name,
array(
'name' => $name,
'email' => $email,
'message' => $message
),
array(
'%s',
'%s',
'%s'
)
);
// Display a success message
echo '<div class="notice notice-success is-dismissible"><p>Form data saved successfully!</p></div>';
}
// Display the form HTML
?>
<div class="wrap">
<h1>Custom Form Plugin</h1>
<form method="post" action="">
<table class="form-table">
<tr>
<th><label for="name">Name</label></th>
<td><input type="text" id="name" name="name" class="regular-text" required></td>
</tr>
<tr>
<th><label for="email">Email</label></th>
<td><input type="email" id="email" name="email" class="regular-text" required></td>
</tr>
<tr>
<th><label for="message">Message</label></th>
<td><textarea id="message" name="message" rows="5" class="regular-text" required></textarea></td>
</tr>
</table>
<input type="submit" name="custom_form_submit" class="button button-primary" value="Submit" />
</form>
</div>
<?php
}
function custom_form_plugin_activate() {
global $wpdb;
$table_name = $wpdb->prefix . 'custom_form_data';
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
register_activation_hook(__FILE__, 'custom_form_plugin_activate');
add_action('plugins_loaded', 'custom_form_plugin_menu');
This plugin will create a custom form in the WordPress admin dashboard and save the submitted data to a custom database table. Users can access the form by navigating to the "Custom Form" menu item in the admin dashboard.
Remember to replace the plugin header information with your own details, such as the plugin name, description, and author information.
By following this guide, you can create a custom form in the WordPress admin dashboard and save the data to a custom database, providing a powerful and flexible solution for your WordPress website or plugin.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your website and directly generate recommendations to fix them