WordPress custom HTML form + database practice! Newbie can do it!

Can you believe it? Contact forms, user registration forms, or data submission forms, the principle behind the forward part of sth. HTML Forms + Backend Database Processing. This article will explain in detail, from basic concepts, to practicalities, to considerations, how the WordPress to create an HTML form and store the data in the database.

I. Why customize HTML forms?

WordPress While there are many form plugins (such as Contact Form 7,WPForms), but in some scenarios we need to write the HTML form by hand:

Customizing Business Logic: For example, you need to collect additional fields or store them in a custom table.
Higher performance: No need to load complex plugins with lighter code.
Fully controllable: Front-end design and back-end processing logic are up to you.

Second, the basic structure of the HTML form

The simplest HTML form consists of an input box, a submit button, and a form Tags, for example:

Name:
  

  Email:

Description:

method="post": Submitting form data with POST.
action="": Submit to the current page.
name: The key attribute of the field through which the value is retrieved after submission.

Third, how to handle form data in WordPress

exist WordPress In the functions.php or custom plugins to add processing logic.

functions.php file

Every WordPress theme comes with a functions.php Documentation.
You can write code here to have WordPress perform this logic when the theme is loaded.
Suitable for putting some simple functions, such as form data processing.

Custom Plug-ins

If the function is more independent and complex, it is better to write it as a plugin.
The plugin has a separate folder and PHP files that won't be lost with a theme change.
For example, make a "custom form collection plugin", so that the code is clearer and more secure.

1. Getting form data

if ( isset($_POST['submit_form']) ) {
    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
}

utilization sanitize_text_field() respond in singing sanitize_email() Filtering of data to ensure security.

2. Access to databases

WordPress provides $wpdb objects that can easily interact with the database.

global $wpdb.
$table_name = $wpdb->prefix . "custom_form"; // data table name

$wpdb->insert(
    $table_name,
    array(
        'name' => $name, 'email' => $email, // table name.
        'email' => $email, 'created_at' => current_time('mysql')
        'created_at' => current_time('mysql')
    )
).

Description:

$wpdb->prefix is the database table prefix (the default is wp_).
insert() method will write the data to the specified table.

3. Creating tables in the database

You need to first create a table for the form to store the data, and you can run the SQL when the plugin is activated:

function create_custom_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . "custom_form";

    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT,
      name varchar(50) NOT NULL, email varchar(100)
      email varchar(100) NOT NULL, created_at datetime DEFORM
      created_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL, PRIMARY KEY (id)
      PRIMARY KEY (id)
    ) $charset_collate;";

    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta($sql);
}
add_action('after_switch_theme', 'create_custom_table');

This code will create the data table when switching topics.

IV. Displaying forms on the page

WordPress suggests that you should pass the Shortcode to call the form so that it can be embedded on any page.

function custom_form_shortcode() {
    ob_start();
    The following is an example of a customized form. 
    
       
      
      
    </form
    <?php
    return ob_get_clean();
}
add_shortcode('custom_form', 'custom_form_shortcode');

Insert in the page [custom_form] The form can be displayed.

V. How to view submitted data

If you wish to view it in the backend, you can write a simple admin page with the $wpdb->get_results() Pull the data and show it.

VI. Security and Optimization Recommendations

Data Filtering and Validation
- utilization sanitize_*() series function cleans up the input data.
- Regular validation of special fields such as mailboxes.
Preventing CSRF Attacks
WordPress offers wp_nonce_field() together with check_admin_referer() to secure the request.
Pagination and Restrictions
- Add frequency limits to form submissions to avoid spamming.
- Do paging when displaying data to avoid slow loading in the background.
Consider using AJAX
Forms can be submitted through AJAX, a combination of technologies used to create more responsive web applications, allowing pages to be refreshed without the need for a refresh, enhancing the user experience.

VII. Summary

The core steps to create an HTML form and connect to a database in WordPress include:Write HTML form structures > Get and process data in PHP > Use the $wpdb Write to database > Display form on frontend with shortcode.

Compared to the plug-in approach, custom forms are more flexible and can accurately meet project needs. Although the amount of code is slightly larger, the freedom and control it brings is worth the investment.

Once you master this process, you can easily expand your site's functionality, such as customizing the enrollment system, questionnaire collection, member information management, and more possibilities for your site!

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off