WordPress Custom Form Submission directly to server to non WordPress database table

Submitting the form directly to the server without using JavaScript for form submission and using JavaScript for form submission both achieve the same end goal of sending form data to the server for processing. However, they differ in terms of how the form submission process is handled and the user experience.

1. Submitting Form Without JavaScript (Traditional Approach):
   • In this approach, the form’s action attribute specifies the URL to which the form data should be sent upon submission.
   • When the user clicks the submit button, the browser sends an HTTP POST request to the specified URL, including all form data in the request body.
   • The server receives the form data, processes it, and sends back a response, typically a new webpage or a redirect to another page.
   Pros:
   • Simplicity: This approach doesn’t require any JavaScript code, making it straightforward to implement.
   • Compatibility: Works reliably across all browsers and devices, including those with JavaScript disabled.
   Cons:
   • Page Reload: After form submission, the entire page typically reloads or redirects, which may disrupt the user experience, especially on single-page applications.
   • Limited Interactivity: It’s challenging to provide dynamic feedback or perform client-side validation without JavaScript.
2. Submitting Form With JavaScript (AJAX Approach):
   • With JavaScript, you can intercept the form submission event using an event listener (e.g., submit event), prevent the default form submission behavior, and handle the form submission programmatically.
   • You can use JavaScript’s XMLHttpRequest or fetch API to send an asynchronous request (AJAX request) to the server, typically in the background.
   • After receiving a response from the server, you can update the webpage dynamically without requiring a full page reload.
   Pros:
   • Enhanced User Experience: Provides a smoother and more interactive experience by updating parts of the webpage dynamically, without reloading the entire page.
   • Client-side Validation: Enables you to perform client-side validation and provide immediate feedback to users without waiting for a server response.
   Cons:
   • Complexity: Requires writing JavaScript code to handle form submission and AJAX requests, which adds complexity to the development process.
   • Dependency on JavaScript: Relies on the client having JavaScript enabled, which may not always be the case for all users or devices.

In summary, the choice between submitting the form directly to the server without JavaScript and using JavaScript for form submission depends on factors such as the desired user experience, project requirements, and development constraints. In some cases, a combination of both approaches may be used to provide the best balance between simplicity and interactivity.

Contact Form which we placed in /templates/contact.php Custom Page Template

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" id="contactForm">
    <input type="hidden" name="action" value="submit_contact_form">
    <div class="form-group">
        <label for="user_name">Full Name</label>
        <input type="text" name="user_name" id="user_name" required>
    </div>
    <div class="form-group">
        <label for="user_email">Email</label>
        <input type="email" name="user_email" id="user_email" required>
    </div>
    <div class="form-group">
        <label for="user_phone">Phone Number</label>
        <input type="text" name="user_phone" id="user_phone" required>
    </div>
    <div class="form-group">
        <label for="breeds">Breeds</label>
        <select name="breeds[]" id="breeds" multiple required>
            <?php
            global $wpdb;
            $breeds = $wpdb->get_results( "SELECT id, breed_name FROM breeds" );
            foreach ( $breeds as $breed ) {
                echo '<option value="' . esc_attr( $breed->id ) . '">' . esc_html( $breed->breed_name ) . '</option>';
            }
            ?>
        </select>
    </div>
    <button type="submit">Submit</button>
</form>

This goes into your Functions.php file or your custom Plugin Functions.php File

add_action('admin_post_submit_contact_form', 'submit_contact_form');
add_action('admin_post_nopriv_submit_contact_form', 'submit_contact_form');

function submit_contact_form() {
global $wpdb;

if ( isset( $_POST['user_name'] ) && isset( $_POST['user_email'] ) && isset( $_POST['user_phone'] ) && isset( $_POST['breeds'] ) ) {
    $user_name = sanitize_text_field( $_POST['user_name'] );
    $user_email = sanitize_email( $_POST['user_email'] );
    $user_phone = sanitize_text_field( $_POST['user_phone'] );
    $breeds = serialize( array_map( 'intval', $_POST['breeds'] ) );

    // Serialize the "placed_on" field
    $placed_on = serialize( time() );

    // Insert data into the "clients" table
    $table_name = 'clients'; // Replace 'clients' with your actual table name
    $wpdb->insert(
        $table_name,
        array(
            'id' => null, // Specify null to let MySQL auto-generate the ID
            'name' => $user_name,
            'email' => $user_email,
            'phone' => $user_phone,
            'breeds' => $breeds,
            'placed_on' => $placed_on,
            'placed_on_date' => date('Y-m-d H:i:s')
        )
    );

    // Redirect to a different URL after successful submission
    wp_redirect( 'https://domain.com/shop/thank-you' );
    exit;
}

}

This is how our database is set up

1	id	int			No	None         AUTO_INCREMENT 				
2	name	varchar(100)	utf8mb3_general_ci		Yes	NULL			
3	phone	varchar(100)	utf8mb3_general_ci		Yes	NULL			
4	email	varchar(100)	utf8mb3_general_ci		Yes	NULL			
5	breeds	text	utf8mb3_general_ci		Yes					
6	breed	varchar(100)	utf8mb3_general_ci		Yes	NULL			
7	breed_1	varchar(100)	utf8mb3_general_ci		Yes	NULL			
8	breed_2	varchar(100)	utf8mb3_general_ci		Yes	NULL	
9	 notes	text	utf8mb3_general_ci		Yes				
10	client_date	varchar(100)	utf8mb3_general_ci	Yes	NULL	
12	note_1	text	utf8mb3_general_ci		Yes			
13	note_2	text	utf8mb3_general_ci		Yes				
14	note_3	text	utf8mb3_general_ci		Yes				
15	sales_person	varchar(100)	utf8mb3_general_ci      Yes	NULL			
16	placed_on	varchar(100)	utf8mb3_general_ci	Yes	NULL			
17	placed_on_date	datetime			No	CURRENT_TIMESTAMP		DEFAULT_GENERATED	
18	user_submission	tinyint(1)			No	0