Implement contact form functionality

This commit is contained in:
Kevin MacMartin 2016-01-03 19:08:53 -05:00
parent 2fc22e6c9b
commit 392ffaf572
18 changed files with 304 additions and 47 deletions

View file

@ -4,7 +4,7 @@ SITE_DESC=A website template
APP_ENV=local
APP_DEBUG=true
APP_KEY=random_string
APP_URL=http://localhost
APP_URL=http://template.hypothetic.al
DB_HOST=localhost
DB_DATABASE=hypothetical
@ -17,9 +17,12 @@ CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync
MAIL_SENDTO=null
MAIL_DRIVER=smtp
MAIL_HOST=null
MAIL_PORT=587
MAIL_ADDRESS=null
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_ENCRYPTION=tls

1
.gitignore vendored
View file

@ -3,6 +3,5 @@
/bower_components
/public/build
/public/css
/public/fonts
/public/js
.env

View file

@ -0,0 +1,39 @@
<?php namespace App\Http\Controllers;
use Mail;
use App\Models\Contact;
use Illuminate\Http\Request;
class ContactController extends Controller
{
public function postContactSubmit(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'message' => 'required'
]);
$contact = new Contact;
$name = $request['name'];
$email = $request['email'];
$message = $request['message'];
$contact->name = $name;
$contact->email = $email;
$contact->message = $message;
$contact->save();
// Send the email if this is the production environment
if (env('MAIL_SENDTO') != null) {
Mail::send('email.contact', [ 'contact' => $contact ], function ($mail) use ($contact) {
$mail->from(env('MAIL_ADDRESS'), env('SITE_NAME'))
->to(env('MAIL_SENDTO'))
->subject('Contact form submission');
});
}
return 'success';
}
}

View file

@ -10,6 +10,12 @@ Route::get('/', function () {
return view('website.home');
});
Route::get('/contact', function() {
return view('website.contact');
});
Route::post('/contact-submit', 'ContactController@postContactSubmit');
/*
|--------------------------------------------------------------------------
| Content Management Routes

11
app/Models/Contact.php Normal file
View file

@ -0,0 +1,11 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
// the contact table
protected $table = 'contact';
}

View file

@ -0,0 +1,33 @@
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class AddContactTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contact', function(Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email');
$table->text('message');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('contact');
}
}

View file

@ -18,6 +18,7 @@ elixir.config.autoprefix = {
// javascript files in resources/assets/js/
var jsLocal = [
'site-vars.js',
'contact.js',
'app.js'
];

View file

@ -1 +1,6 @@
console.log('app.js has been run');
// run once the document is ready
$(document).ready(function() {
// initialize the contact form
if ($('#contact-form').length)
contactFormInit();
});

View file

@ -0,0 +1,57 @@
// contact page functionality
function contactFormInit() {
var $form = $('#contact-form'),
$notify = $('#notification'),
contact = {},
submitting = false;
var getContactData = function() {
contact = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val(),
_token: $('#token').val()
};
};
$('#submit').on('click', function(e) {
e.preventDefault();
if (!submitting) {
submitting = true;
getContactData();
$.ajax({
type: 'POST',
url: '/contact-submit',
data: contact
}).always(function(response) {
$form.find('.error').removeClass('error');
$notify.removeClass('visible');
if (response === 'success') {
$notify.text('Thanks for your message!').addClass('success').addClass('visible');
} else {
var responseJSON = response.responseJSON,
errors = 0;
// add the error class to fields that haven't been filled out
for (var prop in responseJSON) {
if (responseJSON.hasOwnProperty(prop)) {
$('#' + prop).addClass('error');
errors++;
}
}
if (errors > 0) {
$notify.find('span').text(errors);
$notify.addClass('visible');
}
// re-enable submitting
submitting = false;
}
});
}
});
}

View file

@ -7,6 +7,7 @@
// Supplementary
@import "elements/**";
@import "pages/**";
/*
|

View file

@ -9,3 +9,4 @@
@c_text_light: #fff; // light text
@c_base: #0088cc; // base
@c_accent: #f5f5f5; // accent
@c_error: #ff0000; // error

View file

@ -0,0 +1,49 @@
#contact-form {
margin-top: 35px;
margin-bottom: 20px;
input, textarea {
width: 100%;
margin-bottom: 20px;
padding: 5px 10px;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid fade(@c_text, 25%);
transition: border 100ms;
&:focus { border: 2px solid fade(@c_base, 60%); }
&.error { border: 2px solid @c_error; }
}
textarea {
resize: none;
height: 150px;
}
#submit {
text-align: center;
font-weight: bold;
color: @c_text_light;
background-color: lighten(@c_base, 5%);
transition: background-color 100ms;
&:hover { background-color: @c_base; }
}
#notification {
margin: 0px auto 15px auto;
padding: 5px 10px;
color: @c_text_light;
text-align: center;
font-size: 14px;
opacity: 0;
background-color: lighten(@c_error, 15%);
transition: opacity 100ms;
&.visible { opacity: 1; }
span { font-weight: bold; }
&.success {
background-color: transparent;
color: @c_text;
font-weight: bold;
}
}
}

View file

@ -3,7 +3,7 @@
@section('page-content')
<div class="container auth-container">
<div class="row">
<div class="col-xs-6 col-xs-push-3">
<div class="col-xs-12 col-md-6 col-md-offset-3">
@yield('auth-form')
</div>
</div>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p>Name: {{ $contact['name'] }}</p>
<p>Email: {{ $contact['email'] }}</p>
<p>{{ $contact['message'] }}</p>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p><strong>Name:</strong> {{ $contact['name'] }}</p>
<p><strong>Email:</strong> {{ $contact['email'] }}</p>
<p>{{ $contact['message'] }}</p>
</body>
</html>

View file

@ -0,0 +1,30 @@
@extends('public')
@section('page-content')
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Contact</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-push-2">
<div id="contact-form">
<form action="#" method="POST" accept-charset="UTF-8">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
<input type="text" name="name" id="name" placeholder="Name" /><br />
<input type="text" name="email" id="email" placeholder="Email" /><br />
<textarea name="message" id="message" placeholder="Message"></textarea>
<input id="submit" type="submit" value="Submit" />
</form>
<div id="notification"><strong>Error:</strong> There were problems with the <span>0</span> fields highlighted above</div>
</div>
</div>
</div>
</div>
@endsection