Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Pedro Rogerio committed Sep 15, 2014
1 parent df7304a commit 4cdc362
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 0 deletions.
11 changes: 11 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Ajax Contact Form
=======================

A Simple Ajax Contact Form developed in PHP with HTML5 Form validation. Has a fallback in jQuery for browsers that do not support HTML5 form validation.

Open the archive [`process.php`](process.php) and set the sender's email in the following variable:
```php
$emailTo = '<YOUR_EMAIL_HERE>';
```

See the online form [here](http://www.pinceladasdaweb.com.br/blog/uploads/ajax-contact-form/)
72 changes: 72 additions & 0 deletions contact-form.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/*
--------------------------------
Ajax Contact Form
--------------------------------
+ https://github.com/pinceladasdaweb/Ajax-Contact-Form
+ A Simple Ajax Contact Form developed in PHP with HTML5 Form validation.
+ Has a fallback in jQuery for browsers that do not support HTML5 form validation.
+ version 1.0
+ Copyright 2014 Pedro Rogerio
+ Licensed under the MIT license
+ https://github.com/pinceladasdaweb/Ajax-Contact-Form
*/

(function ($, window, document, undefined) {
'use strict';

$form = $('#contact-form');

$form.submit(function (e) {
// remove the error class
$('.form-group').removeClass('has-error');
$('.help-block').remove();

// get the form data
var formData = {
'name' : $('input[name="form-name"]').val(),
'email' : $('input[name="form-email"]').val(),
'subject' : $('input[name="form-subject"]').val(),
'message' : $('textarea[name="form-message"]').val()
};

// process the form
$.ajax({
type : 'POST',
url : 'process.php',
data : formData,
dataType : 'json',
encode : true
}).done(function (data) {
// handle errors
if (!data.success) {
if (data.errors.name) {
$('#name-field').addClass('has-error');
$('#name-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.name + '</span>');
}

if (data.errors.email) {
$('#email-field').addClass('has-error');
$('#email-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.email + '</span>');
}

if (data.errors.subject) {
$('#subject-field').addClass('has-error');
$('#subject-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.subject + '</span>');
}

if (data.errors.message) {
$('#message-field').addClass('has-error');
$('#message-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.message + '</span>');
}
} else {
// display success message
$form.html('<div class="alert alert-success">' + data.message + '</div>');
}
}).fail(function (data) {
// for debug
console.log(data)
});

e.preventDefault();
});
}(jQuery, window, document));
68 changes: 68 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax contact form</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Ajax Contact Form</h1>
<p>A simple Ajax based Contact form using jQuery and PHP.</p>
<p><a class="btn btn-primary btn-lg" href="https://github.com/pinceladasdaweb/Ajax-Contact-Form" role="button">Learn more &raquo;</a></p>
</div>
</div>

<div class="col-md-6 col-md-offset-3">
<form action="process.php" id="contact-form" class="form-horizontal" role="form" method="post">
<div class="form-group" id="name-field">
<label for="form-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="form-name" name="form-name" placeholder="Name" required>
</div>
</div>
<div class="form-group" id="email-field">
<label for="form-email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="form-email" name="form-email" placeholder="Email" required>
</div>
</div>
<div class="form-group" id="subject-field">
<label for="form-subject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="form-subject" name="form-subject" placeholder="Subject" required>
</div>
</div>
<div class="form-group" id="message-field">
<label for="form-message" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" rows="6" id="form-message" name="form-message" placeholder="Message" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>

<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<![endif]-->
<script src="contact-form.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions process.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php
// Configure your Subject Prefix and Recipient here
$subjectPrefix = '[Contact via website]';
$emailTo = '<YOUR_EMAIL_HERE>';

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

if($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = stripslashes(trim($_POST['name']));
$email = stripslashes(trim($_POST['email']));
$subject = stripslashes(trim($_POST['subject']));
$message = stripslashes(trim($_POST['message']));


if (empty($name)) {
$errors['name'] = 'Name is required.';
}

if (!preg_match('/^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/', $email)) {
$errors['email'] = 'Email is invalid.';
}

if (empty($subject)) {
$errors['subject'] = 'Subject is required.';
}

if (empty($message)) {
$errors['message'] = 'Message is required.';
}

// if there are any errors in our errors array, return a success boolean or false
if (!empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
$subject = "$subjectPrefix $subject";
$body = '
<strong>Name: </strong>'.$name.'<br />
<strong>Email: </strong>'.$email.'<br />
<strong>Message: </strong>'.nl2br($message).'<br />
';

$headers = 'MIME-Version: 1.1' . PHP_EOL;
$headers .= 'Content-type: text/html; charset=UTF-8' . PHP_EOL;
$headers .= "From: $name <$email>" . PHP_EOL;
$headers .= "Return-Path: $emailTo" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "X-Mailer: PHP/". phpversion() . PHP_EOL;

mail($emailTo, $subject, $body, $headers);

$data['success'] = true;
$data['message'] = 'Congratulations. Your message has been sent successfully';
}

// return all our data to an AJAX call
echo json_encode($data);
}

0 comments on commit 4cdc362

Please sign in to comment.