Create a form and insert the data into database using $wpdb - php

Question

I have a custom WordPress page template where I wrote a basic form structure like this:
<div class="my-form">
<h2>WILL YOU ATTEND?</h2>
<form action="#" autocomplete="off" method="POST">
<input class="input" type="text" spellcheck="false" name="name" placeholder="Name" required>
<input class="input" type="email" spellcheck="false" name="email" placeholder="E-mail" required>
<label class="ans">Yes
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="ans">No
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<button> SUBMIT </button>
</form>
</div>
Now once the submit button is clicked, I'm trying to figure out how to create a table in WordPress database, and insert the form data into it using $wpdb.
PS: I left the action attribute empty because I don't know how to go about this exactly.

Answer 1

There are several ways to do that. Below I just showed you one way:
I Assume your table name is wp_customform which has id, name, email, and radio columns.
Now you've to modify your HTML code like the below. I added some JS too.
<div class="my-form">
<h2>WILL YOU ATTEND?</h2>
<form class="custom-form-class" action="#" autocomplete="off" method="POST">
<!-- Action is here but hidden. This will be use in php side -->
<input type="hidden" name="action" value="sample_custom_form_action">
<input class="input" type="text" spellcheck="false" name="name" placeholder="Name" required>
<input class="input" type="email" spellcheck="false" name="email" placeholder="E-mail" required>
<label class="ans">Yes
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="ans">No
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<button> SUBMIT </button>
</form>
</div>
<script>
// Javascript to send ajax request
jQuery(document).on('submit', '.custom-form-class', function(e){
let formData = jQuery(this).serialize();
// Change ajax url value to your domain
let ajaxurl = 'http://YOURSITE.COM/wp-admin/admin-ajax.php';
// Send ajax
jQuery.post(ajaxurl, formData, function(response) {
alert('Got this from the server: ' + response);
});
});
</script>
That pieces of code will send your form data to the PHP side. You have to use the below code to process the form data in your function.php file.
add_action( 'wp_ajax_sample_custom_form_action', 'prefix_save_custom_form_data' );
add_action( 'wp_ajax_nopriv_sample_custom_form_action', 'prefix_save_custom_form_data' );
function prefix_save_custom_form_data(){
global $wpdb;
// Get the values
$name = isset( $_POST['name'] ) ? sanitize_text_field( $_POST['name'] ) : ''; // Empty value if data not set
$email = isset( $_POST['email'] ) ? sanitize_email( $_POST['email'] ) : ''; // Empty value if data not set
$radio = isset( $_POST['radio'] ) ? sanitize_text_field( $_POST['radio'] ) : ''; // Empty value if data not set
// Assume your table name is wp_customform
$your_table_name = $wpdb->prefix . 'customform';
// Insert into database
$wpdb->insert(
$your_table_name,
array(
'name' => $name,
'email' => $email,
'radio' => $radio,
)
);
// Send insert id as ajax response
echo $wpdb->insert_id;
// Use die to stop the ajax action
wp_die();
}
The codes are not tested but they should work. I am attaching some reference links below:
Ajax overview: https://codex.wordpress.org/AJAX_in_Plugins
For Insert: https://developer.wordpress.org/reference/classes/wpdb/insert/
For create table: https://developer.wordpress.org/reference/functions/dbdelta/