Saturday, April 20, 2024
Ajaxcss3HtmlJqueryWordpress HooksWordpress Tricks

How to create custom user contact form in wordpress?

How to add custom meta title and meta description in Wordpress?

create custom user contact form in wordpress

Hello, welcome to In this post, I will tell you How to create custom user contact form in wordpress? WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress.

In this post, we will create custom user contact form and with the help of this form we will send email to admin with ajax. This form have jquery and custom css3 validation. After form submission there will be a css3 animated loader.

Here are the images of form process:
Image 1 :

Image 2 :

Image 3 :

We will use wp_mail default wordpress function. All this php, html, css3 and jquery code wrap in shortcode and we can use this shortcode anywhere in theme but I used this shortcode in wordpress widgets.

Here is the complete working code and you need to add this code in your theme’s functions.php file:

function html_form_code() {

echo “<div class=’message’></div>”;
echo ‘<form method=”post” id=”mail-form”>’;
echo ‘<h3>User Subscription</h3>’;
echo ‘<p>’;
echo ‘Your Name * <br/>’;
echo ‘<input type=”text” name=”cf-name” class=”cf-name” size=”40″ />’;
echo ‘</p>’;
echo ‘<p>’;
echo ‘Your Email * <br/>’;
echo ‘<input type=”email” name=”cf-email” class=”cf-email” size=”40″ />’;
echo ‘</p>’;
echo ‘<p><input id=”sendmailbtn” type=”button” name=”cf-submitted” value=”Send”></p>’;
echo ‘</form>’;
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
<script src=””></script>
$(“#sendmailbtn”).click(function() {
var name = $(“.cf-name”).val();
var email = $(“.cf-email”).val();
$(“.cf-name, .cf-email”).removeAttr(‘style’);
var a = 0;
var b = 0;
$(“.cf-name”).css(“border”, “1px solid red”);
$(“.cf-name”).attr(“placeholder”, “Enter Name”);
$(“.cf-name”).css(‘animation’, ‘shake 0.5s’);
$(“.cf-name”).css(“border”, “1px solid #e3e3e3”);
a = 0;
var re = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if($(“.cf-email”).val()== “”)
$(“.cf-email”).css(“border”, “1px solid red”);
$(“.cf-email”).attr(“placeholder”, “Enter Email”);
$(“.cf-email”).css(‘animation’, ‘shake 0.5s’);
$(“.cf-email”).css(“border”, “1px solid red”);
$(“.cf-email”).attr(“placeholder”, “Enter Valid Email”);
$(“.cf-email”).css(‘animation’, ‘shake 0.5s’);
$(“.cf-email”).css(“border”, “1px solid #e3e3e3”);
b = 0;
if(a==0 && b==0)
type: “POST”,
url: “<?php echo admin_url(‘admin-ajax.php’); ?>”,
datatype: “html”,
data: {‘action’: ‘fahadsending_mail’, ’email’: email, ‘name’: name},
success: function(response) {
$(“.message”).html(‘<div class=”spinner”><div class=”double-bounce1″></div><div class=”double-bounce2″></div></div>’);
setTimeout(function(){ $(“.message”).show().html(“”);$(“.message”).show().html(response); }, 5000);
$(“.message”).html(‘<div class=”spinner”><div class=”double-bounce1″></div><div class=”double-bounce2″></div></div>’);
setTimeout(function(){ $(“.message”).show().html(“”);$(“.message”).show().html(response); }, 5000);
return false;
add_action(‘wp_ajax_nopriv_fahadsending_mail’, ‘fahadsending_mail’);
add_action(‘wp_ajax_fahadsending_mail’, ‘fahadsending_mail’);
function fahadsending_mail(){
$to = “”;
$subject = “New User”;
$message = “Name:”.$_POST[‘name’].”<br>Email:”.$_POST[’email’];
$headers = ‘From:’ .$_POST[’email’]. “\r\n”; // Sender’s Email
if( wp_mail($to, $subject, $message, $headers) ){
echo “<p>Mail sent</p>”;
} else {
echo “<p>Mail not sent</p>”;
die(); // never forget to die() your AJAX reuqests
function create_short_code() {
return ob_get_clean();
add_shortcode(‘ShortCode’, ‘create_short_code’);

There are so many tricks in wordpress and i will let you know all. Please do comment if you any query related to this post. Thank you.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.