Move the subscription form to its own blade so it can be imported, remove the address/location as that's not standard, get things working correctly, add errors, and use name instead of id for the form fields so it can be used on any page

app/Http/Controllers/SubscriptionController.php

@@ -10,22 +10,19 @@ class SubscriptionController extends Controller {
     {
         $this->validate($request, [
             'name'    => 'required',
-            'email'   => 'required|email',
+            'email'   => 'required|email'
-            'address' => array('required', 'regex:/^([A-Za-z][0-9][A-Za-z] *[0-9][A-Za-z][0-9]|[0-9][0-9][0-9][0-9][0-9])$/')
         ]);
 
         $name    = $request['name'];
         $fname   = preg_replace('/ .*$/', '', $name);
         $lname   = preg_match('/. ./', $name) === 1 ? preg_replace('/^[^ ][^ ]* /', '', $name) : '';
         $email   = $request['email'];
-        $address = $request['address'];
 
         if (env('MAILCHIMP_APIKEY', '') != '' && env('MAILCHIMP_LISTID', '') != '') {
             // Submit the subscription request
             Newsletter::subscribe($email, [
                 'FNAME'   => $fname,
-                'LNAME'   => $lname,
+                'LNAME'   => $lname
-                'ADDRESS' => $address
             ]);
         }
 
@@ -33,7 +30,6 @@ class SubscriptionController extends Controller {
         $subscriptions = new Subscriptions;
         $subscriptions->name = $name;
         $subscriptions->email = $email;
-        $subscriptions->location = $address;
         $subscriptions->save();
 
         return 'success';

database/migrations/2015_12_17_232249_add_subscription_table.php

@@ -17,7 +17,6 @@ class AddSubscriptionTable extends Migration
             $table->increments('id');
             $table->string('name');
             $table->string('email');
-            $table->string('location');
             $table->timestamps();
         });
     }

resources/assets/js/subscription.js

@@ -2,21 +2,24 @@
 function subscriptionFormInit() {
     const $form = $("#subscription-form"),
         $input = $form.find(":input"),
-        $notify = $("#notification");
+        $name = $form.find("[name='name']"),
+        $email = $form.find("[name='email']"),
+        $token = $form.find("[name='_token']"),
+        $submit = $form.find("[name='submit']"),
+        $notify = $form.find(".notification");
 
     let subscribe = {},
         submitting = false;
 
     const getSubscribeData = function() {
         subscribe = {
-            name: $("#name").val(),
+            name: $name.val(),
-            email: $("#email").val(),
+            email: $email.val(),
-            address: $("#address").val(),
+            _token: $token.val()
-            _token: $("#token").val()
         };
     };
 
-    $("#submit").on("click", function(e) {
+    $submit.on("click", function(e) {
         e.preventDefault();
 
         if (!submitting) {
@@ -25,10 +28,10 @@ function subscriptionFormInit() {
 
             $.ajax({
                 type: "POST",
-                url: "/subscription-submit",
+                url: "/api/subscription-submit",
                 data: subscribe
             }).always(function(response) {
-                let responseJSON, errors, prop;
+                let errors;
 
                 $form.find(".error").removeClass("error");
                 $notify.removeClass("visible").removeClass("error");
@@ -41,13 +44,12 @@ function subscriptionFormInit() {
                         $input.fadeOut(150);
                     }, 1000);
                 } else {
-                    responseJSON = response.responseJSON;
                     errors = 0;
 
                     // add the error class to fields that haven't been filled out
-                    for (prop in responseJSON) {
+                    for (let errorName in response.responseJSON.errors) {
-                        if (responseJSON.hasOwnProperty(prop)) {
+                        if ($form.find(`[name='${errorName}']`).length) {
-                            $("#" + prop).addClass("error");
+                            $form.find(`[name='${errorName}']`).addClass("error");
                             errors++;
                         }
                     }

resources/assets/sass/elements/_subscription.scss

@@ -1,4 +1,5 @@
 #subscription-form {
+    $trans-speed: 100ms;
     position: absolute;
     top: 50%;
     right: 0px;
@@ -12,5 +13,11 @@
         margin: 5px;
         width: calc(100% - 10px);
         padding: 3px;
+        border: 1px solid lighten($c-accent, 50%);
+        transition: border-color $trans-speed;
+
+        &.error {
+            border-color: $c-error;
+        }
     }
 }

resources/views/elements/subscription-form.blade.php

@@ -0,0 +1,7 @@
+<form id="subscription-form" action="#" method="POST" accept-charset="UTF-8">
+    <div class="notification"></div>
+    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+    <input type="text" name="email" placeholder="Email" />
+    <input type="text" name="name" placeholder="Name" />
+    <input type="submit" name="submit" value="Subscribe" />
+</form>

resources/views/website/index.blade.php

@@ -1,14 +1,5 @@
 @extends('layouts.public', [ 'title' => 'Home' ])
 
 @section('content')
-    <div id="subscription-form">
+    @include('elements.subscription-form')
-        <form action="#" method="POST" accept-charset="UTF-8">
-            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
-            <input type="text" name="email" id="email" placeholder="Email" />
-            <input type="text" name="name" id="name" placeholder="Name" />
-            <input type="text" name="address" id="address" placeholder="Postal / ZIP" />
-            <div id="notification"></div>
-            <input id="submit" type="submit" value="Subscribe" />
-        </form>
-    </div>
 @endsection