Jump to content

Simple PHP, jQuery, and AJAX Powered Contact Form


wildweaselmi
 Share

Recommended Posts

PRE-REQ

Place these in the footer of your page above the closing tag.

  • jQuery http://code.jquery.com/jquery-latest.min.js
  • jQuery Form Plugin //cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js
  • jQuery Validate //cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js

THE CODE

The form is simple HTML with a few input fields, a spam protection field, and a hidden confirmation message triggered via the jQuery Validate plugin AJAX success call.

 
 
  

Name*

Email*

Phone

Message*

Name the small house pet that says "meow"*

Your message was sent succssfully! I will be in touch as soon as I can.

Something went wrong, try refreshing and submitting the form again.

Here is some base CSS for the form, you will need to make adjustments to match your sites styling.

form {

margin:0

}

form label {

margin-bottom:.2em;

font-size:1.3rem;

line-height:1.3rem;

font-size:13px;

line-height:13px;

color:#e6e6e1;

text-shadow:0px -1px #202020

}

form label.error {

margin-bottom:1em;

font-size:1.2rem;

line-height:1.2rem;

font-size:12px;

line-height:12px;

color:#c0392b

}

form input[type=text], form textarea {

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:1px solid #191919;

-moz-border-radius:0.2em;

-webkit-border-radius:0.2em;

border-radius:0.2em

}

form input[type=text]:focus, form textarea:focus {

border-color:#191919;

box-shadow:none;

-moz-box-shadow:none;

-webkit-box-shadow:none

}

form input[type=text], form textarea {

background:#fff

}

form input[type=text].error, form textarea.error {

background:#e6e6e6;

border-color:#c0392b

}

fieldset {

border:0px;

margin:0;

padding:0

}

.required {

color:#e9266d

}

#success, #error {

display:none

}

#success span, #erro span {

display:block;

position:absolute;

top:0;

width:100%

}

#success span p, #error span p {

margin-top:6em

}

#success span p {

color:#9bd32d;

}

#error span p {

color:#c0392b;

}

The PHP needed is just a basic form mail script. Change mail@yourdomain.com to the email the form should send to, and You have a message sent from your site to whatever subject you would like the email to have. This script will reside on your server as process.php and not get inserted into your page.

<?php

$to = "mail@yourdomain.com";

$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:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

$send = mail($to, $subject, $body, $headers);

?>

Using jQuery Validate we can assure that the form is filled out properly before being sent in, and also prevent a bit of spam using a custom function.

jQuery.validator.addMethod('answercheck', function (value, element) {

return this.optional(element) || /^\bcat\b$/.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();

});

}

});

}

});

});

REFERENCE http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/

 /applications/core/interface/file/attachment.php?id=467">PHP_jQuery_and_AJAX_Powered_Contact_Form.zip

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...