There is a wide range of plugins that can be utilized to incorporate a contact form into your WordPress site. However, it is also possible to achieve this functionality without relying on a plugin by implementing PHP and jQuery code. This approach involves creating a WordPress form builder from scratch, enabling the submission of user information via email to both the user and the website administrator.
To implement a “Start Process” feature and request the creation of a contact form, you will require an HTML form, a small jQuery script, and a PHP file to handle the email delivery process. This setup enables the form to be submitted by the user, triggering an action that sends an email to both the user and the website administrator. Follow the steps below to create a contact form in WordPress without using a plugin, while ensuring email delivery
Step 1: Creating a Page with a Custom Name (e.g., Contact or Contact Us)
To create a page with a custom name, such as “Contact” or “Contact Us,” follow these steps:
- Open your web browser and go to your WordPress admin dashboard.
- In the left sidebar, click on “Pages.”
- From the dropdown menu, select “Add New.”
- In the page editor, enter the desired title for your page, such as “Contact” or “Contact Us.”
By following these steps, you will successfully create a custom contact page with the desired name and content, enhancing the overall appearance and functionality of your WordPress website.
Step 2: Building the Form
Now that you have created the “Contact” or “Contact Us” page, let’s proceed to add a basic form with fields for name, email, dropdown, and message. Follow these steps:
- Open the WordPress editor for the “Contact” or “Contact Us” page.
- Click on the “+” icon to add a new block.
- Search for the “Custom HTML” block and select it.
- In the Custom HTML block, paste the following code:
<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">Save it
Step 3: Data Processing and Error Handling
Our current form appears visually appealing; however, it lacks functionality as it does not include validation or email submission. To address this issue, we need to implement the following steps: first, verify that the form has been submitted, and second, validate whether all fields have been correctly filled or not.
Please paste the following code below. To do this, navigate to “Appearance” and select “Theme File Editor” from the right sidebar. Look for “Theme Files” and locate “footer.php”. Finally, paste the script provided below on the last line of the “footer.php” file.
<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>Please note that modifying theme files directly can be risky, so it is recommended to create a backup of the file before making any changes.
Step 4: Creating PHP Mailer for Both User and Admin
First, navigate to your WordPress directory and locate the file upload section. This can typically be found in the server directory path where the wp-admin folder is located. Once you’ve accessed the file upload section, proceed with the following steps:
- Create a new folder called “demo” within the WordPress directory.
- Inside the “demo” folder, create a PHP file named “data_form.php”. This step is necessary because we referenced this file’s URL path (“/demo/data_form.php”) in the Ajax script mentioned earlier.
- Open the “data_form.php” file and insert the code provided below:
<?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");
$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='https://www.andamantech.com/' target='_blank'>Andaman Tech</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;"> Contact Details</span></td>
</tr><tr><td colspan="2" bgcolor="#f7f7f7"> </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"> </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 - Andaman Tech</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<[email protected]>'."\r\n";
if(mail("[email protected]",$subject,$message,$headers))
{
mail($_POST['email'],$tosubject,$tomessage,$headers);
echo "mailsubmit";
}
else
{
echo "mailnotsend";
}
}After pasting the code into the “data_form.php” file, save it. You have now successfully created the folder and PHP file in the WordPress directory, which will handle the functionality to send emails to both users who submit the contact form and the admin.
Step 5: Make the necessary modifications to your email id
In order for the email functionality to work correctly, you need to update the email settings. Follow the steps below:
- Open the “data_form.php” file in a text editor.
- Locate the following line of code:
<[email protected]>- Replace ‘[email protected]’ with the actual email address where you want to receive the contact form submissions. For example:
<[email protected]>Save the changes to the “data_form.php” file.
With the updated code, the form submission will only proceed if all the required fields are filled and a valid email address is provided. If any errors occur, an appropriate error message will be displayed. Remember to replace ‘[email protected]’ with your actual email address to receive the contact form submissions.
Note: If you are running your website on a local server, the email functionality may not work as expected due to server limitations. However, if you are using an online hosting service, please ensure that you replace the email address with your working email address for the code to function correctly.
I hope you find this article helpful. If you do, please consider sharing it on social media. Additionally, if you notice any mistakes or have suggestions for a tutorial on creating a WordPress contact form with enabling email delivery Without Plugins, which includes sending emails to both the user and admin, please leave a comment below. Your feedback is greatly appreciated.