Add email submission input form

HackCU · Nov 28, 2017 · 4380350 · 4380350
1 parent 754cd50
commit 4380350
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -5,10 +5,10 @@
 				<img src="{{site.logo}}" class="logo">
 				<p class="lead">{{site.author-description}}</p>
 				{% if site.fb-community %}
-					<a class="btn btn-accent btn-block" href="https://facebook.com/groups/{{site.fb-community}}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> Join on Facebook</a>
+					<a class="btn btn-accent btn-block" href="https://facebook.com/groups/{{site.fb-community}}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> Join us on Facebook</a>
 				{% endif %}
 				{% if site.slack-signup %}
-					<a class="btn btn-accent btn-block" href="{{site.slack-signup}}" target="_blank"><i class="fa fa-slack" aria-hidden="true"></i> Join on Slack</a>
+					<a class="btn btn-accent btn-block" href="{{site.slack-signup}}" target="_blank"><i class="fa fa-slack" aria-hidden="true"></i> Join us on Slack</a>
 				{%endif%}
 			</div>
 			<div class="col-md-5 col-md-offset-2">

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -41,8 +41,8 @@
 
 <body>
 {% include header.html %}
-{% include social_media.html %}
 {{content}}
+{% include social_media.html %}
 {% include footer.html %}
 
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
@@ -51,6 +51,7 @@
             integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
             crossorigin="anonymous"></script>
 <script src="assets/js/events.js?_={{ site.time |  date: "%s" }}"></script>
+<script src="assets/js/email.js?_={{ site.time |  date: "%s" }}"></script>
 
 {% unless site.ga == null  %}
     <script async src="https://www.googletagmanager.com/gtag/js?id={{site.ga}}"></script>

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -76,7 +76,7 @@ section.social-media {
 
 .btn {
     @include box-shadow(0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19));
-    text-transform: uppercase;
+    // text-transform: uppercase;
     @include border-radius(0);
     position: relative;
     top: 0;
@@ -228,7 +228,7 @@ section.events{
     background: linear-gradient( rgba($events-color, 0.75), rgba($events-color, 0.75) ), url(../../{{site.events_bg_img}}) no-repeat center center/cover;
 
 
-    h2 {
+    .main-title {
         padding-bottom: 30px;
     }
 
@@ -325,6 +325,10 @@ section.events{
         &.past .past-text{ 
             display: inline;
         }
+
+        form#email-form{
+            max-width: 400px !important;
+        }
     }
 
 

diff --git a/assets/js/email.js b/assets/js/email.js
@@ -0,0 +1,5 @@
+$("#email-submit").click(function(){        
+    $.post("http://hackcu-sendgrid-capture.herokuapp.com", $("#email-form").serialize(), function(data) {
+    	$(".response-info").html(data);
+    });
+});
diff --git a/index.md b/index.md
@@ -7,10 +7,10 @@ layout: base
 <section class="events">
     <div class="container">
         <div class="row">
-            <h2 class="text-center white-text biko">Our events</h2>
+            <h1 class="text-center white-text biko main-title">Our events</h1>
             {% assign sorted = site.data.events | sort: 'date','last' %}
             {% for event in sorted %}               
-                <div class="col-sm-6 col-md-4 ">
+                <div class="col-sm-6 col-md-4">
                     <a {% unless event.url == null %} href="{{event.url}}" {% endunless %} target="_blank" class="event-url">
                         <div class="panel panel-default ">
                             <div class="panel-heading">
@@ -30,7 +30,20 @@ layout: base
             {% endfor %}
         </div>
         <div class="row text-center">
-            <a class="btn btn-accent calendar biko" href="https://calendar.google.com/calendar/r?cid=webcal://{{ site.domain }}/calendars/events.ics" target="_blank">Add to Google Calendar</a>
+            <div class="email-sub col-md-4 col-md-offset-4">
+                <h2 class="text-center white-text biko">Don't miss out!</h2>
+                <h4 class="text-center white-text" style="display: inline-block;">Subscribe to be notified of upcoming events!</h4>
+                <form id="email-form" accept-charset="utf-8">
+                    <div class="input-group">
+                        <input type="email" class="form-control" name="email" placeholder="[email protected]">                        
+                        <span class="input-group-btn">
+                            <button id="email-submit" class="btn btn-success" type="button"><i class="fa fa-paper-plane"></i></button>
+                        </span>
+                        <span class="response-info"></span>
+                    </div>
+                </form><br>
+                <a class="btn btn-accent calendar biko" href="https://calendar.google.com/calendar/r?cid=webcal://{{ site.domain }}/calendars/events.ics" target="_blank">Add events to Google Calendar</a>
+            </div>
         </div>
     </div>
 </section>