How to Create a WordPress Contact Form Without Plugin Save Database Send Email

There are a lot of different plugins available to put a contact form on your WordPress site, without a plugin using PHP and jQuery code to add a form to your WordPress site. This is one of the things that happens since I create a WordPress form builder without plugin and the important is store data to the database and send user email both user and website admin.

Start process feature and request create contact form you need an HTML form, small jQuery and PHP file and create database that will work form submit action send email both users, if user can submit form data and submit form, the same time server can send email both users and website admin, and also save data on database to process the form request. It is an important to store contact form data to the database without plugin.

Step 1: Creating a Page

Go to wp-admin → login → Pages → Add New

Create a page name you want ex: Contact or Contact Us

Your contact page should look like this.

Step 2: Building the form

Now you’ll need to create a simple contact form. This is very basic, allowing only name, email drop-down and message fields. It should be pasted into your contact page bellow:

Click Add Block → Custom HTML

<label>Your Name <small id="name_error"></small></label>
<input type="text" name="name" id="name">
<label>Email <small id="email_error"></small></label>
<input type="text" name="email" id="email">
<label>Subject</label>
<select style="width:100%" name="subject" id="subject">
<option>Option-1</option>
<option>Option-2</option></select>
<label>Message</label>
<textarea name="message" id="message"></textarea><br>
<input type="button" value="Submit" id="form_submit">

Step 3: Data Processing and Error Handling

Our form looks pretty good, but right it is very useless because it does not send any email. What we have to do is to verify if the form has been submitted then verify if fields have been filled correctly.

Paste the following code bellow the Contact Page declaration and the basic HTML form:

<script>
(function($){ 
$("#form_submit").click(function(){
if($("#name").val()==""){
$("#name_error").html(" (Please enter your name)");
return false;
}
if($("#email").val()==""){
$("#email_error").html(" (Please enter your email)");
return false;
}
if(!(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($("#email").val()))){
$("#email_error").html(" (Invalid email)");
return false;
}
$("#form_submit").val("Please wait...").css("pointer-events","none");
$.ajax({
url: "/demo/data_form.php",
data: 'name='+$("#name").val()+
'&email='+$("#email").val()+
'&subject='+$("#subject").val()+
'&message='+$("#message").val(),
type: 'post',
success: function (response)
{
if(response=="mailsubmit"){
alert("Thank you, Request has been sent successfully - We will contact you soon...");
}			
if(response=="mailnotsend"){
alert("ERROR Message could not be sent!");
}
$("#form_submit").val("Submit").css("pointer-events","");
$("#name").val("");
$("#email").val("");
$("#message").val("");	
}
});
})
})(jQuery);</script>

Step 4: Create data_form.php file (Send Email user and admin & also save database)

Our form is now working perfectly include client side verification with jQuery validate.

Now Create one folder and a PHP file on WordPress Directory. It will send email to both user who submit contact form and admin, and also save data to Database.

The first thing to do is to Go Your WordPress Directory file upload it file (under server directory path). Once done, Create folder name (demo) inside folder create a file name data_form.php paste the following into a new file:

<?php
 $con=mysqli_connect("localhost","db_name","db_password","database_name"); 
 if(mysqli_connect_error()) {
    echo "Connection Error."; 
 }
?>

This code connect database if you are using online server want to replace (“localhost”,”db_name”,”db_password”,”database_name”)

How to find user name password and database name follow simple way:

Go to your online directory open (wp-config.php) get all the details and replace it with:

Step 5: Create database to store form details

Go to your WordPress Database location if you are using online server or local follow this steps:

Open MYSQL database → click wordpress database → Import

Upload this file download and upload to your database.

Paste the following bellow file name data_form.php: (Paste on same file)

<?php
error_reporting(0);
if(isset($_POST['name'])){
$name=$_POST['name'];
$email=$_POST['email'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$date=date("d-m-Y");
$query="INSERT INTO wp_contact (name,email,subject,message,date ) value ('$name','$email','$subject','$message','$date' ) "; //Change wp_contact to your database name
if(mysqli_query($con,$query)){
$subject = "New Contact $name";
$tomessage="Thank you for choosing us.. !!<br>
Our expert will contact you soon..!!<br>
keep visit our site.. !!<br>
<a href='http://localhost/wp' target='_blank'>TECH boto</a>";
$tosubject = "Thank you $name for conatct us";
$message = '<table width="643" border="0" cellspacing="2" cellpadding="2" style="border: 4px solid #ff810099;border-radius: 34px;margin: 0 auto;">
<tbody><tr><td colspan="2" align="center" style="padding: 10px 0px;"><span style="color: #267dff;font-weight: bold;font-family: Arial, Helvetica, sans-serif;font-size: 20px;"> - Your Company Name - </span></td>
</tr><tr><td colspan="2" align="center" bgcolor="#FFFFFF"><span style="font-size: 16px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: #EA5E00;">&nbsp;Contact Details</span></td>
</tr><tr><td colspan="2" bgcolor="#f7f7f7">&nbsp;</td>
</tr><tr><td width="156"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">Name</span></td>
<td width="469"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">';
$message .= $_POST['name'];
$message .='</span></td>
</tr><tr><td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">Email</span></td>
<td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">';
$message .= $_POST['email'];
$message .='</span></td>
</tr><tr><td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">Subject: </span></td>
<td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">';
$message .= $_POST['subject'];
$message .='</span></td>
</tr><tr><td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">Message: </span></td>
<td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">';
$message .= $_POST['message'];
$message .='</span></td>
</tr><tr><td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">Date: </span></td>
<td><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;">';
$message .= $date;
$message .='</span></td>
</tr><tr><td colspan="2" bgcolor="#f7f7f7">&nbsp;</td></tr><tr><td colspan="2" align="center"><span style="font-family:Arial, Helvetica, sans-serif;font-size:11px;"><a href="http://localhost/wp?ref=mail-service" target="_blank" style="color: #a5a5a5;">Developed by - TECH boto</a></span></td></tr></tbody>
</table>';
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: Your website name<contact@yourmane.com>'."\r\n";
if(mail("contact@yourmane.com",$subject,$message,$headers)) 
{
mail($_POST['email'],$tosubject,$tomessage,$headers);
mail("contact@yourmane.com",$subject,$message,$headers);
echo "mailsubmit";
}
else
{
echo "mailnotsend";
}
}
}
?>

What I’ve done here was simply to make sure that the form has been submitted and filled correctly, replace demo email to your real email address. If an error, such as an empty field or incorrect email address occurred, a message is returned and the form isn’t submitted.

Note: if you are using local server email not be send, but the same time data will store to MYSQL database successfully. If you are using online hosting give correct email replace to your working email, it work perfect.

Hope you find this article useful. If so, please share on social media. Also if you have something go mistake please suggest me about WordPress Contact form without plugin data send email user and admin also store on database tutorial, please do comment below.