Build a simple PHP, jQuery, and AJAX Powered Contact Form, from: http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/
Mar 22, 2018 Here we bring up in front of you the PHP contact form with validation feature. In our previous blogs, we have applied JavaScript and jQuery codes on the contact form. Now, this tutorial emphasizes on applying PHP validations and mail function over contact form. Here, our PHP validation includes the following steps: Checking for empty fields. PHP (Contact form submission script) In this PHP script, we’ll get the submitted data using $POST variable, validate data, validate email address using FILTERVALIDATEEMAIL, and send an email to the specified recipient using PHP mail function. Change the recipient email address with your desired email and add the following PHP code in the web page before the contact form HTML.
contact.html
<formid='contact'name='contact'method='post'> |
<fieldset> |
<labelfor='name'id='name'>Name<spanclass='required'>*</span></label> |
<inputtype='text'name='name'id='name'size='30'value=''required/> |
<labelfor='email'id='email'>Email<spanclass='required'>*</span></label> |
<inputtype='text'name='email'id='email'size='30'value=''required/> |
<labelfor='phone'id='phone'>Phone</label> |
<inputtype='text'name='phone'id='phone'size='30'value='' /> |
<labelfor='Message'id='message'>Message<spanclass='required'>*</span></label> |
<textareaname='message'id='message'required></textarea> |
<labelfor='Captcha'id='captcha'>Name the small house pet that says '<i>meow</i>'<spanclass='required'>*</span></label> |
<inputtype='text'name='captcha'value=''required/> |
<inputid='submit'type='submit'name='submit'value='Send' /> |
</fieldset> |
</form> |
<divid='success'> |
<span> |
<p>Your message was sent succssfully! I will be in touch as soon as I can.</p> |
</span> |
</div> |
<divid='error'> |
<span> |
<p>Something went wrong, try refreshing and submitting the form again.</p> |
</span> |
</div> |
function.answercheck.js
jQuery.validator.addMethod('answercheck', function (value, element) { |
returnthis.optional(element) ||/^bcatb$/.test(value); |
}, 'type the correct answer -_-'); |
process.php
<?php |
$to='[email protected]'; |
$from=$_REQUEST['email']; |
$name=$_REQUEST['name']; |
$headers='From: $from'; |
$subject='You have a message sent from your site'; |
$fields=array(); |
$fields{'name'} ='name'; |
$fields{'email'} ='email'; |
$fields{'phone'} ='phone'; |
$fields{'message'} ='message'; |
$body='Here is what was sent:nn'; foreach($fieldsas$a=>$b){ $body.=sprintf('%20s: %sn',$b,$_REQUEST[$a]); } |
$send=mail($to, $subject, $body, $headers); |
?> |
style.css
form { |
margin:0 |
} |
formlabel { |
margin-bottom:.2em; |
font-size:1.3rem; |
line-height:1.3rem; |
font-size:13px; |
line-height:13px; |
color:#e6e6e1; |
text-shadow:0px-1px#202020 |
} |
formlabel.error { |
margin-bottom:1em; |
font-size:1.2rem; |
line-height:1.2rem; |
font-size:12px; |
line-height:12px; |
color:#c0392b |
} |
forminput[type='text'], formtextarea { |
margin-bottom:1.25em; |
font-family:'Inconsolata', sans-serif; |
font-size:1.4rem; |
line-height:1.4rem; |
font-size:14px; |
line-height:14px; |
box-shadow:none; |
-moz-box-shadow:none; |
-webkit-box-shadow:none; |
background:#e6e6e6; |
border:1pxsolid#191919; |
-moz-border-radius:0.2em; |
-webkit-border-radius:0.2em; |
border-radius:0.2em |
} |
forminput[type='text']:focus, formtextarea:focus { |
border-color:#191919; |
box-shadow:none; |
-moz-box-shadow:none; |
-webkit-box-shadow:none |
} |
forminput[type='text'][disabled], formtextarea[disabled] { |
background:#fff |
} |
forminput[type='text'].error, formtextarea.error { |
background:#e6e6e6; |
border-color:#c0392b |
} |
fieldset { |
border:0px; |
margin:0; |
padding:0 |
} |
.required { |
color:#e9266d |
} |
#success, #error { |
display:none |
} |
#successspan, #errospan { |
display:block; |
position:absolute; |
top:0; |
width:100% |
} |
#successspanp, #errorspanp { |
margin-top:6em |
} |
#successspanp { |
color:#9bd32d; |
} |
#errorspanp { |
color:#c0392b; |
} |
validate.js
jQuery.validator.addMethod('answercheck', function (value, element) { |
returnthis.optional(element) ||/^bcatb$/.test(value); |
}, 'type the correct answer -_-'); |
// validate contact form |
$(function() { |
$('#contact').validate({ |
rules: { |
name: { |
required:true, |
minlength:2 |
}, |
email: { |
required:true, |
email:true |
}, |
message: { |
required:true |
}, |
answer: { |
required:true, |
answercheck:true |
} |
}, |
messages: { |
name: { |
required:'come on, you have a name don't you?', |
minlength:'your name must consist of at least 2 characters' |
}, |
email: { |
required:'no email, no message' |
}, |
message: { |
required:'um...yea, you have to write something to send this form.', |
minlength:'thats all? really?' |
}, |
answer: { |
required:'sorry, wrong answer!' |
} |
}, |
submitHandler:function(form) { |
$(form).ajaxSubmit({ |
type:'POST', |
data:$(form).serialize(), |
url:'process.php', |
success:function() { |
$('#contact :input').attr('disabled', 'disabled'); |
$('#contact').fadeTo( 'slow', 0.15, function() { |
$(this).find(':input').attr('disabled', 'disabled'); |
$(this).find('label').css('cursor','default'); |
$('#success').fadeIn(); |
}); |
}, |
error:function() { |
$('#contact').fadeTo( 'slow', 0.15, function() { |
$('#error').fadeIn(); |
}); |
} |
}); |
} |
}); |
}); |
commented Feb 12, 2015
great!! thank you for share it |
commented Apr 23, 2015
![Form Form](http://www.apphp.com/php-contact-form/images/screenshots/validation_error.png)
Because it uses AJAX, this code will work on a one page HTML5 website right? |
commented May 1, 2015
@gitmanny aslong as PHP is supported on your server so you can talk with the php file. Yep. |
commented Oct 10, 2015
Hi I've problem with this form. Validation works,but the form refreshes after submitting. I doesnt send e-mail. I've put it in wordpress, perhaps it affected the form?Plase let me know if you have any ideas. Here's the link: http://testtermil.pl/wordpress/kontakt/ |
commented Oct 12, 2015
There seems to be an issue with the success message. It's just not showing after clicking 'send'. I've styled the form to my liking, sending the message works (I sent it to my email.) The problem is just after clicking send, the form refreshes instantly. No confirmation message or anything. How do I fix it? |
commented May 11, 2016
Hi, Compatible Browsers IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome or not? |
commented May 11, 2016
@gitmanny @malik022 @ajtroxell Hi, Compatible Browsers IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome or not? ,thank you |
commented Jun 3, 2016 • edited
edited
What do I do if I don't want captcha in the form? I've removed captcha related css n html and made following changes in js, but it's not working:
Is this the right way? Edit: It's working |
commented Jun 19, 2016
thanks so much |
commented Aug 25, 2016
Hi, How do I change the charset to UTF-8? It looks fine when typing the form on the website but when I recieve it by e-mail 'æøå' looks like this for instance: æøåæøå Please advise, ATB Morten |
commented Nov 15, 2016 • edited
edited
Hello, I'm trying to send a mail to gmail but I don't receive any mails after sending the form. Can anyone help me I'm a beginner. Thank you earlier. |
commented Nov 24, 2016
Thanks for these nice codes, but i think few classes must be added ; <script src='jquery.validate.min.js'></script> <script src='jquery.form.min.js'></script> you can find them easily on the internet. |
commented Dec 22, 2016
Hello, i can't validate the select option tag. How to do it? Thank you |
commented Mar 28, 2017 • edited
edited
commented Sep 17, 2017 • edited
edited
The CSS has a flaw. One must declare the font-size in px before the font-size in rem . This way only Internet Explorer will use the font-size in px (because Internet Explorer doesn't understand rem ), but all the other decent browsers will use the font-size in rem . |
commented Jan 11, 2018
This is not working for me! |
commented Jan 17, 2018 • edited
edited
I have the same challenge with my HTML to PHP contact form <title></title>HTML is as follows: !DOCTYPE html> // validate contact form $(function() { $('#contact').validate({ rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, message: { required: true }, answer: { required: true, answercheck: true } }, messages: { name: { required: 'come on, you have a name don't you?', minlength: 'your name must consist of at least 10 characters' }, email: { required: 'no email, no message' }, message: { required: 'um...yea, you have to write something to send this form.', minlength: 'thats all? really?' }, });// JavaScript Document </script> <!--contacts script and the contact_process.php is as follows $value){ $message_body .= '$key: $valuen'; } $to = '[email protected]'; $subject = 'Contact Form Submit'; if (mail($to, $subject, $message)){ $success = 'Message sent, thank you for contacting us!'; $name = $email = $phone = $message = $url = '; } } }function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data;}The above cannot execute like I want it to do where it is able to send email to the user. |
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment
Required field will check whether the field is filled or not in the proper way. Most of cases we will use the * symbol for required field.
What is Validation ?
Validation means check the input submitted by the user. There are two types of validation are available in PHP. They are as follows −
- Client-Side Validation − Validation is performed on the client machine web browsers.
- Server Side Validation − After submitted by data, The data has sent to a server and perform validation checks in server machine.
Some of Validation rules for field
Field | Validation Rules |
---|---|
Name | Should required letters and white-spaces |
Should required @ and . | |
Website | Should required a valid URL |
Radio | Must be selectable at least once |
Check Box | Must be checkable at least once |
Drop Down menu | Must be selectable at least once |
Valid URL
Below code shows validation of URL
Above syntax will verify whether a given URL is valid or not. It should allow some keywords as https, ftp, www, a-z, 0-9,..etc..
Valid Email
Below code shows validation of Email address
Above syntax will verify whether given Email address is well-formed or not.if it is not, it will show an error message.
Example
Example below shows the form with required field validation
![Simple php contact form with validation Simple php contact form with validation](/uploads/1/2/5/7/125716276/359636463.jpg)
It will produce the following result −