How to create a simple contact form in the website and applying validation over it using jQuery with PHP

Rating: 5.0. From 1 vote.
Please wait...

As you now the Website Contact form comes on the best priority for any organization as this may lead to establish one to one communication with their target audiences.

Here in the article, where we make you learn about “How to create a simple contact form in the website and applying validation over it using jQuery with PHP”.

We have created a simple HTML form with four fields- User Name, Email id, Contact No, and Message box for the query.

We have used following PHP mail () function with four parameters to send email on respective email id as a query of the user from the website.

 

 

1
Mail($to, $subject, $header, $message);

$to variable is required for Specifying the identity of the receiver email
$subject specifies the subject of the email. This parameter can not contain any newline characters
$header: this is Optional. Specifies additional headers, like From, Cc, and Bcc.
Note: When sending an email, it must contain a from header. This can be set with this parameter or in the php.ini file.
$message: It defines the message to be sent. Each line should be separated with a (\n). Lines should not exceed 70 characters.

 

 

Contact_us.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
How to create a simple contact form in the website and applying validation over it using jQuery with PHP
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">  

$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
if(name=='')
{
    $('#error_name').html('<span style="color:red">Please enter your name.</span>');
    }else
    {
        var uname = name;
        }
var email = $("#email").val();
if(email=='')
{
    $('#error_email').html('<span style="color:red">Please enter your email id.</span>');
    }else
    {
        var user_email = email;
        }
var contact = $("#contact").val();
if(contact=='')
{
    $('#error_contact').html('<span style="color:red">Please enter your contact number.</span>');
    }else
    {
        var mobile = contact;
        }
var message = $("#message").val();
if(message=='')
{
    $('#error_message').html('<span style="color:red">Please write your message here.</span>');
    }else
    {
        var user_message = message;
        }
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
return false;
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("mail.php", {
user_name: uname,
email: user_email,
contact: mobile,
message: user_message
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>
<div class="row">
<div class="col-md-6">
<div id="mainform">
<h2>Simple jQuery Contact Form With Validation</h2>
<!-- Required Div Starts Here -->

<form id="form">
<h3>Contact Form</h3>
<div class="row">
<div class="col-md-6"><span id="error_name"></span>
<label>Name: *</label>
<input id="name" class="form-control" type="text" placeholder="Name" /></div>
<div class="col-md-6"><span id="error_email"></span>
<label>Email: *</label>
<input id="email" class="form-control" type="text" placeholder="Email" /></div>
<div class="col-md-6"><span id="error_contact"></span>
<label>Contact No: *</label>
<input id="contact" class="form-control" type="text" placeholder="10 digit Mobile no." /></div>
<div class="col-md-6"><span id="error_message"></span>
<label>Message:</label>
<textarea id="message" class="form-control" placeholder="Message......."></textarea></div>
<div class="col-md-6"><input id="submit" type="button" value="Submit" /></div>
</div>
</form></div>
</div>
</div>
&nbsp;

 

 

Mail.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!--?php &lt;br ?--> // Fetching Values from URL.
$name = $_POST['user_name'];
$email = $_POST['email'];
$contact = $_POST['contact'];
$msg = $_POST['message'];
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if (!preg_match("/^[0-9]{10}$/", $contact)) {
echo "* Your contact number is wrong. *";
} else {
$subject = $name; //specifies the subject of the email. This parameter can not contain any newline characters
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' . $email. "\r\n";
$headers .= 'Cc:' . $email. "\r\n"; // this is Optional. Specifies additional headers, like From, Cc, and Bcc.
$message = '
<div style="padding: 50px; color: white;">Hello ' . $name . ',
'
. '
Thank you...! For Contacting with Us.'
. 'Name:' . $name . '
'
. 'Email:' . $email . '
'
. 'Contact No:' . $contact . '
'
. 'Message:' . $msg . '

'
. 'This is the user information.'
. '
'
. 'We will be in touch with you .

</div>
';
$sendmessage = "
<div style="0background-color: #7E7E7E;">" . $message . "</div>
";
$sendmessage = wordwrap($sendmessage, 70);
mail("manglesh@phphurdles.com", $subject, $sendmessage, $headers);
echo "Your Query has been received, We will contact you soon.";
}
} else {
echo "* invalid credentials *";
}
?&gt;

For downloading working Demo : Download Here

For a extended view on Jquery Validation you can also read our tutorial FORM VALIDATION USING JQUERY VALIDATION PLUGIN.

Hope you like it, Keep reading our other articles.

Thank you!

Attachments

4 Comments

  1. ss raj said:

    Jquery is the perfect choice for the validation purposes. The length of code reduces in Jquery as we get so many classes and the library & it is an open source as well. According to me, Javascript is going to make new benchmarks in the web development. We can consider the code you have just shown, it is a bit complicated but very much effective!!! Looking forward to reading this kind of JAVASCRIPT executions in the future.

    No votes yet.
    Please wait...
    June 13, 2017
    Reply
    • Saurabh Dubey said:

      Yes Mate,

      Will surely post some good topics to help our developer mates

      Cheers!

      No votes yet.
      Please wait...
      June 13, 2017
      Reply
  2. PHP Freelancer said:

    Great tutorial. This tutorial was really helpful to create a contact form on my business site. This is useful to beginners. Thanks.

    No votes yet.
    Please wait...
    July 5, 2017
    Reply
    • Saurabh Dubey said:

      Thank You

      No votes yet.
      Please wait...
      July 5, 2017
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *