How to create a contact form using ajax and php?

3:46 PM 1 Comment

I've heard this question many times and of course, the solution is simple!...

To post a data using Ajax, you can use this below function.

function postajax(form1)

{

$.ajax({

url:form1.attr('action'),

type:"POST",

cache:none,

timeout:20000,

data:form1.serialize(),

success:function(data){

alert(data);

error:function(data){

alert(data);

}

});

}

This function accepts a form and post the data!

Function include necessary codes for posting all data from the form and an alert() to show the returned message... You could alternatively use this data for other purposes!...

Working

URL to be posted will be taken from the action attribute of the form.

type: the type is assigned as POST, you could change it to GET or add form1.attr('method') to get the default specified method.

data: the data is assigned using the serialized() function.

NB: - Read more about serialize() function from the official website.

success:function() : is executed when ajax successfully returns data from the php file.

error:function() : is executed when an error is received while posting data.

How to pass form to this function?

code:

$('#id').submit(function(e){

e.preventDefault();

}

create a submit function where #id is the id of the form .The submit method will be called when you submit the form. You could check this event manually by using the submit() function of JQuery.

on submit method use the function e.preventDefault(); will prevent the default of the form , that is posting !...

in this method call our postajax(form1) function with this...

$('#id').submit(function(e){

postajax(this);

e.preventDefault();

}

PHP Code

PHP mail() function can be used for sending an email. It is a straightforward and easy process in php.

$name = @trim(stripslashes($_POST['name']));

$from = @trim(stripslashes($_POST['email']));

$subject = @trim(stripslashes($_POST['subject']));

$message = @trim(stripslashes($_POST['message']));

$to = 'kapil.mo@outlook.com';//replace with your email

$headers = "MIME-Version: 1.0". "\r\n" . "Content-type: text/plain; charset=iso-8859-1" . "\r\n". "From: {$name} <{$from}>". "\r\n". "Reply-To: <{$from}>". "\r\n" . "Subject: {$subject}" . "\r\n" . "X-Mailer: PHP/".phpversion();

mail($to, $subject, $message, $headers);

echo $headers;

die;

The headers are used to set the reply, from, subject and content type!...

Content-type can be changed to text/html , if you want to include HTML content in email!...

Headers is a must in many servers.

Read more about mail() function from the official website.

Other Ways and examples:

$('#contactus').submit(function(e){

e.preventDefault();

$.ajax({

url: $(this).attr('action'),

type: "POST",

cache: false,

timeout: 20000,

data:$('#contactus').serialize(),

beforeSend: function(){

$('.mails').addClass("bg-danger");

$('.mailc').html("Mail is being send...").fadeIn();

success: function (data) {

// alert(data);

$('.mails').addClass("bg-success");

$('.mailc').html("Mail Send").delay(3000).fadeOut();

$('#contactus').find("input[type=text], textarea,input[type=email]").val("");

}

});

Navigation

GETNETRIX

How to create a contact form using ajax and php?

Share this:

CONVERSATION

1 Comments: