Add Your Own WordPress Contact Form Without Expertise

Every site owner knows the importance of contact form. If you will see with user point of view, it is a source of trust. It doesn't take much space on your website but gives a great impact on visitors. As you all know that there are several plugins are available. However everyone has its own needs and choice. You may search for plugin according to your need or create your own in less time.


Basically you do not need to be expert if you want to add your own contact form. Simply it demands some basic knowledge of php and html or you can say that it is an artful way to create a contact form for WordPress.

I have divided it into four easy steps so you can understand it well. If you follow these steps, you will not need to spend your time to search plugins.

1. Create a page.

2. Add HTML form

3. Add JavaScript validation.

4. Fetch the values for database.

5. Redirection to Success page.

1. It has two options first you can create a page template or a page from admin. I will create it from Add new page option from Administrator.

Open the Dashboard

Click on Add new from the Page navigation to create a page.

Enter the title like "Contact Us".

2. Here you will see two tabs on the top of HTML editor, click on Text.

Then Create a Form as shown below:

<form action="submit.php" method="post" name="contact_form">
Name <input id="name" type="text" name="name" />
Email <input id="email" type="text" name="email" />
Message <textarea id="message" type="text" name="message" /></textarea>
<input type="submit" value="Submit" /></form>

In the form, submit.php will use to get the values. As you're seeing i have put the file in root folder, you can put it anywhere you want but in that case you need to define the path in action. Second thing I have created two input fields and one textarea. You can add more.

After click on publish, you can see it in the frontend.

3. Now you need to add validation, so the values entered will not be incorrect or blank.

In the same page add a JavaScript function inside script tag to validate the fields. 

<script type="text/javascript">
function validateForm()
{
/* name */
var x=document.forms["contact_form"]["name"].value;
if (x==null || x=="")
 {
 alert("Name must be filled out");
 return false;
 }
/* email */
var x=document.forms["contact_form"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
 alert("Not a valid e-mail address");
 return false;
 }
return true;
}
</script>

Add this function inside the form tag with onsubmit event.

<form action="../submit.php" method="post" name="contact_form" onsubmit="validateForm();">

4. When you will fill and submit the form, you will have to bring the values here to store them into database. To accomplish this you will need to create a php file.

Open any text editor and create submit.php as we have given this name in action of the form.

First of all establish a database connection.

<?php include dirname( __FILE__ ) . '/wp-config.php';

$db = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (mysqli_connect_errno()){
    exit("connection failed: ".mysqli_connect_error());
}
?>

 After that use $_POST to get the values.

<?php

$name=$_POST["name"];
$email=$_POST["email"];
$message=$_POST["message"];
?>

Now it is a time to insert them into the database. For this we will write a simple query as shown below.

<?php
$sql="INSERT INTO 'DB'.'Table' ( 'name' , 'email', 'message' ) VALUES ( '$name','$email', ,'$message')";
mysqli_query($con,$sql);
?>

5. After inserting, create another page and write a message of successful submission. Use header function to redirect the user to that page.

<?php
//Redirects to the specified page
header("Location: http://success-page");
?>

So, this is a cheapest and easiest process for custom contact form, it doesn't take more than 15 minutes, use your own styling to make it great in look.