In this post, we explained about How to Create A Custom Form in WordPress without Plugin. In WordPress there are many different plugins are available to integrate the forms but We can easily to add the custom form in the WordPress. I hope you this way can helps to create a custom form in your WordPress.

Step 1:

Create a file in your theme folder and named it as contact.php

<?php
/* Template Name: Contact */
?>

Step 2:

Create a form in the contact.php.

<form method="POST">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="firstname">First Name</label>
                        <input type="text" class="form-control" name="firstname" id="firstname" autocomplete="off">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lastname">Last Name</label>
                        <input type="text" class="form-control" name="lastname" id="lastname" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="inputAddress2">Message</label>
                    <textarea rows="5" class="form-control" name="message" id="message"></textarea>
                </div>
                <input type="hidden" name="submitted" value="1">
                <button type="submit" class="btn btn-success mt-2">Save</button>
            </form>

Step 3:

In the form, submitted hidden input used to verify the form submission. So don’t remove that input from the form.

Step 4:

In WP admin, Go to Pages -> Add New

Create a new page and named it as Contact.

Update the your template name in page attributes (right side).

Step 5:

In the contact.php, Server side validation and insert the data into a table.

Create a wp_contact_form in your database.

if (isset($_POST['submitted'])) {
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $errArr = array();
    if (!$firstname) {
        $errArr['firstname'] = "Please enter your firstname";
    } else {
        if (!preg_match("/^[a-zA-Z-' ]*$/", $firstname)) {
            $errArr['firstname'] = "Only letters and white space allowed";
        }
    }
    if (!$lastname) {
        $errArr['lastname'] = "Please enter your lastname";
    } else {
        if (!preg_match("/^[a-zA-Z-' ]*$/", $lastname)) {
            $errArr['lastname'] = "Only letters and white space allowed";
        }
    }
    if (!$email) {
        $errArr['email'] = "Please enter your email";
    } else if ($email) {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $errArr['email'] = "Invalid email format";
        }
    }
    if (!$message) {
        $errArr['message'] = "Please enter your message";
    }

    if (!$errArr) {
        $data = array();
        $data['firstname'] = $firstname;
        $data['lastname'] = $lastname;
        $data['email'] = $email;
        $data['message'] = $message;
        $data['createdAt'] = date('Y-m-d H:i:s');
        $data['updatedAt'] = date('Y-m-d H:i:s');
        // save
        global $wpdb;
        $contactus_table = $wpdb->prefix."contact_form";
        $result = $wpdb->insert($contactus_table, $data);
        if ($result) {
            $successMsg = "Contact has been sent successfully";
        }
    }
}

Step 6:

Place the error and success messages in the contact.php file.

<?php
            if ($successMsg) {
                echo '<p class="text-success">' . $successMsg .  '</p>';
            }
            if ($errArr) {
                ?>
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-danger">Please correct the invalid fields:</h4>
                    </div>
                    <div class="card-body">
                        <?php
                        foreach($errArr as $key => $eMessage) {
                            echo '<p class="text-danger">' . $eMessage . '</p>';
                        }
                        ?>
                    </div>
                </div>
                <?php
            }
            ?>

Final, the contact.php file look like this

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 * 
 * Template Name: contact
 */
if (isset($_POST['submitted'])) {
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $errArr = array();
    if (!$firstname) {
        $errArr['firstname'] = "Please enter your firstname";
    } else {
        if (!preg_match("/^[a-zA-Z-' ]*$/", $firstname)) {
            $errArr['firstname'] = "Only letters and white space allowed";
        }
    }
    if (!$lastname) {
        $errArr['lastname'] = "Please enter your lastname";
    } else {
        if (!preg_match("/^[a-zA-Z-' ]*$/", $lastname)) {
            $errArr['lastname'] = "Only letters and white space allowed";
        }
    }
    if (!$email) {
        $errArr['email'] = "Please enter your email";
    } else if ($email) {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $errArr['email'] = "Invalid email format";
        }
    }
    if (!$message) {
        $errArr['message'] = "Please enter your message";
    }

    if (!$errArr) {
        $data = array();
        $data['firstname'] = $firstname;
        $data['lastname'] = $lastname;
        $data['email'] = $email;
        $data['message'] = $message;
        $data['createdAt'] = date('Y-m-d H:i:s');
        $data['updatedAt'] = date('Y-m-d H:i:s');
        // save
        global $wpdb;
        $contactus_table = $wpdb->prefix."contact_form";
        $result = $wpdb->insert($contactus_table, $data);
        if ($result) {
            $successMsg = "Contact has been sent successfully";
        }
    }
}

get_header();

?>
<style>
label:after {
  content:"*";
  color:red;
}
</style>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h2 class="text-primary">Contact:</h2>
            <?php
            if ($successMsg) {
                echo '<p class="text-success">' . $successMsg .  '</p>';
            }
            if ($errArr) {
                ?>
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-danger">Please correct the invalid fields:</h4>
                    </div>
                    <div class="card-body">
                        <?php
                        foreach($errArr as $key => $eMessage) {
                            echo '<p class="text-danger">' . $eMessage . '</p>';
                        }
                        ?>
                    </div>
                </div>
                <?php
            }
            ?>
            <form method="POST">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="firstname">First Name</label>
                        <input type="text" class="form-control" name="firstname" id="firstname" autocomplete="off">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lastname">Last Name</label>
                        <input type="text" class="form-control" name="lastname" id="lastname" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="inputAddress2">Message</label>
                    <textarea rows="5" class="form-control" name="message" id="message"></textarea>
                </div>
                <input type="hidden" name="submitted" value="1">
                <button type="submit" class="btn btn-success mt-2">Save</button>
            </form>
        </div>
    </div>
</div>
<?php
get_footer();
?>