How to Create a Custom Form In WordPress Without Plugin

By /

If you are WordPress Beginner, And want to Create a custom Form in WordPress without a plugin. It can be difficult for you. Especially, if you are not familiar with PHP and HTML, CSS, and JavaScript. If you have a basic understanding of these languages this blog is for you. Then you can simply copy and paste the code that I will give at the end of the current post. I know most of the developers are gonna copy code :). We all are certified copy pasters.
If you are just a beginner and don’t have a basic understanding of the above-mentioned languages. I’ll recommend you use a third-party WordPress plugin.

Well, If you are ready Let’s Get started.

Create a Custom Contact Form Without Plugin – WordPress Shortcode Method

We can simply write a WordPress shortcode that we can use to display our form on our WordPress website. I’ll explain the code structure in detail. But I have also given the whole code at the end of this post.

Writing From Structure Using HTML

I am gonna create a simple Contact form with the following Fields:

  1. First Name
  2. Last Name
  3. Subject
  4. Email
  5. Message

I am gonna use the following HTML for structuring my form elements. After that, I’ll convert this HTML into a WordPress shortcode. So we will be able to print this form anywhere on the site Using a shortcode.

<!-- Form Code Started -->
    <div class="wp4all-form-wrapper">
        <form id="wp4all_contact_form">
            <!-- First Name And Last Name  -->
            <div class="wp4all-fields-group">
                <!-- First Name Field -->
                <div class="wp4all-field">
                    <label for="fname">First Name</label>
                    <input type="text" id="fname" name="fname" required>
                </div>
                <!-- Last Name Field  -->
                <div class="wp4all-field">
                    <label for="lname">Last Name</label>
                    <input type="text" id="lname" name="lname">
                </div>
            </div>
            <!-- Email Field  -->
            <div class="wp4all-field">
                <label for="client-email">Email</label>
                <input type="email" id="client-email" name="clientEmail" required>
            </div>
            <!-- Subject Field  -->
            <div class="wp4all-field">
                <label for="client-email">Subject</label>
                <input type="text" id="clientSubject" name="client-subject">
            </div>
            <!-- Message Field  -->
            <div class="wp4all-field">
                <label for="client-message">Message</label>
                <textarea name="clientMessage" id="client-message" required></textarea>
            </div>
            <!-- Nonce Hidden Field For Security -->
            <!-- We will generate value dynamically of this field later -->
            <input type="hidden" value="fxb87093847">
            <!-- Submit Button  -->
            <div class="wp4all-submit-btn-wrap">
                <input type="submit" value="Send Message">
            </div>
        </form>
        <!-- We will our Javascript code here  -->

Now, It is time to write some CSS for our form. You can use this CSS code or write your own. The CSS can be added in the Additional CSS Area (Customizer -> Additional CSS)

/* Form Styles  */
    .wp4all-form-wrapper{
        padding: 25px;
        border-radius: 5px;
        border: 1px solid #eee;
        max-width: 400px;
        font-family: sans-serif;
        /* Some Variables  */
        --border-color: #eee;
        --border-focus-color: purple;
        margin: 20px auto;
    }
    .wp4all-field{
        margin-top: 20px;
    }
    .wp4all-field .error{
        border-color:red;
    }
    .wp4all-field input,.wp4all-field textarea{
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid var(--border-color);
        outline: none;;
    }
    .wp4all-field input:focus,.wp4all-field textarea:focus{
        border: 1px solid var(--border-focus-color);
    }
    .wp4all-fields-group{
        display: flex;
        gap: 10px;
    }
    .wp4all-submit-btn-wrap input{
        width: 100%;
        border: none;
        padding: 8px;
        margin-top: 10px;
        background:var(--border-focus-color);
        color: white;
    }
    /* Form Styles Ended  */

Convert Written HTML into a WordPress shortcode.

Now Let’s Convert the Form into a WordPress Shortcode. So we will be able to see how the form looks on the WordPress front end. Here, some PHP and WordPress predefined functions come in.

We are going to use the ‘add_shortcode()‘. It is a default WordPress function that registers our desired shortcodes in WordPress. It takes two parameters (Input Values).

<?php
add_shortcode( $tag:string, $callback:callable );

The first parameter is the shortcode name (we also say it Tag name).
The second Parameter is a PHP Callback Function (It will be a PHP function that we will define to return our output. Actually, we will be adding our form HTML code into this callback function).

If you are interested in reading more about the add_shortcode() function visit WordPress docs. But Here is the inital structure of our PHP code.

<?php
// Register WordPress Shortcode
add_shortcode( 'wp4all_contact_form', 'print_wp4all_contact_form' );

// Defining callback function that we Used in Shortcode i.e print_wp4all_contact_form
function print_wp4all_contact_form(){
    ob_start() // Start a PHP object to return the form code on that php object.
    ?>

    <!-- Our Form HTML Code Can Go Here  -->

    
    <?php
    // Return the Php object as function value 
    return ob_get_clean();

}

We will be able to use the [wp4all_contact_form] shortcode to print our form in WordPress. But Let’s complete it first.

Let’s Add Our form’s HTML code to this function. 

<?php
// Register WordPress Shortcode
add_shortcode( 'wp4all_contact_form', 'print_wp4all_contact_form' );

// Defining callback function that we Used in Shortcode i.e print_wp4all_contact_form
function print_wp4all_contact_form(){
    ob_start(); // Start a PHP object to return the form code on that php object.
    ?>
    <!-- Form Code Started -->
    <div class="wp4all-form-wrapper">
        <form id="wp4all_contact_form">
            <!-- First Name And Last Name  -->
            <div class="wp4all-fields-group">
                <!-- First Name Field -->
                <div class="wp4all-field">
                    <label for="fname">First Name</label>
                    <input type="text" id="fname" name="fname" required>
                </div>
                <!-- Last Name Field  -->
                <div class="wp4all-field">
                    <label for="lname">Last Name</label>
                    <input type="text" id="lname" name="lname">
                </div>
            </div>
            <!-- Email Field  -->
            <div class="wp4all-field">
                <label for="client-email">Email</label>
                <input type="email" id="client-email" name="clientEmail" required>
            </div>
            <!-- Subject Field  -->
            <div class="wp4all-field">
                <label for="client-email">Subject</label>
                <input type="text" id="clientSubject" name="client-subject">
            </div>
            <!-- Message Field  -->
            <div class="wp4all-field">
                <label for="client-message">Message</label>
                <textarea name="clientMessage" id="client-message" required></textarea>
            </div>
            <!-- Nonce Hidden Field For Security -->
            <!-- We will generate value dynamically of this field later -->
            <input type="hidden" value="fxb87093847">
            <!-- Submit Button  -->
            <div class="wp4all-submit-btn-wrap">
                <input type="submit" value="Send Message">
            </div>
        </form>
        <!-- We will add our Javascript code here  -->
        <script></script>
    </div>
    <!-- Form Code Ended  -->
    <?php
    // Return the Php object as function value 
    return ob_get_clean();
}

If you want to see the output. you can add the above code to your theme’s Functions.php. But we will be doing some changes in that code later. But For Now, our shortcode should work fine. I am using the WordPress Block Editor to Place the shortcode you can use any.

Screenshot of wordpress custom contact form shortcode.

This is how your form should look if you use my given CSS code. But Don’t worry I’ll add the final code at the end of this blog post. For now, I am just trying to explain how things are going.

screenshot of custom contact form shottcode output

Let’s Add Some Validations in Our Form Using Javascript

Using JavaScript to deal with validations and errors in form is the best method. As it gives the output without sending the data to the server. But we will do some important server-based validations later, using PHP as well.

<script>
            /* Let's Create a JS function to display Errors and Messages 
            - Fuction name wp4all_display_form_notices. 
            - Function takes 2 Parameters. Message (string) and is_error (Bool)
            - Message that we want to display.
            - Is the Message is kind of error or not 
            - true if error (default value) | false if not an error 
            */
            function wp4all_display_form_notices(message,is_error=true){
                // You can Make this function as complex as you want I'll just alert the message
                if(is_error){
                    alert(`Error: ${message}`);
                }else{
                    alert(`Success: ${message}`);
                }
            }
            /*
            - lets perform some validations when form is submitted 
            - creating a Function that will take form ID as prameter
            - This function will return true if Form is Valid or false if not valid
            - This function will loop through all form fields and validate the required fields only.
            - You can also add password validation in this function if needed. I've added text,textarea and email validation only. 
            */
            function wp4all_is_form_valid(formID){
                let ourForm = document.querySelector(`#${formID}`);
                let formValid = true;
                // let's loop through all required fields using for..of loop
                for (const field of ourForm.elements) {
                    // check if field is required or not 
                    // We have added some 'required attribues in our HTML'
                    if (field.required === true) {
                        // if field is required do validation 

                        // if field type is text or text area 
                        if(field.type==='text' || field.type==='textarea'){
                         // check if this field is empty or not
                         if(field.value.trim()===''){
                            // If field has error add error class to field 
                            document.querySelector(`#${formID} #${field.id}`).classList.add('error');
                            document.querySelector(`#${formID} #${field.id}`).onfocus = function(e){
                                e.target.classList.remove('error');
                            }
                            formValid = false;
                         }
                        }
                        // validate email field 
                        if(field.type==='email'){
                            // Using Regular Expressions to Validate Email Value 
                            let emailRegex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
                            if(!(field.value.match(emailRegex)) || (field.value.trim()==='')){
                                // If field has error add error class to field 
                                document.querySelector(`#${formID} #${field.id}`).classList.add('error');
                                document.querySelector(`#${formID} #${field.id}`).onfocus = function(e){
                                e.target.classList.remove('error');
                            }
                                formValid = false;
                            }
                        }
                    }
                }
                return formValid;
            }
        </script>

The Above Code Contains 2 Javascript Functions. That we have defined But Not called Anywhere Yet. Those are independent functions. We will call those functions when we will submit our form. Also, I’ve added a detailed Explanation about each line I’ve written.

wp4all_is_form_valid() function takes form Id as parameter and loops through all elements no matter how many fields are there in form. It will check all input fields with the ‘required’ attribute.

wp4all_display_form_notices() function can be used to display error messages. I am currently for now Alerting the messages. However, you can extend this function to display beautiful notices easily.

We Will Use Ajax in this Form so the page will not refresh when we will submit it. Let’s add the submit functionality in the form Using JavaScript.

Let’s Code Submit Functionality For the Form Using JavaScript

For Submitting the Form, I am updating the HTML Part of our Form. By Adding onsubmit attribute on the form Element.

<form id="wp4all_contact_form" onsubmit="wp4allSubmitForm()">

I’ve passed a JavaScript Function ‘wp4allSubmitForm()‘, that I’ve not defined Yet. Let’s define this function in JavaScript.

function wp4allSubmitForm(){
                this.event.preventDefault();
                let ourForm = this.event.target;
                let formID = ourForm.id;
                // Check if the Form is Valid through validation function we Created and store it's output in a variable
                let isFormValid = wp4all_is_form_valid(formID);
                if(!isFormValid){
                    // Throuh Error if Form data is invalid.
                    wp4all_display_form_notices('Please Resolve Errors First',true);
                }else{
                    // If Form Data Passed Validation Test then Proceed 
                    // We will Use Ajax to Submit the Form. 
                    // But Let's Just Display a  Success Message for now if Form Data is Valid.
                    wp4all_display_form_notices('Form Submitted',false);
                }
            }

Time to Add Some Ajax to our Form

If you are not familiar with ajax. Don’t worry, just follow the post. I’ll try to explain.

Ajax Means, Asynchronous JavaScript And XML. Implementing it is not as scary as its name, keep calm. In Developers Toung it is just the best way to run PHP functions using JavaScript without refreshing the page (In Background). We are going to do the same. We will run a PHP function in the background that our JavaScript Code will trigger.

JavaScript Fetch API

We will use JavaScript’s Fetch API for that. JavaScript’s Fetch API is used to send data to the server and receive data from the server in the background. Here is a simple Example of a Fetch API Request

// Url On which we want to send data
let ajaxUrl = 'xyx.com';
// JavaScript Fetch API Started
fetch(ajaxUrl,{
    method: 'POST',
    body: requestData // You Just need to deal with it
}).then(function(res)=>{
    return res.text();
}).then(function(data)=>{
    // We will recieve data from server Here in data variable in Text Format
    // We can do Whatever we want with data variable Here.
    console.log(data); 
});
// JavaScript Fetch API Ended

In the case of WordPress, the Ajax URL is a path to the WordPress ‘admin-ajax.php‘ file. This File is part of the core installation of WordPress. This file is programmed to deal with all ajax requests. It is located in https://yourdomain.com/wp-admin/admin-ajax.php. But the Domain for each website can by dynamic.

We can use a WordPress predefined PHP function to print this path inside our JavaScript. It is “admin_url()” WordPress Function.

This Function Helps in Printing WordPress core file paths. You can read the further WordPress Docs Here about this function.

We can use it in javascript like this.

<script>
let ajaxUrl = <?php echo admin_url('admin-ajax.php') ; ?>
</script>

The Above example is a simpler one. If you want to keep the javaScript completely separate from Your Php code. There are other ways to do it. I’ll cover the other method as well later in this post. But For now, let’s stick to a simpler method.

Now, let’s talk about the data object that we need to send to our ajax URL, the second Parameter in Fetch API.

DataObject Creation to Pass in Fetch API

Fetch API Data Object Contains Two Parts (If we are sending data through it).

  • Request Method – Method can be GET or POST like HTML Form Method
  • Request Data – It will be JavaScript FormData Object. We just need to focus on it for now.

Let’s set up the request data that we need to send to the WordPress ajax URL using the POST method. And I’ll now combine the Fetch API Code with Our ‘wp4allSubmitForm()’ function Code Here. I’ll explain the remaining parts Later in this post.

function wp4allSubmitForm(){
    this.event.preventDefault();
    let ourForm = this.event.target;
    let formID = ourForm.id;
    // Check if the Form is Valid through validation function we Created and store it's output in a variable
    let isFormValid = wp4all_is_form_valid(formID);
    if(!isFormValid){
        // Throw Error if Form data is invalid.
        wp4all_display_form_notices('Please Resolve Errors First',true);
    }else{
        // All Ok, let's Prepate Data for Fetch API
        // Url On which we want to send data
        let ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
        // Setup requestData variable
        let requestData = new FormData();
        // Get All form field input Values 
        // and append values to requestData variable using for...of loop
        for (const field of ourForm.elements) {
            // skip the input type submit 
            // and append all other values to requestData variable 
            if(field.type!='submit'){
            let fieldName = field.name;
            let fieldValue = field.value;
            requestData.append(fieldName,fieldValue);
            }
            // append wordpress action hook we want to trigger
            // Here I am adding an action hook named 'wp4all_process_form'
            // I'll write code for this action hook later as php Function
            requestData.append('action','wp4all_process_form');
        }
         // Data is now ready in requestData variable.
        // JavaScript Fetch API Started
        fetch(ajaxUrl,{
            method: 'POST',
            body: requestData // You Just need to deal with it
        }).then(function(res){
            return res.text();
        }).then(function(data){
            // We will recieve data from server Here in data variable in Text Format
            // We can do Whatever we want with data variable Here.
            console.log(data); 
        });
        // JavaScript Fetch API Ended 

        wp4all_display_form_notices('Form Submitted',false);
    }
}

Calling A PHP Function Using JavaScript

In the Above Function, I’ve created requestData Variable using JavaSript FormData() Object. I’ve appended all form Values with that object as well. If you will look into the above code, you will notice I’ve apeneded another value into request data that is ” requestData.append(‘action’,’wp4all_process_form’) “.
By passing action and its value, we are actually asking our Admin-ajax.php to register an action hook for us so that we will be able to run a PHP function using that action hook.

Hook Name in our case is wp4all_process_form. You can just name it anything you want here. This is how we can Use these hooks in our PHP file (Especially in functions.php file)

<?php
add_action('wp_ajax_nopriv_{hook_name}', 'any_php_callback_we_want');
add_action('wp_ajax_{hook_name}', 'any_php_callback_we_want');
function any_php_callback_we_want(){
/* PHP code to Execute Using Ajax Whatever we will echo here it will be the output in our javaScript data function */
wp_die();
}

// So I'll be Using this
add_action('wp_ajax_nopriv_<strong><em>wp4all_process_form</em></strong>', '<em>wp4all_process_form</em>_ajax');
add_action('wp_ajax_<strong><em>wp4all_process_form</em></strong>', '<em>wp4all_process_form</em>_ajax');

function <em>wp4all_process_form_ajax</em>(){
// Process Form and Print/echo Output. 
wp_die();
}

Our ‘Admin-ajax.php’ file will send all our form data to the callback that we hooked i.e wp4all_process_form_ajax. We can use this data in a similar way we deal with $_POST variables in PHP.

Let’s complete our callback function Code.

// callback function to process form we hooked in our Ajax.
function wp4all_process_form_ajax(){

// if email value is set then process the value 
if(isset($_POST['clientEmail'])){
    // get all data through post Request we got throught our ajax hook
    $client_email = $_POST['clientEmail'];
    $client_name = $_POST['fname'] . ' ' .  $_POST['lname'];
    $client_subject = $_POST['subject'];
    // You can use HTML in Message
    $client_message = $_POST['clientMessage'];
    // Get Default admin Email.
    $admin_email = get_bloginfo('admin_email');
    // You can use HTML in message 
    $thank_you_message = "Dear $client_name,<br> We have Recieved Your Enquiry";
    // Email Headers Form Sending HTML and text in email
    $headers = array('Content-Type: text/html; charset=UTF-8');
    // Send email to Admin of Site
    $admin_notification = wp_mail( $admin_email , $client_subject , $client_message , $headers);
    // Send Email to Client
    $client_notification = wp_mail( $client_email , $client_subject , $thank_you_message , $headers);
    
    // Echo 'success' if both notifications are sent! 
    if($admin_notification && $client_notification){
        echo 'success';
    }
}else{
    // otherwise do nothing simple print false 
    echo 'false';
}

// close ajax request
wp_die();
}

The Above Callback function simply prints ‘success’ if everything goes well. In case of any errors it will print ‘false’. We can use these values in Our JavaScript Fetch API (in the data variable) to display errors and messages.

I’ve Used Some Default WordPress Functions in the above code.

  1. get_bloginfo(‘admin_email’): the get_bloginfo() function is used to get some basic information about the site. I used this function to get the default admin email. It can be Used to site URL, site name, and other information about the website as well. You can check WordPress docs Here.
  2. wp_mail(): wp_mail function is used to send emails in WordPress. It receives the following parameters 
<?php
wp_mail( string|string[] $to, string $subject, string $message, string|string[] $headers = '', string|string[] $attachments = array() ): bool

wp_mail () function returns true of mail is sent. For more information about this function, you can visit function documentation.

After Using Output values from above code we can modify our fetch API code like this.

// JavaScript Fetch API Started
fetch(ajaxUrl,{
    method: 'POST',
    body: requestData // You Just need to deal with it
}).then(function(res){
    return res.text();
}).then(function(data){
    // We will recieve data from server Here in data variable in Text Format
    // We can do Whatever we want with data variable Here.
    if(data.trim()=='success'){

     // Just displaying Success Message
        wp4all_display_form_notices('Form Sent Successfully',false);
    }else{
     // Or an displaying Error Message
        wp4all_display_form_notices('Something Went Wrong',true);
    }
});

Time to add a little Security Feature in Our Form

We can use WordPress nonces in our form to verify wether the form is submitted from our site or if some hacker is trying to fill in the form from their server by sending the same type of ajax request that we have set up. This could sound weird but it is possible. To avoid such issues, we use nonces. Nonces are nothing, Just random text strings that we pass with our Post Request. We verify this string when we receive the Request in the Ajax callback function (wp4all_process_form_ajax in our case). These strings are unique each time. WordPress has some functions to generate and verify nonces.

wp_create_nonce(): It takes one Parameter as action string. String can be anything when creating it. I’ll use wp_create_nonce(‘wp4all-process-form’);

wp_verify_none(): It takes two parameters. First is the nonce string generated by the wp_create_nonce function. The second parameter is the action string we gave as a parameter in the wp_create_nonce function.

I’ve already added a nonce field in my HTML Form as a hidden field. But added a Random static String. Let’s Make that string Dynamic. So the Hidden Element will be now:

<!-- Nonce Hidden Field For Security -->

<input type="hidden" value="<?php echo wp_create_nonce('wp4all-process-form'); ?>">

Now, Let’s Verify the nonce in our PHP callback.

<?php
// Adding Ajax Hook to process From
function wp4all_process_form_ajax(){

// if email value is set then process the value and Verify Nonce
if((isset($_POST['clientEmail'])) && (wp_verify_nonce( $_POST['nonce'] , 'wp4all-process-form' ))){
    // get all data through post Request we got throught our ajax hook
    $client_email = $_POST['clientEmail'];
    $client_name = $_POST['fname'] . ' ' .  $_POST['lname'];
    $client_subject = $_POST['subject'];
    // You can use HTML in Message
    $client_message = $_POST['clientMessage'];
    // Get Default admin Email.
    $admin_email = get_bloginfo('admin_email');
    // You can use HTML in message 
    $thank_you_message = "Dear $client_name,<br> We have Recieved Your Enquiry";
    // Email Headers Form Sending HTML and text in email
    $headers = array('Content-Type: text/html; charset=UTF-8');
    // Send email to Admin of Site
    $admin_notification = wp_mail( $admin_email , $client_subject , $client_message , $headers);
    // Send Email to Client
    $client_notification = wp_mail( $client_email , $client_subject , $thank_you_message , $headers);
    
    // Echo 'success' if both notifications are sent! 
    if($admin_notification && $client_notification){
        echo 'success';
    }
}else{
    // otherwise do nothing simple print false 
    echo 'false';
}

// close ajax request
wp_die();
}

Finally, All Done.

The Final PHP Code For The Whole Form

You can add Following Code In your theme’s Function.php File.

<?php
// Register WordPress Shortcode
add_shortcode( 'wp4all_contact_form', 'print_wp4all_contact_form' );

// Defining callback function that we Used in Shortcode i.e print_wp4all_contact_form
function print_wp4all_contact_form(){
    ob_start() // Start a PHP object to return the form code on that php object.
    ?>
    <!-- Form Code Started -->
    <div class="wp4all-form-wrapper">
        <form id="wp4all_contact_form" onsubmit="wp4allSubmitForm()">
            <!-- First Name And Last Name  -->
            <div class="wp4all-fields-group">
                <!-- First Name Field -->
                <div class="wp4all-field">
                    <label for="fname">First Name</label>
                    <input type="text" id="fname" name="fname" required>
                </div>
                <!-- Last Name Field  -->
                <div class="wp4all-field">
                    <label for="lname">Last Name</label>
                    <input type="text" id="lname" name="lname">
                </div>
            </div>
            <!-- Email Field  -->
            <div class="wp4all-field">
                <label for="client-email">Email</label>
                <input type="email" id="client-email" name="clientEmail" required>
            </div>
            <!-- Subject Field  -->
            <div class="wp4all-field">
                <label for="client-email">Subject</label>
                <input type="text" id="clientSubject" name="client-subject">
            </div>
            <!-- Message Field  -->
            <div class="wp4all-field">
                <label for="client-message">Message</label>
                <textarea name="clientMessage" id="client-message" required></textarea>
            </div>
            <!-- Nonce Hidden Field For Security -->
            <!-- We will generate value dynamically of this field later -->
            <input type="hidden" value="<?php echo wp_create_nonce('wp4all-process-form'); ?>">
            <!-- Submit Button  -->
            <div class="wp4all-submit-btn-wrap">
                <input type="submit" value="Send Message">
            </div>
        </form>
        <!-- We will our Javascript code here  -->
        <script>
            /* Let's Create a JS function to display Errors and Messages 
            - Fuction name wp4all_display_form_notices. 
            - Function takes 3 Parameters. Message (string) and is_error (Bool)
            - Message that we want to display.
            - Is the Message is kind of error or not | true if error (default value) | false if not an error 
            */
            function wp4all_display_form_notices(message,is_error=true){
                // You can Make this function as complex as you want I'll just alert the message
                if(is_error){
                    alert(`Error: ${message}`);
                }else{
                    alert(`Success: ${message}`);
                }
            }
            /*
            - lets perform some validations when form is submitted creating a Function that will take form ID
            - This function will return true if Form is Valid or false if not valid
            - This function will loop through all form fields and validate the required fields only.
            - You can also add password validation in this function if needed. I've added text,textarea and email validation only. 
            */
            function wp4all_is_form_valid(formID){
                let ourForm = document.querySelector(`#${formID}`);
                let formValid = true;
                // let's loop through all required fields using for..of loop
                for (const field of ourForm.elements) {
                    // check if field is required or not 
                    // We have added some 'required attribues in our HTML'
                    if (field.required === true) {
                        // if field is required do validation 

                        // if field type is text or text area 
                        if(field.type==='text' || field.type==='textarea'){
                         // check if this field is empty or not
                         if(field.value.trim()===''){
                            // If field has error add error class to field 
                            document.querySelector(`#${formID} #${field.id}`).classList.add('error');
                            document.querySelector(`#${formID} #${field.id}`).onfocus = function(e){
                                e.target.classList.remove('error');
                            }
                            formValid = false;
                         }
                        }
                        // validate email field 
                        if(field.type==='email'){
                            // Using Regular Expressions to Validate Email Value 
                            let emailRegex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
                            if(!(field.value.match(emailRegex)) || (field.value.trim()==='')){
                                // If field has error add error class to field 
                                document.querySelector(`#${formID} #${field.id}`).classList.add('error');
                                document.querySelector(`#${formID} #${field.id}`).onfocus = function(e){
                                e.target.classList.remove('error');
                            }
                                formValid = false;
                            }
                        }
                    }
                }
                return formValid;
            }
            function wp4allSubmitForm(){
                this.event.preventDefault();
                let ourForm = this.event.target;
                let formID = ourForm.id;
                // Check if the Form is Valid through validation function we Created and store it's output in a variable
                let isFormValid = wp4all_is_form_valid(formID);
                if(!isFormValid){
                    // Throuh Error if Form data is invalid.
                    wp4all_display_form_notices('Please Resolve Errors First',true);
                }else{
                    // All Ok let's prepare Data for Fetch API
                    // Url On which we want to send data
                    let ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
                    // Setup requestData variable
                    let requestData = new FormData();
                    // Get All form field input Values 
                    // and append values to requestData variable using for...of loop
                    for (const field of ourForm.elements) {
                        // skip the input type submit 
                        // and append all other values to requestData variable 
                        if(field.type!='submit'){
                        let fieldName = field.name;
                        let fieldValue = field.value;
                        requestData.append(fieldName,fieldValue);
                        }
                        // append wordpress action hook we want to trigger
                        // Here I am adding an action hook named 'wp4all_process_form'
                        // I'll write code for this action hook later as php Function
                        requestData.append('action','wp4all_process_form');
                    }
                    // JavaScript Fetch API Started
                    fetch(ajaxUrl,{
                        method: 'POST',
                        body: requestData // You Just need to deal with it
                    }).then(function(res){
                        return res.text();
                    }).then(function(data){
                        // We will recieve data from server Here in data variable in Text Format
                        // We can do Whatever we want with data variable Here.
                        if(data.trim()=='success'){
                            wp4all_display_form_notices('Form Sent Successfully',false);
                        }else{
                            wp4all_display_form_notices('Something Went Wrong',true);
                        }
                    });
                }
            }
        </script>
    </div>
    <!-- Form Code Ended  -->
    <?php
    // Return the Php object as function value 
    return ob_get_clean();
}

// Adding Ajax Hook to process From
function wp4all_process_form_ajax(){

// if email value is set then process the value 
if((isset($_POST['clientEmail'])) && (wp_verify_nonce( $_POST['nonce'] , 'wp4all-process-form' ))){
    // get all data through post Request we got throught our ajax hook
    $client_email = $_POST['clientEmail'];
    $client_name = $_POST['fname'] . ' ' .  $_POST['lname'];
    $client_subject = $_POST['subject'];
    // You can use HTML in Message
    $client_message = $_POST['clientMessage'];
    // Get Default admin Email.
    $admin_email = get_bloginfo('admin_email');
    // You can use HTML in message 
    $thank_you_message = "Dear $client_name,<br> We have Recieved Your Enquiry";
    // Email Headers Form Sending HTML and text in email
    $headers = array('Content-Type: text/html; charset=UTF-8');
    // Send email to Admin of Site
    $admin_notification = wp_mail( $admin_email , $client_subject , $client_message , $headers);
    // Send Email to Client
    $client_notification = wp_mail( $client_email , $client_subject , $thank_you_message , $headers);
    
    // Echo 'success' if both notifications are sent! 
    if($admin_notification && $client_notification){
        echo 'success';
    }
}else{
    // otherwise do nothing simple print false 
    echo 'false';
}

// close ajax request
wp_die();
}

add_action('wp_ajax_nopriv_wp4all_process_form', 'wp4all_process_form_ajax');
add_action('wp_ajax_wp4all_process_form', 'wp4all_process_form_ajax');

Final CSS code For the Form

/* Form Styles  */
    .wp4all-form-wrapper{
        padding: 25px;
        border-radius: 5px;
        border: 1px solid #eee;
        max-width: 400px;
        font-family: sans-serif;
        /* Some Variables  */
        --border-color: #eee;
        --border-focus-color: purple;
        margin: 20px auto;
    }
    .wp4all-field{
        margin-top: 20px;
    }
    .wp4all-field .error{
        border-color:red;
    }
    .wp4all-field input,.wp4all-field textarea{
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid var(--border-color);
        outline: none;;
    }
    .wp4all-field input:focus,.wp4all-field textarea:focus{
        border: 1px solid var(--border-focus-color);
    }
    .wp4all-fields-group{
        display: flex;
        gap: 10px;
    }
    .wp4all-submit-btn-wrap input{
        width: 100%;
        border: none;
        padding: 8px;
        margin-top: 10px;
        background:var(--border-focus-color);
        color: white;
    }
    /* Form Styles Ended  */

You can use the shortcode [wp4all_contact_form] to display the form anywhere on the website.

Well, That’s all. If you have any queries related to the written code feel free to ask in comment section. I’ll try my best to respond. And Don’t Forget to share this post with others. Have a great Day!

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top